Digits — design system & UI screens
Light hero with a bold serif/sans headline over a general-ledger product UI and phone mockup.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/digits.
Decoded design system
Digits's decoded design system: background #FFFFFF, text #000000, accent #00FFBE, link #32497F, primary #00FFBE; type scale h1 80px / h2 26px / body 18px; 8px spacing base; 6px base radius. The single interactive/action color is #00FFBE — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #EFEFEF |
| border | #D8D8D8 |
| text | #000000 |
| text_muted | #606060 |
| primary | #00FFBE |
| accent | #00FFBE |
| link | #32497F |
| secondary | #2A2D41 |
| button_bg | #00FFBE |
| button_text | #000000 |
Using these colors
- Action color
#00FFBE— the single interactive color; only on things you click or must notice, never large fills. primary,accent,button_bgare all#00FFBE— one role, not several (the action color).- accent
#00FFBE— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - link
#32497F— inline text links and link-styled controls. - secondary
#2A2D41— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Stabil Grotesk
- Body: Stabil Grotesk
- h1: 80px
- h2: 26px
- body: 18px
Spacing
- base unit: 8px
- scale: 2px, 3px, 6px, 7px, 8px, 12px, 14px, 15px, 16px, 24px
Radii
- base: 6px
- button: 24px
Shadows (elevation)
- subtle:
rgba(0, 0, 0, 0.004) 0px 0px 0.985278px 0px - card:
rgba(0, 0, 0, 0.15) 0px 0px 10px 0px - overlay:
rgba(0, 0, 0, 0.1) 0px 0px 50px 0px
Motion
Micro-interactions run at 200ms (dominant) with ease-in-out.
- durations: 200ms · 100ms · 600ms
- easings:
ease-in-out·ease - animated properties: opacity, background-color, color, transform
Native design tokens
| Token | Value |
|---|---|
--color-grey-disabled-light | #f5f6f9 |
--color-white-40 | rgba(255 255 255/.4) |
--global-border-color | rgba(0 0 0/.1) |
--color-pink-accent | #d382e0 |
--color-blue-dark | #2a2d41 |
--color-blue-gray | #bacaf3 |
--color-white-80 | rgba(255 255 255/.8) |
--color-purple-accessible | #6654dd |
--global-text-color | rgba(0 0 0/.6) |
--positive-color | #fff |
…and 97 more measured on the page.
Button states (measured)
- primary hover: background
#000000· color#FFFFFF - primary focus: background
#000000· color#FFFFFF· outline2px solid rgb(0, 0, 0)
Layout (measured)
- container max-width:
1200px - nav: 70px sticky
- common grid: 2 columns
Motion choreography (measured)
Load order: div.content → div.content → div.logo-carousel-scroll → div.clock-content-hand-secon → div.clock-content-hand-minut → div.clock-content-hand-hour
Scroll reveal: 15 elements rest at opacity 0, animate in over 0.5s ease-in-out.
Responsive (measured)
- breakpoints: 430px · 480px · 640px · 768px · 992px · 1024px
- mobile (390px): hero 38px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →