Nexub DSv1.5.0
Brand
Foundations
Calm Depth: calm, tonal surfaces for content; a thin layer of adaptive glass for the controls that float above it; motion that feels physical; colour only where it means something. It borrows Material 3’s structure, Apple’s restraint and material, and Wise’s clarity, and copies none of them.
These six principles are the tie-breakers in every design and code review.
Navigation and toolbars are quieter than the content they frame. Remove a divider before adding one; let spacing and tone separate things.
A tonal sidebar with no border; the active item is a soft pill.
A saturated brand-blue sidebar item and a hard line around every region.
Surfaces step through tonal tiers (surface → container → elevated). Shadows are only for things that float. No gradients or coloured chips in product UI.
A card on surface-elevated with a soft hairline.
Drop shadows on in-flow cards, gradient eyebrow chips, coloured icon tiles.
Each view has one emphasised action. Everything else is neutral or tonal. Expressive emphasis (glass tint, the expressive spring) is for key moments.
One filled button; the rest tonal, outlined or text.
Three filled buttons in different brand colours side by side.
Movement uses springs, not durations. Critically damped by default; a little bounce only where something is being directly manipulated. Exits are faster than entrances.
ease-spatial-default on a panel; ease-expressive-fast on a toggle thumb.
transition-all 300ms ease on everything.
Tabular figures in data, the currency’s own minor unit, a true minus sign. Hover, pressed, selected and disabled are explicit states, never just opacity.
<Amount value={-89.99} currency="USD" tone="auto" />
opacity: 0.5 to mean disabled; proportional digits in a table.
Contrast is an input to the colour system, not a check afterwards: every role pair meets WCAG 2.2 AA in light, dark and high contrast, and a test fails the build if it ever stops. Every material has a solid fallback; every user preference is honoured.
Respect prefers-reduced-motion, -transparency and -contrast, and forced colours.
White text on a glass panel over an unknown background.