---
version: alpha
name: Ragged Edge
description: Confident brand-agency boldness — near-black ink (#181f1f) on bright mint (#96ebeb) and pale mint canvases, expanded display type (ABCDiatype Expanded Bold) over a clean grotesque body, a playful candy palette (peach/yellow/pink/orange) and oversized fully-rounded pill buttons.

colors:
  # Canvas + ink
  background: "#ffffff"
  surface: "#ebf7f3"        # pale mint section surface
  surface-soft: "#dcf2eb"   # deeper mint tint
  ink: "#181f1f"            # near-black forest ink
  ink-soft: "#1f3233"       # softer dark teal ink
  ink-muted: "#9ca3af"      # muted gray secondary text

  # Brand accents
  primary: "#96ebeb"        # signature bright mint
  accent-peach: "#fcd8bf"
  accent-yellow: "#ffc240"
  accent-pink: "#ffc4f4"
  accent-pink-soft: "#ffc7f5"
  accent-coral: "#ff8c5e"
  accent-sage: "#94a683"
  accent-gold: "#a99856"

  # Signal / alert
  error: "#db3700"          # orange-red error + emphasis
  error-strong: "#ff4c24"

  # On-color
  on-primary: "#181f1f"     # ink reads on mint
  on-ink: "#ffffff"

typography:
  display-hero:
    fontFamily: "ABCDiatypeExpanded-Bold, Archivo, sans-serif"
    fontSize: 88px
    fontWeight: 700
    lineHeight: 0.95
    letterSpacing: -2px
  display:
    fontFamily: "ABCDiatypeExpanded-Bold, Archivo, sans-serif"
    fontSize: 64px
    fontWeight: 700
    lineHeight: 1.00
    letterSpacing: -1.5px
  section-heading:
    fontFamily: "ABCDiatypeExpanded-Bold, Archivo, sans-serif"
    fontSize: 40px
    fontWeight: 700
    lineHeight: 1.05
    letterSpacing: -1px
  card-title:
    fontFamily: "ABCDiatypeExpanded-Bold, Archivo, sans-serif"
    fontSize: 28px
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: -0.5px
  serif-accent:
    fontFamily: "Grit-Regular, Georgia, serif"
    fontSize: 32px
    fontWeight: 400
    lineHeight: 1.2
    letterSpacing: 0px
  body-large:
    fontFamily: "ABCDiatype-Regular, Inter, sans-serif"
    fontSize: 22px
    fontWeight: 400
    lineHeight: 1.45
    letterSpacing: 0px
  body:
    fontFamily: "ABCDiatype-Regular, Inter, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.55
    letterSpacing: 0px
  body-small:
    fontFamily: "ABCDiatype-Regular, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  button-ui:
    fontFamily: "ABCDiatype-Regular, Inter, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.0
    letterSpacing: 0px
  caption:
    fontFamily: "ABCDiatype-Regular, Inter, sans-serif"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.04em

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

rounded:
  none: 0px
  sm: 10px
  md: 40px
  lg: 54px
  xl: 64px
  2xl: 104px
  pill: 9999px

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

  button-mint:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 18px 36px

  button-outline:
    backgroundColor: "#ffffff"
    textColor: "{colors.ink}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.pill}"
    padding: 18px 36px
    borderColor: "{colors.ink}"

  card:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 40px

  card-mint:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.lg}"
    padding: 48px

  badge:
    backgroundColor: "{colors.accent-yellow}"
    textColor: "{colors.ink}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 6px 14px

  input:
    backgroundColor: "#ffffff"
    textColor: "{colors.ink}"
    typography: "{typography.body-small}"
    rounded: "{rounded.sm}"
    padding: 14px 18px
    borderColor: "{colors.ink}"

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

# Ragged Edge Design System

## Overview

Ragged Edge is a London brand agency, and its own site is a portfolio of nerve — a design system that turns confidence into a visual language. The palette refuses neutrality: a near-black forest ink (`{colors.ink}`) sits against a bright, almost electric mint (`{colors.primary}`) and a soft pale-mint surface (`{colors.surface}`), with a candy bench of peach, yellow, pink and coral accents ready to flood entire sections. Nothing whispers. Color here is the argument, not the trim.

Typography carries the swagger. Headlines run in ABCDiatype Expanded Bold — a widened grotesque that stretches across the viewport at enormous sizes with tight negative tracking and near-1.0 line-height, so titles read as confident slabs rather than delicate lines. The body sets in ABCDiatype Regular, a clean neutral grotesque that lets the display type and color do the shouting. A serif, Grit, appears as an occasional editorial counterpoint for pull-quotes and accent lines, adding a hand-set, slightly raw texture that nods to the agency's name.

The shape language is rounded to the extreme. Buttons are full pills, and large containers carry generous 40–104px corner radii (`{rounded.md}` through `{rounded.2xl}`), giving cards and mint blocks a soft, almost tactile, lozenge quality. This softness offsets the heavy type and saturated color — the system is bold without feeling aggressive.

**Key Characteristics:**
- Near-black forest ink (`{colors.ink}`) as the universal text color, never pure black
- Signature bright mint (`{colors.primary}`) for hero blocks, cards and accents
- Pale mint surfaces (`{colors.surface}`, `{colors.surface-soft}`) instead of plain white sections
- Expanded display type (ABCDiatype Expanded Bold) at billboard scale with tight tracking
- Clean grotesque body (ABCDiatype Regular) plus a Grit serif for editorial accents
- A playful candy accent set: peach, yellow, pink, coral, sage, gold
- Fully-rounded pill buttons and oversized container radii (40–104px)
- Ink-on-mint and ink-on-pale-mint as the core contrast-safe pairings

## Colors

### Primary
- **Forest Ink** (`{colors.ink}`): Primary text, headings, dark CTAs. A deep near-black green-black, never pure `#000`.
- **Bright Mint** (`{colors.primary}`): The signature accent — hero panels, feature cards, highlights. Ink reads on it.
- **White** (`{colors.background}`): Default page canvas between colored sections.

### Surfaces
- **Pale Mint** (`{colors.surface}`): Soft tinted section background.
- **Deep Mint Tint** (`{colors.surface-soft}`): Slightly richer alternate surface.
- **Soft Ink** (`{colors.ink-soft}`): Dark teal variant for layered dark blocks.
- **Muted Gray** (`{colors.ink-muted}`): Secondary / meta text.

### Candy Accents
- **Peach** (`{colors.accent-peach}`): Warm section fills, tags.
- **Yellow** (`{colors.accent-yellow}`): Badges, highlight blocks.
- **Pink** (`{colors.accent-pink}`) / **Soft Pink** (`{colors.accent-pink-soft}`): Playful fills.
- **Coral** (`{colors.accent-coral}`): Energetic accent.
- **Sage** (`{colors.accent-sage}`) / **Gold** (`{colors.accent-gold}`): Muted earthy accents.

### Signal
- **Error Orange** (`{colors.error}`): Form errors and high-emphasis marks.
- **Error Strong** (`{colors.error-strong}`): Brightest alert variant.

## Typography

### Font Family
- **Display**: `ABCDiatypeExpanded-Bold`, fallback `Archivo, sans-serif` — widened bold grotesque for headlines.
- **Body**: `ABCDiatype-Regular`, fallback `Inter, sans-serif` — neutral grotesque for reading text and UI.
- **Serif Accent**: `Grit-Regular`, fallback `Georgia, serif` — editorial pull-quotes and accent lines.

### Hierarchy

The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`).

| Token | Use |
|---|---|
| `display-hero` | 88px expanded hero — billboard scale |
| `display` | 64px page-section openers |
| `section-heading` | 40px feature titles |
| `card-title` | 28px card headings |
| `serif-accent` | Grit serif pull-quotes |
| `body-large` | Intros, lead paragraphs |
| `body` | Standard reading text |
| `body-small` | Dense UI text |
| `button-ui` | Buttons, nav links |
| `caption` | Tags, meta, eyebrows |

### Principles
- **Expanded and tight**: Display type is wide (Expanded weight) yet tracked negatively (-1px to -2px) with near-1.0 line-height — slabs, not lines.
- **One bold voice**: Only the display face shouts; the body stays neutral so color and scale carry the energy.
- **Serif as spice**: Grit appears sparingly, never for body — its raw texture is an accent, not a workhorse.

## Layout

### Spacing System
The complete scale lives in the `spacing:` token block above. Sections breathe with large vertical rhythm (`{spacing.3xl}`–`{spacing.4xl}`).

### Grid & Container
- Full-bleed colored sections alternate (white → mint → pale mint → candy accent)
- Generous max content width with wide gutters
- Cards and mint blocks float as large rounded lozenges within sections

### Whitespace Philosophy
- **Color as section break**: Separation comes from switching whole-section background colors, not dividers.
- **Big air around big type**: Oversized headlines are counterbalanced by generous surrounding space.

## Shapes

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Reserved / full-bleed media |
| `sm` | 10px | Inputs, small chips |
| `md` | 40px | Standard cards |
| `lg` | 54px | Feature blocks |
| `xl` | 64px | Large containers |
| `2xl` | 104px | Hero / oversized panels |
| `pill` | 9999px | Buttons, tags |

## Components

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

### Buttons
- **`button-primary`** — Forest ink fill, white text, full pill, generous padding.
- **`button-mint`** — Bright mint fill, ink text — the brand-forward CTA.
- **`button-outline`** — White fill, ink border and text, full pill.

### Cards
- **`card`** — Pale mint surface, ink text, 40px radius.
- **`card-mint`** — Bright mint block, ink text, 54px radius — the signature feature card.

### Badges & Inputs
- **`badge`** — Yellow pill, ink text, uppercase-ish caption.
- **`input`** — White field, 1px ink border, 10px radius.

### Navigation
- **`nav-bar`** — White header, ink links in ABCDiatype Regular, pill CTA right.

## Do's and Don'ts

### Do
- Use `{colors.ink}` for all primary text — never pure black
- Pair ink on mint (`{colors.primary}`) and ink on pale mint (`{colors.surface}`) — both contrast-safe
- Switch whole-section background colors to create rhythm
- Set headlines in ABCDiatype Expanded Bold at large scale with tight negative tracking
- Use full pills for buttons and oversized 40–104px radii for containers
- Reserve Grit serif for accents and pull-quotes only

### Don't
- Don't set mint (`{colors.primary}`) as a text color on white — it's a fill, not ink
- Don't use the candy accents for body text — they're section fills and tags
- Don't tighten body type — only the display face is negatively tracked
- Don't use sharp corners on buttons — the pill is the brand
- Don't render headlines in the body font — the Expanded display face is the identity

---

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