flighthq/flight
Reviewed against Rams quality heuristics: accessibility, color, typography, spacing, components, motion, UX, and craft.
30 files reviewed·July 31, 2026
More findings
Verdict
A minimal, glassy look built on hardcoded colors with no token layer to back it up. The biggest risk is accessibility debt, missing focus states, low-contrast text, and no fallback for reduced transparency, all stacking on the same unstructured color system.
Files Rams reviewed
examples/runners/electron/src/renderer/index.html
examples/runners/web/src/style.css
tools/functional/src/style.css
tools/gallery/src/style.css
examples/packages/particleeditor/index.html
examples/packages/adjustments/index.html
examples/packages/benchmark/index.html
examples/packages/bitmap/index.html
examples/packages/camera2d/index.html
examples/packages/clock/index.html
examples/packages/collision/index.html
examples/packages/effects/index.html
examples/packages/flowstates/index.html
examples/packages/interaction/index.html
examples/packages/motionpath/index.html
examples/packages/movieclip/index.html
examples/packages/particles/index.html
examples/packages/pathboolean/index.html
examples/packages/platformer/index.html
examples/packages/scene3d/index.html
examples/packages/shapes/index.html
examples/packages/skeleton/index.html
examples/packages/snapshot/index.html
examples/packages/sound/index.html
examples/packages/spatial/index.html
examples/packages/spring/index.html
examples/packages/spritesheet/index.html
examples/packages/text/index.html
examples/packages/textinput/index.html
examples/packages/tilemap/index.html
Accessibility
examples/runners/web/src/style.css:65
Sidebar example buttons have no visible keyboard focus indicator
In examples/runners/web/src/style.css, .example-btn defines a hover state (background #1e1e1e, color #aaa) but no :focus-visible rule. Tabbing through the sidebar list gives keyboard users nothing but whatever unstyled default the browser supplies on a dark #111 background, which is easy to miss or clipped by the sidebar's overflow rules.
Why it matters
Keyboard users lose track of which example is focused while navigating the list, and can't confirm a selection before pressing Enter.
Fix
Add an explicit :focus-visible style to .example-btn using a visible outline color already in the palette.
.example-btn:hover {
background: #1e1e1e;
color: #aaa;
}.example-btn:hover {
background: #1e1e1e;
color: #aaa;
}
.example-btn:focus-visible {
outline: 2px solid #3d7fff;
outline-offset: -2px;
}tools/functional/src/style.css:101
Blurred renderer bar has no fallback for reduced-transparency preference
#renderer-bar uses background: rgba(8, 8, 8, 0.82) with backdrop-filter: blur(12px) and no @media (prefers-reduced-transparency: reduce) rule. Since the bar floats over the live preview frame, its effective legibility depends entirely on whatever content is rendering underneath.
Why it matters
Users who enable reduced transparency at the OS level to improve legibility get no benefit here, and the bar's readability stays at the mercy of whatever is on screen behind it.
Fix
Add a prefers-reduced-transparency media query that swaps the translucent blur for a solid background.
#renderer-bar {
...
background: rgba(8, 8, 8, 0.82);
backdrop-filter: blur(12px);
...
}#renderer-bar {
...
background: rgba(8, 8, 8, 0.82);
backdrop-filter: blur(12px);
...
}
@media (prefers-reduced-transparency: reduce) {
#renderer-bar {
background: #0a0a0a;
backdrop-filter: none;
}
}examples/runners/web/src/style.css:53
Sidebar label text fails contrast against the page background
The .example-btn label color #666 sits on the page background #111. That pair computes to roughly 3.3:1, which fails WCAG AA's 4.5:1 minimum for this 12px text.
Why it matters
Low-vision users and anyone in a bright room struggle to read the example names in the sidebar, slowing navigation through the list.
Fix
Raise the default label color to at least 4.5:1 against the surrounding background.
.example-btn {
...
color: #666;
...
}.example-btn {
...
color: #999;
...
}Color
examples/runners/web/src/style.css:12
Base colors hardcoded throughout with no reusable token layer
html, body sets background: #111 and color: #ccc directly, and the rest of the file repeats raw hex values (#161616, #252525, #333, #666, #1e1e1e, #aaa, #1a2740, #3d7fff, #7ab8ff...) with no CSS custom properties tying them together.
Why it matters
Every future theme or contrast fix means hunting down each literal individually, and nothing stops the same gray from drifting to a slightly different hex somewhere else in the file.
Fix
Define the recurring grays as CSS custom properties at :root and reference them everywhere instead of repeating hex literals.
html,
body {
height: 100%;
overflow: hidden;
background: #111;
color: #ccc;
...
}:root {
--bg-base: #111;
--text-base: #ccc;
}
html,
body {
height: 100%;
overflow: hidden;
background: var(--bg-base);
color: var(--text-base);
...
}Typography
Spacing
Components
Motion
UX
Craft
Working well
- The `.value` readout uses `font-variant-numeric: tabular-nums` with a fixed `min-width: 40px`, so digit-width changes as sliders move never shift the layout next to it.
- .selected states on both .example-btn and .renderer-btn pair a color change with a border-left/border-color shift, so selection isn't color-only.
- .example-btn.selected pairs a left accent border with both background and text color changes, so selection is never carried by color alone.
- Using system-ui and ui-monospace as font fallbacks is a sensible, dependency-free choice for a debug harness.
Scored July 31, 2026 with Rams Engine v0.0.3 · Engine changelog
This page is an automated design review of flighthq/flight’s UI code: 30 files read against 291 versioned rules covering accessibility, color, typography, spacing, components, UX, motion, and craft. The score is out of 100; any confirmed critical issue caps it at 59.
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.
