onyx-dot-app/onyx
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 25, 2026
Elevated
Design risk in this codebase.
More findings
Verdict
Calm, token-consistent surfaces hide two accessibility and safety gaps: a reset button with no guardrail and a focus ring that might vanish on its own background. The form styling is disciplined; the moments that actually need extra care get the least design attention.
Files Rams reviewed
web/src/app/admin/connectors/[connector]/pages/gdrive/GoogleDrivePage.tsx
web/src/app/admin/connectors/[connector]/pages/gmail/GmailPage.tsx
web/src/app/admin/connectors/[connector]/pages/Advanced.tsx
web/src/app/admin/connectors/[connector]/pages/ConnectorInput/FileInput.tsx
web/src/app/admin/connectors/[connector]/pages/ConnectorInput/NumberInput.tsx
web/src/app/admin/connectors/[connector]/pages/ConnectorInput/SelectInput.tsx
web/src/app/admin/connectors/[connector]/pages/DynamicConnectorCreationForm.tsx
web/src/app/admin/connectors/[connector]/pages/FieldRendering.tsx
web/src/app/admin/connectors/[connector]/pages/gdrive/Credential.tsx
web/src/app/admin/connectors/[connector]/pages/gmail/Credential.tsx
web/src/app/app/components/AppPopup.tsx
web/src/app/app/components/WelcomeMessage.tsx
web/src/app/app/components/files/images/FullImageModal.tsx
web/src/app/app/components/files/images/InMessageImage.tsx
web/src/app/app/components/tools/GeneratingImageDisplay.tsx
web/src/app/components/nrf/SettingsPanel.tsx
web/src/app/craft/components/AgentSwitcher.tsx
web/src/app/craft/components/BigButton.tsx
web/src/app/craft/components/BuildLLMPopover.tsx
web/src/app/craft/components/BuildMessageList.tsx
web/src/app/craft/components/BuildWelcome.tsx
web/src/app/craft/components/CometEdge.tsx
web/src/app/craft/components/CompactionMarker.tsx
web/src/app/craft/components/ConnectDataBanner.tsx
web/src/app/craft/components/ContextRing.tsx
web/src/app/craft/components/CraftInputBar.tsx
web/src/app/craft/components/CraftingLoader.tsx
web/src/app/craft/components/IntroBackground.tsx
web/src/app/craft/components/IntroContent.tsx
web/src/app/craft/components/ModelPickerButton.tsx
UX
web/src/app/admin/connectors/[connector]/pages/Advanced.tsx:42
Reset button deletes indexing config with zero confirmation step
In Advanced.tsx, the "Reset" button uses variant="danger" with a trash icon and type="submit", so clicking it fires the destructive action immediately. There is no confirmation dialog, modal, or intermediate step between the click and the reset taking effect.
Why it matters
A misclick or accidental Enter-triggered submit permanently wipes the connector's prune frequency, refresh frequency, and indexing start date configuration with no recovery path, forcing the admin to reconstruct settings from memory.
Fix
Gate destructive submit actions behind a confirmation dialog before the mutation runs.
<Button variant="danger" icon={SvgTrash} type="submit">
Reset
</Button><Button
variant="danger"
icon={SvgTrash}
type="button"
onClick={() => setShowResetConfirmModal(true)}
>
Reset
</Button>
{showResetConfirmModal && (
<ConfirmModal
title="Reset advanced settings?"
onConfirm={submitForm}
onClose={() => setShowResetConfirmModal(false)}
/>
)}Accessibility
web/src/app/admin/connectors/[connector]/pages/ConnectorInput/SelectInput.tsx:32
Select field strips native focus ring with only a color token replacing it
The select in SelectInput.tsx (line 32) applies focus:outline-hidden alongside focus:ring-2 focus:ring-lighter-agent, removing the browser's default focus outline in favor of a single ring color with no visible fallback verified against the field's own bg-transparent background.
Why it matters
If lighter-agent renders as a low-contrast tint against the page background behind this transparent select, keyboard users lose all visual indication of which control has focus while tabbing through the form.
Fix
Keep a visible focus indicator by pairing the ring with an offset or retaining the outline rather than hiding it outright.
className="w-full p-2 border border-border-03 rounded-08 bg-transparent text-text-04 focus:ring-2 focus:ring-lighter-agent focus:border-lighter-agent focus:outline-hidden"className="w-full p-2 border border-border-03 rounded-08 bg-transparent text-text-04 focus:ring-2 focus:ring-offset-2 focus:ring-lighter-agent focus:border-lighter-agent"Typography
Color
Spacing
Components
Motion
Craft
Working well
- NumberInput's description text for Refresh Frequency spells out the unit (minutes), the default behavior, and what entering 0 does, which removes guesswork for admins configuring pruning without needing to check docs.
- The label in SelectInput uses text-text-700 and text-text-500 design tokens instead of raw gray hex values, keeping this field visually consistent with the rest of the token-driven form system.
- SelectInput correctly pairs the label's htmlFor with the Field's name prop, giving the select an accessible name for screen readers without extra ARIA plumbing.
Scored July 25, 2026 with Rams Engine v0.0.3 · Engine changelog
First scored July 9, 2026: 59/100. This rescore on v0.0.3: 59/100.
This page is an automated design review of onyx-dot-app/onyx’s UI code: 30 files read against 309 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; confirmed criticals cap it — one at 59, two at 49, three or more at 39.
More design scores
Score your own repo.
Free on public repos, no account. The same engine that scored this page reads your UI code and mints a score page like this one.
Public repos only. The full engine reviews the UI code and mints a public score page — we email you the link too. Already-scored repos open instantly.
