---
name: Craft
description: "This site is a perfect example of a premium, calm productivity UI that successfully balances utility with expressive, illustrative design."
version: alpha

colors:
  background: "#FFFFFF"
  primary: "#030302"
  secondary: "#4A4A4A"
  neutral: "#E1E1E1"
  bg-soft: "#F5F5F5"
  bg-quiet: "#EBEBEB"
  muted-soft: "#8C8C8C"
  line: "rgba(3,3,2,0.09)"

typography:
  display:
    fontFamily: transitional-serif
    fontSize: 56px
    lineHeight: 1.1
    fontWeight: 500
    letterSpacing: "-1.2px"

rounded:
  sm: 4px
  md: 14px
  lg: 24px
  pill: 999px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px

---

## Overview

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

*A refined digital notebook for modern thinkers.*

## Colors

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

- **Background (`#FFFFFF`)** — uses `bg` token
- **Primary text (`#030302`)** — uses `ink` token
- **Secondary text (`#4A4A4A`)** — uses `ink-soft` token
- **Muted (`#E1E1E1`)** — uses `muted` token
- **Borders (`rgba(3,3,2,0.09)`)** — uses `line` token

## Typography

- **Display:** transitional-serif
- **Body:** geometric-sans

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

## Layout

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

*Rhythm:* Generous whitespace to create a calm, breathable reading experience.

## Elevation & Depth

- 0px 20px 40px 0px rgba(0, 0, 0, 0.05)
- 0px 3px 10px 0px rgba(0, 0, 0, 0.08)
- Borders: 1px solid rgba(3,3,2,0.09)

## Shapes

- `sm`: 4px
- `md`: 14px
- `lg`: 24px
- `pill`: 999px

## 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.

## Do's and Don'ts

**Don't:**
- 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.

---

## System Prompt (paste into AI agent)

```
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.
```