CURATED · OPEN · FREE

Craft

A premium, calm productivity workspace blending structure with expressive creativity.

productdocs

↓ Download design system (43 MB)Open in OpenDesign

Visit: https://www.craft.do

📦 Browse pack contents →

Identity DNA

elegantthoughtfulproductivestructuredcalm

A refined digital notebook for modern thinkers.

Color

#030302Ink

#4A4A4AInk soft

#FFFFFFBG

#F5F5F5BG soft

#EBEBEBBG quiet

#E1E1E1Muted

rgba(3,3,2,0.09)Line

High-contrast ink on clean backgrounds for readability, accented by soft pastels in illustrations.

Typography

transitional-serif · geometric-sans

display56px · 500

Use serif for display headlines to convey elegance and thoughtfulness. · Use sans-serif for all body copy, navigation, and UI elements for clarity. · Maintain tight negative letter-spacing on display fonts.

Spacing

4px

8px

16px

24px

32px

48px

64px

96px

Generous whitespace to create a calm, breathable reading experience.

Surfaces

sm · 4px

md · 14px

lg · 24px

pill · 999px

1px solid rgba(3,3,2,0.09)

0px 20px 40px 0px rgba(0, 0, 0, 0.05) · 0px 3px 10px 0px rgba(0, 0, 0, 0.08)

Layout

1280container

12columns

24pxgutter

768 / 1024breakpoints

A clean, centered vertical layout with a strong typographic hierarchy and spacious sections.

Motion & Interaction

150msmicro

200mssmall

500msmedium

cubic-bezier(0.4, 0, 0.2, 1)easing

Smooth color and opacity transitions on hover states.

Subtle background color shifts or opacity changes. · Immediate, crisp response.

Components

button Pill-shaped buttons with high-contrast backgrounds (black for primary CTA, white for secondary).
card Softly rounded cards with subtle drop shadows, often grouping related content or tasks.
chip Minimalist pills for status or tags with light pastel backgrounds.
input Clean, borderless or subtly bordered inputs that blend into the surface.
hero A large typographic statement layered over an expressive, textured collage illustration.

Voice & Don'ts

Tone Inviting, thoughtful, and empowering.
Headlines Clear, benefit-oriented statements using elegant serif typography.
CTAs Direct and encouraging, focusing on immediate value (e.g., 'Try Craft Free').

Don't use a single accent color for everything — screenshot shows diverse pastel colors in illustrations.
Don't use heavy drop shadows — screenshot shows subtle, soft shadows for depth.
Don't use all-caps for body text — screenshot shows uppercase only for small category labels.
Don't use a dark mode interface — screenshot shows a predominantly light, bright background.
Don't use sharp, square corners — screenshot shows highly rounded corners (up to 24px or pill shapes).
Don't use rigid, grid-heavy layouts — screenshot shows a more organic, flowing arrangement in illustrations.
Avoid: Jargon-heavy or overly technical language.
Avoid: Aggressive or loud promotional tones.

Inside the pack — real screenshots

Craft — 桌面滚动分段（90% viewport 步进，作为视觉证据） — 桌面滚动分段（90% viewport 步进，作为视觉证据）

Captured from the live site · real computed styles

System prompt

This design represents a premium, calm productivity tool blending structured organization with expressive creativity. It utilizes a high-contrast palette centered on ink-black (#030302) against clean white (#FFFFFF) surfaces. The typography pairs elegant transitional-serif fonts for display headlines with clean geometric-sans for body text and UI. Key hex colors include #030302, #FFFFFF, and a subtle border color of rgba(3,3,2,0.09). Critical donts include: do not use aggressive drop shadows, do not use sharp corners, and do not rely on a single high-chroma accent color. The layout emphasizes generous whitespace and a centered vertical flow, creating a breathable, focused user experience.

Bring this taste to your agent

Hand your AI agent a machine-readable spec of this design — tokens, type, motion, the whole DNA.

OpenDesign skill ↗ · This pack for agents ↗

en · zh-CN · zh-TW · ja · ko