---
version: alpha
name: Roasted
description: Playful, bold design-feedback energy — warm roast palette (espresso ink, ember orange accent) on a toasted cream canvas, chunky rounded geometry, a heavy grotesk display face paired with friendly sans body, generous radii and confident solid fills.
colors:
  # Canvas + ink
  background: "#fdf6ec"
  surface: "#ffffff"
  surface-soft: "#f6ebda"
  ink: "#2a1c14"
  ink-secondary: "#6b5847"
  ink-muted: "#9a897a"

  # Brand accents — the "roast"
  primary: "#e8541e"        # Ember Orange — CTAs, highlights
  primary-hover: "#cf4413"
  ember-deep: "#b23410"
  bean: "#3f2a1d"           # Espresso bean dark
  caramel: "#d98a2b"        # Warm caramel secondary accent
  cream-tag: "#fbe6cf"      # tinted badge background

  # Functional
  success: "#3f8f5b"
  border: "#e6d4bf"
  border-strong: "#d8bf9f"

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

typography:
  display-hero:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 64px
    fontWeight: 800
    lineHeight: 1.02
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.10
    letterSpacing: -0.8px
  card-title:
    fontFamily: "Fraunces, Georgia, serif"
    fontSize: 24px
    fontWeight: 600
    lineHeight: 1.25
    letterSpacing: -0.3px
  body-large:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 20px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 17px
    fontWeight: 400
    lineHeight: 1.60
    letterSpacing: 0px
  body-medium:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 500
    lineHeight: 1.50
    letterSpacing: 0px
  button-ui:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 16px
    fontWeight: 600
    lineHeight: 1.20
    letterSpacing: 0px
  caption:
    fontFamily: "Inter, system-ui, sans-serif"
    fontSize: 13px
    fontWeight: 600
    lineHeight: 1.30
    letterSpacing: 0.2px
  mono-label:
    fontFamily: "JetBrains Mono, ui-monospace, Menlo, monospace"
    fontSize: 13px
    fontWeight: 500
    lineHeight: 1.40
    letterSpacing: 0px

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

rounded:
  none: 0px
  sm: 8px
  md: 14px
  lg: 20px
  xl: 28px
  pill: 9999px

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

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

  button-dark:
    backgroundColor: "{colors.bean}"
    textColor: "{colors.on-ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 14px 28px

  badge:
    backgroundColor: "{colors.cream-tag}"
    textColor: "{colors.ember-deep}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 12px

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

  card-feature:
    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}"
    rounded: "{rounded.md}"
    padding: 12px 16px
    borderColor: "{colors.border-strong}"

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

# Roasted Design System

## Overview

Roasted leans into its name: a warm, opinionated, slightly cheeky personality built for design feedback that doesn't pull punches. The canvas is a toasted cream (`{colors.background}`) rather than clinical white, immediately signaling warmth and approachability. Espresso-dark text (`{colors.ink}`) reads softly on that cream, and the whole palette is pulled from a coffee roast — bean browns, caramel, and a bright ember orange (`{colors.primary}`) that does the heavy lifting for calls to action.

The type pairing carries the playful-but-confident voice. Headlines use a heavy, characterful serif display (Fraunces) at large sizes with tight tracking, giving the brand an editorial, almost magazine-cover punch. Body and UI copy switch to a clean humanist sans (Inter), keeping long-form readable and interface labels neutral. A monospace face appears for small technical labels and tags, a nod to the design-tooling audience.

Geometry is chunky and friendly. Radii run generous — pill-shaped buttons and 20–28px rounded cards — so nothing feels sharp or corporate. Fills are solid and saturated rather than gradient-washed; the ember orange against cream is the signature contrast move, used sparingly so it always reads as "the thing to click."

**Key Characteristics:**
- Toasted cream canvas (`{colors.background}`) instead of pure white — warmth over sterility
- Ember Orange (`{colors.primary}`) as the single loud accent, reserved for primary actions
- Coffee-roast palette: espresso ink, bean dark, caramel secondary
- Heavy serif display (Fraunces) for editorial punch + Inter for readable body/UI
- Generous radii — pill buttons, 20–28px cards — friendly chunky geometry
- Solid saturated fills, no gradients in chrome
- Mono labels for a subtle design-tooling signal

## Colors

### Primary
- **Espresso Ink** (`{colors.ink}`): Primary text and headings on the cream canvas.
- **Toasted Cream** (`{colors.background}`): The page canvas — warm, not white.
- **Pure White** (`{colors.surface}`): Card surfaces that lift off the cream.

### Brand Accents
- **Ember Orange** (`{colors.primary}`): Primary CTAs, key highlights. The "roast."
- **Ember Deep** (`{colors.ember-deep}`): Accent text on tinted badges, emphasis.
- **Espresso Bean** (`{colors.bean}`): Dark buttons and high-contrast blocks.
- **Caramel** (`{colors.caramel}`): Warm secondary accent for illustration and tags.

### Text
- **Ink Secondary** (`{colors.ink-secondary}`): Body and supporting copy.
- **Ink Muted** (`{colors.ink-muted}`): Captions, placeholders, metadata.

### Functional
- **Success** (`{colors.success}`): Positive states.
- **Border** (`{colors.border}`): Card and divider lines on cream.
- **Border Strong** (`{colors.border-strong}`): Input and secondary-button outlines.

## Typography

### Font Family
- **Display**: `Fraunces`, with fallbacks `Georgia, serif` — heavy, characterful editorial serif.
- **Body / UI**: `Inter`, with fallbacks `system-ui, sans-serif`.
- **Mono**: `JetBrains Mono`, with fallbacks `ui-monospace, Menlo, monospace`.

### Hierarchy

The complete type scale lives in the `typography:` token block above.

| Token | Use |
|---|---|
| `display-hero` | 64px serif hero — editorial cover impact |
| `section-heading` | 40px serif section titles |
| `card-title` | 24px serif card headings |
| `body-large` | Intros, lead paragraphs |
| `body` | Standard reading text |
| `body-medium` | Emphasized UI text, nav |
| `button-ui` | Buttons, primary links |
| `caption` | Tags, metadata, badges |
| `mono-label` | Small technical labels |

### Principles
- **Serif announces, sans explains**: Fraunces for headlines and short statements; Inter for everything you actually read at length.
- **Tight display tracking**: Negative letter-spacing at hero sizes for a dense, confident headline.
- **Weight contrast**: 700–800 serif headlines against 400 sans body create clear hierarchy without color.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Base rhythm is 8px; large jumps (`{spacing.3xl}`–`{spacing.4xl}`) create breathing room between sections.

### Grid & Container
- Max content width: ~1120px, centered
- Hero: single-column, left- or center-aligned with large serif headline
- Feature sections: 2–3 column card grids
- Cards lift off the cream canvas via white/soft-cream surfaces plus subtle `{colors.border}` lines

### Whitespace Philosophy
- **Warm generosity**: Comfortable padding inside chunky rounded cards; the cream canvas keeps density low.
- **Accent restraint**: Ember Orange appears only on the primary action per view, so the eye always knows where to go.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved |
| `sm` | 8px | Inputs-within-cards, small chips |
| `md` | 14px | Inputs, compact containers |
| `lg` | 20px | Standard cards |
| `xl` | 28px | Feature cards, large panels |
| `pill` | 9999px | Buttons, badges, tags |

## Components

The full component spec lives in the `components:` token block above.

### Buttons
- **`button-primary`** — Ember Orange fill, white text, pill. The default CTA.
- **`button-secondary`** — White surface, espresso text, strong border, pill.
- **`button-dark`** — Espresso bean fill, cream text, pill. High-contrast alternative.

### Badges
- **`badge`** — Cream-tint background, ember-deep text, pill. Tags and labels.

### Cards
- **`card`** — White surface on cream, 20px radius, soft border.
- **`card-feature`** — Soft-cream surface, 28px radius, roomy padding for featured content.

### Inputs
- **`input`** — White surface, strong border, 14px radius.

### Navigation
- **`nav-bar`** — Cream background nav, espresso links, ember pill CTA right-aligned, soft bottom border.

## Do's and Don'ts

### Do
- Keep the canvas warm cream (`{colors.background}`), never pure white at page level
- Reserve Ember Orange (`{colors.primary}`) for the single primary action per view
- Pair heavy Fraunces headlines with Inter body
- Use generous radii — pills and 20–28px cards
- Use solid fills; let warmth come from the palette, not gradients

### Don't
- Don't scatter ember orange across multiple competing CTAs
- Don't set serif body text — Fraunces is for display only
- Don't use sharp 0px corners on interactive elements
- Don't introduce cool grays or blues that fight the warm roast palette
- Don't drop below `{colors.ink-secondary}` contrast for body copy on cream

---

## Responsive Behavior

### Breakpoints
| Name | Width | Key Changes |
|------|-------|-------------|
| Mobile | <600px | Single column, hero scales down, stacked cards |
| Tablet | 600–1024px | 2-column grids, expanded padding |
| Desktop | >1024px | Full 3-column layout, ~1120px container |

### Collapsing Strategy
- Hero: 64px serif → scales down while keeping tight tracking
- Navigation: inline links + ember CTA → hamburger
- Card grids: 3-column → 2 → single column
- Section spacing: 96px → ~48px on mobile

### Touch Targets
- Pill buttons use 14px vertical padding for comfortable tap targets
- Nav links and badges spaced for thumb reach

---

## 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 Roasted. Brand names and trademarks belong to their respective owners.