Craft — design system & UI screens

Productivity · 1 screen · 10 sections · craft.do

Soft, illustrated landing where a painterly blue-sky-with-clouds hero frames a centered serif headline ("Your space for notes, tasks, and big ideas") above a floating product screenshot rendered on a notebook-paper sheet. The signature treatment is a warm cream canvas broken into oversized pastel feature blocks (lavender, sage green, butter yellow) each holding a tilted, drop-shadowed app card, interleaved with a "How people use Craft" row of real-photo persona avatars and italic-serif testimonials. Closes with a horizontal carousel of textured, frame-mounted template thumbnails reinforcing the cozy, hand-crafted, anti-corporate mood.

Open in Mozaika →

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/craft.

Decoded design system

Craft's decoded design system: background #FCF9F7, text #030302, accent #030302, link #FF3B30, primary #9BD8A9; type scale h1 66px / h2 54px / body 16px; 4px spacing base; 6px base radius. The single interactive/action color is #030302 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#FCF9F7`
surface	`#EDEAE8`
border	`#D6D4D2`
text	`#030302`
text_muted	`#61605F`
primary	`#9BD8A9`
accent	`#030302`
link	`#FF3B30`
secondary	`#3C82F7`
button_bg	`#030302`
button_text	`#FFFFFF`

Using these colors

Action color #030302 — the single interactive color; only on things you click or must notice, never large fills.
accent, button_bg are all #030302 — one role, not several (the action color).
accent #030302 — 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.
primary #9BD8A9 — a brand color — but the call-to-action uses #030302, not this.
link #FF3B30 — inline text links and link-styled controls.
secondary #3C82F7 — 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: Untitled Serif
Body: Untitled Sans
h1: 66px
h2: 54px
body: 16px

Spacing

base unit: 4px
scale: 3px, 4px, 5px, 8px, 10px, 12px, 16px, 20px, 24px, 32px

Radii

base: 6px
button: 9999px

Shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px

Shadows (elevation)

overlay: rgba(0, 0, 0, 0.01) 0px 50px 40px 0px, rgba(0, 0, 0, 0.02) 0px 50px 40px 0px, rgba(0, 0, 0, 0.05) 0px 20px 40px 0px, rgba(0, 0, 0, 0.08) 0px 3px 10px 0px

Motion

Micro-interactions run at 150ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 150ms · 200ms · 500ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · cubic-bezier(0, 0, 0.2, 1)
animated properties: color, background-color, border-color, outline-color

Native design tokens

Token	Value
`--card`	`#fff`
`--card-foreground`	`#030302`
`--popover`	`#fff`
`--popover-foreground`	`#030302`
`--primary`	`#030302`
`--primary-foreground`	`#030302`
`--secondary`	`#fff`
`--secondary-foreground`	`#030302`
`--muted`	`#0303020a`
`--muted-foreground`	`#03030280`

…and 110 more measured on the page.

Button states (measured)

primary hover: background rgba(3, 3, 2, 0.75)
primary focus: outline 1px auto oklab(0.0959089 -0.00155481 0.00499368 / 0.0607843)

Layout (measured)

container max-width: 1080px
nav: 52px fixed, backdrop blur(4px)
common grid: 5 columns

Motion choreography (measured)

Load order: a.sticky → div.relative → div.relative

Responsive (measured)

breakpoints: 640px · 768px · 1024px · 1280px · 1536px
mobile (390px): hero 48px · nav inline

Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →

Screens

Craft notes app landing with illustrated cloud sky hero and pastel feature cards