Changelog

Glass surfaces

For bars over scrolling content, such as the bottom nav.

• New color role bg-glass: bg-raised at 80% (white in light mode, neutral-900 in dark). The transparency lives in the color, never in layer opacity, which would fade the content too.
• Pair it with blur-backdrop, and shadow-floating when the bar floats.
• Figma: variable bg/glass (Light and Dark) and the effect style glass-floating, which holds the raised shadow and the backdrop blur together, since a layer takes one effect style. Both stay bound to the same variables.
• The Elevation and motion page shows the recipe.

Stronger muted and subtle text

Muted text was too faint to read comfortably.

• ink-muted is 60% (was 50% in light mode), so it reads at 5.7:1 on bg instead of 4.0:1.
• ink-subtle is 40% in both modes (was 38% light, 42% dark). Mirrored to the Figma Color collection.

Color, everywhere

• The system spells it color: the Color page is now /foundations/color, and the docs, guides and Figma use the same spelling.
• Changelog entries use one text size, and their dots are solid.

Relaxed body line heights

Running text had too little leading. Labels and subtitles keep the tighter steps.

• body is 17/26 (was 17/22; briefly 24, which was still tight) and body-sm is 15/22 (was 15/20).
• New scale steps line-height.17-relaxed and line-height.15-relaxed, used by those two roles only. Mirrored to the Figma Typography collection and text styles.

Sheet close matches its primary action

• The close button beside a sheet’s primary action now takes that button’s height (40, 48 or 56). It was always 56, so it looked oversized next to small buttons, for example in the Section examples.
• A close on its own, centred, stays 56.

Carousel cards keep their shadows

• The carousel track scrolls sideways, which cut off the top and bottom of each card’s shadow. The track now has 12px of room around its cards, pulled back with a negative margin, so the layout and snapping are unchanged.

Docs site quality pass

Navigation

• Navigation is in place: only the page body is swapped, so the sidebar, search and actions log stay as they are, with their scroll and open toggles.
• The body cross-fades between pages; the sidebar holds still.
• Pages are fetched when you hover or focus their link, so clicks open faster.
• Changelog, Roadmap and Contribution pages sit under Overview in both modes.
• The current page in the sidebar uses label.
• The wordmark’s dot uses accent-gradient.

Reading

• Text selection is the foreground color at low opacity; text is antialiased.
• Panels that hold live components use fill at 30%, so components stand out from bg-raised without the full fill’s weight.
• Icon tiles, code chips, tags and keys are outlined with line instead of filled.
• Do / don’t cards use success and danger, with square tops under the colored border.
• On the Color page, the Light and Dark columns line up across every role table.
• Props and slot rules are stacked full width on component pages.
• Control heights and blur samples are labelled with their tokens.

Details

• The actions log shows only on pages with live, tappable parts.
• Example stages no longer cut off component shadows at the top and bottom.
• Copying an icon shows a small check in the tile’s corner. Needed icons stay hidden while there are none.
• Motion pass on the sidebar toggles, search, actions log and hover states, with reduced motion respected.

Docs site shell from Figma

The site now follows the Figma site frame (Social → System → overview).

• A 280px sidebar with search, the All / Gen UI switch, navigation and the theme switch, beside a raised, bordered body that scrolls on its own.
• Sitewide search from the sidebar, ⌘K or /.
• Previous and next links follow the sidebar order and hide when there is none.
• The actions log is a code block in the same colors in both themes, using the new code roles.
• Phones get the sidebar as a drawer.

Primary button from Figma

• Filled buttons use accent-gradient with the shadow-highlight inner glow, and no border. Sizes are unchanged.

Icons from Figma

• 43 fill icons exported from Figma replace the Lucide set. There is no line style.
• plus, x and message became add, delete-x and chat in every recipe and screen.
• The Icons page has search and click-to-copy; npm run icons builds the set and npm run check fails if it is stale.

Elevation and motion

Effects

• Shadows follow the Figma effect styles: raised, floating, highlight, highlight-soft, the purple glow, a halo and two rings.
• No shadows in dark mode; the lighter raised background carries the layering.
• Blur tokens: blur-glass 10px and blur-backdrop 30px.

Motion

• Durations fast 160, base 240, slow 480, slower 720; easings standard, enter, exit and sheet.
• Reduced motion stops component animations.

Space, radius and size

• Spacing steps are named by pixel value (space-2 to space-64).
• Radius steps follow Figma (4 to 32, full), with roles by use: control, card, sheet, block, inset, bubble, bubble-tail.
• Control heights are 40 / 48 / 56; touch targets are at least 44.

Type roles

• A scale from the Figma file, used only by 16 roles named by function (display to micro, plus mono). VelioBot’s Text variants are the same roles.
• Body is 17px Medium. Nohemi headings are tracked +2%.
• Mirrored to Figma as variables and 16 text styles; other text styles were removed.

Color roles and palette

• Components use roles only; every role has a light and a dark value.
• The screen is bg (#FCFCFC) and anything on it is bg-raised (white).
• Status colors have their own hues: success emerald, warning amber, danger red.
• Every hue runs 50 to 950. Three gradients: accent, accent-2 and trust.
• Mirrored to the Figma Color collection (Light and Dark modes); color styles not in the system were removed.

Nohemi display font

• Nohemi (display) joins Satoshi (body) in system/fonts/.

One design system for Velio and Gen UI

The standalone Gen UI page became the Velio design system, with Gen UI as a focus inside it.

• Tokens in DTCG JSON with CSS, Dart and flat JSON outputs.
• One CSS file per component, classes prefixed v-. The JSON contract is unchanged.
• An Astro docs site with an All and a Gen UI focus over the same pages.