---
version: alpha
name: Noteworthy
description: Editorial minimalism with a touch of whimsy — a warm off-white canvas, near-black ink set in a refined serif/grotesque pairing, generous whitespace, and a single warm accent that punctuates an otherwise restrained, gallery-like layout.

colors:
  # Canvas + ink
  background: "#faf8f4"
  surface: "#ffffff"
  surface-soft: "#f3f0ea"
  ink: "#161513"
  ink-pure: "#000000"
  ink-secondary: "#5b574f"
  ink-muted: "#8a857a"

  # Accent — warm signal color
  primary: "#e8552d"
  accent-soft: "#f6d8cb"
  accent-ink: "#a83617"

  # Interactive
  link: "#161513"
  link-hover: "#e8552d"
  focus-ring: "#e8552d"

  # Neutral scale
  gray-900: "#161513"
  gray-700: "#3d3a35"
  gray-500: "#8a857a"
  gray-300: "#cfc9bd"
  gray-200: "#e4dfd5"
  gray-100: "#efebe2"

  # Borders + dividers
  border: "#e4dfd5"
  border-strong: "#161513"

  # On-color
  on-primary: "#ffffff"
  on-ink: "#faf8f4"

typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 64px
    fontWeight: 500
    lineHeight: 1.04
    letterSpacing: -1.6px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 40px
    fontWeight: 500
    lineHeight: 1.12
    letterSpacing: -0.8px
  sub-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 28px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: -0.4px
  card-title:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 22px
    fontWeight: 600
    lineHeight: 1.3
    letterSpacing: -0.4px
  body-large:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 15px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
  label-mono:
    fontFamily: "JetBrains Mono, ui-monospace, SFMono-Regular, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.4px
  caption:
    fontFamily: "Inter, Helvetica, Arial, sans-serif"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0.2px

spacing:
  xs: 4px
  sm: 8px
  md: 12px
  lg: 16px
  xl: 24px
  2xl: 40px
  3xl: 64px
  4xl: 96px
  5xl: 144px

rounded:
  none: 0px
  xs: 4px
  sm: 8px
  md: 12px
  lg: 20px
  xl: 28px
  pill: 9999px

components:
  button-primary:
    backgroundColor: "{colors.ink}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
  button-primary-hover:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  button-secondary:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px
    borderColor: "{colors.border-strong}"

  button-accent:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 12px 24px

  badge:
    backgroundColor: "{colors.accent-soft}"
    textColor: "{colors.accent-ink}"
    typography: "{typography.label-mono}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"

  card-project:
    backgroundColor: "{colors.surface-soft}"
    textColor: "{colors.ink}"
    rounded: "{rounded.xl}"
    padding: 32px
    borderColor: "{colors.border}"

  input:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 10px 14px
    borderColor: "{colors.gray-300}"
  input-focus:
    backgroundColor: "{colors.surface}"
    borderColor: "{colors.focus-ring}"

  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    padding: 20px 32px
    borderColor: "{colors.border}"

  eyebrow-label:
    textColor: "{colors.ink-muted}"
    typography: "{typography.label-mono}"
---

# Noteworthy Design System

## Overview

Noteworthy is a Zurich creative studio that builds digital experiences "with just a touch of whimsy," and its design system reads exactly that way — disciplined editorial restraint with one warm spark of personality. The canvas is a soft, paper-like off-white (`{colors.background}`) rather than clinical pure white, lending the whole site the feel of a well-set print spread. Against it, a near-black ink (`{colors.ink}`) carries the type, and a single warm orange accent (`{colors.primary}`) does all the punctuation: link hovers, badges, the occasional CTA. Nothing is loud, but nothing is sterile either.

The typographic identity is a serif-plus-grotesque pairing. Display and section headings use a refined, slightly fashionable serif (Fraunces here as the closest Google match) with tight negative tracking, giving headlines an editorial, art-directed weight. Body and UI text drop into a clean neutral sans (Inter), keeping reading comfortable and interface text legible. A monospace voice (JetBrains Mono) handles eyebrows, technical labels, and the studio's self-built-tools personality, nodding to the engineering half of "design + technology + data + art."

Layout is gallery-like: wide margins, generous vertical rhythm between sections, and large project imagery presented with calm framing. Cards and project tiles lean on soft warm surfaces and large radii rather than heavy borders or drop shadows. The result is a system that feels considered and quiet, where whitespace does the structural work and the warm accent is rationed deliberately so it always reads as intentional.

**Key Characteristics:**
- Warm paper-toned off-white canvas (`{colors.background}`) instead of pure white
- Serif display type (Fraunces) with tight negative tracking for editorial headlines
- Clean neutral sans (Inter) for body and UI text
- Monospace (JetBrains Mono) for eyebrows, labels, and technical/tooling voice
- A single rationed warm-orange accent (`{colors.primary}`) for hovers, badges, and CTAs
- Soft warm surfaces and large radii over shadows and hard borders
- Pill-shaped buttons; black default CTA that flips to orange on hover
- Generous whitespace and a print-spread vertical rhythm

## Colors

### Canvas & Ink
- **Paper** (`{colors.background}`): The warm off-white page canvas — the system's signature softness.
- **Surface** (`{colors.surface}`): Pure white for cards lifted off the paper canvas.
- **Soft Surface** (`{colors.surface-soft}`): Warm tinted surface for project tiles and blocks.
- **Ink** (`{colors.ink}`): Near-black primary text and headings; warm, not harsh.
- **Ink Secondary** (`{colors.ink-secondary}`): Supporting body copy and descriptions.
- **Ink Muted** (`{colors.ink-muted}`): Eyebrows, captions, metadata.

### Accent
- **Signal Orange** (`{colors.primary}`): The warm accent — link hovers, badges, accent CTAs.
- **Accent Soft** (`{colors.accent-soft}`): Tinted background for badges and highlights.
- **Accent Ink** (`{colors.accent-ink}`): Readable accent text on soft accent surfaces.

### Interactive
- **Link** (`{colors.link}`): Ink-colored links that shift to orange on hover (`{colors.link-hover}`).
- **Focus Ring** (`{colors.focus-ring}`): Orange keyboard-focus outline.

### Neutral Scale
- **Gray 900–100** (`{colors.gray-900}` → `{colors.gray-100}`): Warm-leaning neutral steps for text, dividers, and tints.

### Borders
- **Border** (`{colors.border}`): Soft warm hairline for cards and dividers.
- **Border Strong** (`{colors.border-strong}`): Ink outline for secondary buttons.

## Typography

### Font Family
- **Display / Headings**: `Fraunces`, with fallbacks `Georgia, serif` — refined editorial serif with tight tracking.
- **Body / UI**: `Inter`, with fallbacks `Helvetica, Arial, sans-serif`.
- **Mono / Labels**: `JetBrains Mono`, with fallbacks `ui-monospace, SFMono-Regular, Menlo, monospace`.

### Hierarchy

| Token | Use |
|---|---|
| `display-hero` | 64px serif hero — editorial billboard headline |
| `section-heading` | 40px serif section titles |
| `sub-heading` | 28px serif sub-sections |
| `card-title` | 22px sans card/project titles |
| `body-large` | 20px lead paragraphs |
| `body` | 17px standard reading text |
| `body-small` | 15px supporting UI text |
| `button-ui` | 15px button and nav labels |
| `label-mono` | 13px monospace eyebrows and technical labels |
| `caption` | 13px metadata captions |

### Principles
- **Serif announces, sans reads**: Fraunces carries headlines with negative tracking; Inter handles everything functional.
- **Mono for tooling voice**: Monospace eyebrows and labels signal the studio's engineering side.
- **Tracking tightens with size**: Headlines run negative letter-spacing; body stays neutral.
- **Restrained weights**: 400/500 for sans, 500 for the serif — nothing heavier than 600 on UI titles.

## Layout

### Spacing System
The full scale lives in the `spacing:` token block above. Base rhythm is 8px, escalating to large editorial gaps (`{spacing.4xl}`–`{spacing.5xl}`) between major sections.

### Grid & Container
- Max content width: approximately 1200px with wide outer margins.
- Hero: single column, large serif headline with generous top padding.
- Project sections: 1–2 column tiles with large imagery and calm framing.

### Whitespace Philosophy
- **Print-spread rhythm**: Massive vertical padding between sections; whitespace is the primary structural device.
- **Calm framing**: Project imagery sits in soft-surfaced tiles with large radii, never crowded.
- **Rationed accent**: The warm orange appears sparingly so it always reads as deliberate.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed media |
| `xs` | 4px | Inline chips |
| `sm` | 8px | Inputs, small controls |
| `md` | 12px | Buttons, small cards |
| `lg` | 20px | Cards |
| `xl` | 28px | Project tiles |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card-project}`).

### Buttons
- **`button-primary`** — Ink background, paper-colored text, pill radius; flips to orange on hover.
- **`button-secondary`** — White surface with an ink outline (`{colors.border-strong}`).
- **`button-accent`** — Solid orange for emphasis CTAs.

### Badges
- **`badge`** — Soft accent background, accent-ink text, monospace label, pill radius.

### Cards
- **`card`** — White surface, soft warm hairline border, 20px radius.
- **`card-project`** — Warm soft surface, larger 28px radius for project tiles.

### Inputs
- **`input`** — White surface, warm gray border; focus shifts the border to orange (`{colors.focus-ring}`).

### Navigation
- **`nav-bar`** — Paper background, ink links at 15px weight 500, soft hairline divider below.

### Distinctive Components
- **Eyebrow label**: Monospace uppercase-feeling labels above section headings, in muted ink.
- **Project tile**: Large imagery on a warm soft surface with generous radius and calm internal padding.

## Do's and Don'ts

### Do
- Use the warm paper canvas (`{colors.background}`), not pure white, for the page.
- Pair Fraunces serif headlines with Inter body and JetBrains Mono labels.
- Apply tight negative tracking on serif headlines.
- Ration the orange accent — hovers, badges, and select CTAs only.
- Prefer soft surfaces and large radii over shadows and hard borders.
- Use pill-shaped buttons.

### Don't
- Don't flood the layout with the orange accent — it loses its signal.
- Don't set body text in the serif — Inter carries reading and UI.
- Don't use heavy drop shadows; depth comes from warm surfaces and spacing.
- Don't tighten body tracking — only headlines run negative.
- Don't replace the warm paper canvas with clinical white.

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero serif scales down, tightened margins |
| Tablet | 600–1024px | 2-column project tiles begin |
| Desktop | 1024–1400px | Full layout, wide outer margins |
| Large Desktop | >1400px | Centered, generous editorial margins |

### Collapsing Strategy
- Hero: 64px serif → scales down while keeping negative tracking.
- Navigation: horizontal links → compact menu.
- Project tiles: 2-column → single column.
- Section spacing: large editorial gaps compress on mobile.

---

## Agent Prompt Guide

### Quick Color Reference
- Page background: Paper `{colors.background}`
- Heading text: Ink `{colors.ink}`
- Body text: Ink Secondary `{colors.ink-secondary}`
- Accent: Signal Orange `{colors.primary}`
- Primary CTA: Ink `{colors.ink}`, flips to orange on hover
- Focus ring: Orange `{colors.focus-ring}`

### Example Component Prompts
- "Create a hero on the warm paper background (`{colors.background}`). Headline in Fraunces 64px weight 500, line-height 1.04, letter-spacing -1.6px, color `{colors.ink}`. Lead paragraph in Inter 20px weight 400, color `{colors.ink-secondary}`. A monospace eyebrow label above in `{colors.ink-muted}`."
- "Design a project tile: warm soft surface (`{colors.surface-soft}`), 28px radius, large image on top, Inter 22px weight 600 title, 13px monospace category label in muted ink."
- "Build a pill badge: `{colors.accent-soft}` background, `{colors.accent-ink}` text, JetBrains Mono 13px, pill radius, 4px 12px padding."

### Iteration Guide
1. Start on warm paper, not white — it defines the brand softness.
2. Serif announces (Fraunces), sans reads (Inter), mono labels (JetBrains Mono).
3. Negative tracking on headlines only.
4. Orange is a signal color — ration it.
5. Depth from warm surfaces and whitespace, not shadows.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Noteworthy. Brand names and trademarks belong to their respective owners.