Napkin — design system & UI screens
Bright, minimal light hero with blue highlight accents; turns written text into shareable diagrams and visuals in a click.
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/napkin.
Decoded design system
Napkin's decoded design system: background #FFFFFF, text #1A1A1A, accent #2D68F5, link #2D68F5, primary #2D68F5; type scale h1 80px / body 18px; 8px spacing base; 8px base radius. The single interactive/action color is #1A1A1A — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #FFFFFF |
| surface | #F1F1F1 |
| border | #DCDCDC |
| text | #1A1A1A |
| text_muted | #717171 |
| primary | #2D68F5 |
| accent | #2D68F5 |
| link | #2D68F5 |
| secondary | #EAF1FF |
| button_bg | #1A1A1A |
| button_text | #FFFFFF |
Using these colors
- Action color
#1A1A1A— the single interactive color; only on things you click or must notice, never large fills. primary,accent,linkare all#2D68F5— one role, not several (the action color).- accent
#2D68F5— accent for emphasis — keep it rare on the page. - secondary
#EAF1FF— 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: Geomanist
- Body: Plus Jakarta Sans
- h1: 80px
- body: 18px
Spacing
- base unit: 8px
- scale: 7px, 10px, 12px, 13px, 16px, 20px, 21px, 26px, 33px, 35px
Radii
- base: 8px
- button: 0px
Shadows (elevation)
- card:
rgba(0, 0, 2, 0.3) 0px 10px 30px 0px - overlay:
rgba(133, 147, 103, 0.2) 0px 4px 48px 0px
Motion
Micro-interactions run at 500ms (dominant) with ease.
- durations: 500ms · 150ms · 250ms
- easings:
ease·ease-out - animated properties: color, background-color, border-color, transform
Native design tokens
| Token | Value |
|---|---|
--cc-link-color | #30363c |
--cc-bg | #fff |
--cc-primary-color | #2c2f31 |
--cc-secondary-color | #5e6266 |
--cc-btn-primary-bg | #30363c |
--cc-btn-primary-color | #fff |
--cc-btn-primary-border-color | #30363c |
--cc-btn-primary-hover-bg | #000 |
--cc-btn-primary-hover-color | #fff |
--cc-btn-primary-hover-border-color | #000 |
…and 34 more measured on the page.
Button states (measured)
- primary focus: outline
1px auto rgb(16, 16, 16)
Layout (measured)
- container max-width:
1280px - nav: 137px
Motion choreography (measured)
Load order: span.hero__title-line-highlig → span.hero__title-line-highlig → div.cm--box → div.cm--box → div.cm--box → h1.hero__title
Scroll reveal: 2 elements rest at opacity 0, animate in over 500ms.
Overlay recipe (measured)
dialog panel: #FFFFFF · radius 8px
Responsive (measured)
- breakpoints: 350px · 400px · 450px · 550px · 640px · 650px
- mobile (390px): hero 32px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →