---
title: "Ragged Edge design system"
variant: extended
source: https://raggededge.com/
captured_at: 2026-10-12
theme: light
industry: agency
generator: Design DNA (https://four.wiralomi.com/style/raggededge-com)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# Ragged Edge · Design System

> Expansive typography, immersive motion, and a quietly confident canvas.

**Theme:** light · **Industry:** agency · **Source:** https://raggededge.com/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

Ragged Edge’s homepage pairs a near-white editorial canvas with oversized typography and immersive, full-bleed motion. The restrained interface lets vivid project imagery and concise case-study details carry the visual energy.

## North star

Keep the interface quiet and white so oversized type and expressive full-bleed project imagery can command attention.

## Overview

The page establishes its identity through contrast: a clean white canvas and deep charcoal text frame a dramatic, full-bleed video hero. The opening wordmark is oversized, white, and stretched across the moving image; small, pale pill-shaped navigation controls sit near the lower edge. Across the long portfolio, white space dominates, while fine gray rules quietly separate project rows. Typography combines the broad, assertive sans of ABCDiatypeExpanded-Bold with Grit-Regular, whose serif character brings an editorial counterpoint to navigation, case details, and headings. Project media supplies most of the page’s color, so warm, green, and other image tones should be treated as content rather than brand palette. Measured yellow, pink, and cyan accents belong to a gradient treatment, not the persistent canvas. The result is spacious and image-led, but the interface itself remains flat, direct, and carefully restrained.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas, section backgrounds, and reversed white hero wordmark or navigation text. |
| Deep Ink | `#181f1f` | `--color-deep-ink` | brand | Primary headings, body copy, footer content, dark Join button, and key interface text. |
| Quiet Silver | `#d1d2d2` | `--color-quiet-silver` | neutral | Fine separators and understated borders beneath portfolio links and case-study rows. |
| Marquee Gold | `#ffc240` | `--color-marquee-gold` | accent | One stop in the measured vertical gradient accent; not a persistent page background. |
| Blush Signal | `#ffc4f4` | `--color-blush-signal` | accent | Pink gradient accent stop; use only where the gradient treatment is intentionally reproduced. |
| Electric Mist | `#96ebeb` | `--color-electric-mist` | accent | Cyan gradient accent stop; not a core canvas or default component fill. |
| Soft Graphite | `#a3a5a5` | `--color-soft-graphite` | neutral | Muted footer and button text where subdued secondary contrast is needed. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Minor measured button text instance; not a defining brand color or general text choice. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#181f1f` (Deep Ink) · `--color-text-muted` → `#ffffff` (Gallery White) · `--color-text-subtle` → `#a3a5a5` (Soft Graphite) · `--color-border` → `#d1d2d2` (Quiet Silver) · `--color-accent` → `#ffc240` (Marquee Gold) · `--color-accent-2` → `#ffc4f4` (Blush Signal) · `--color-accent-3` → `#96ebeb` (Electric Mist)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#181f1f` | `#ffffff` | 16.74:1 | AAA |
| `#a3a5a5` | `#ffffff` | 2.48:1 | fail |
| `#ffc240` | `#ffffff` | 1.61:1 | fail |

### Gradients

- `linear-gradient(0deg, rgba(255, 194, 64, 0), rgb(255, 194, 64), rgb(255, 196, 244), rgb(150, 235, 235), rgba(150, 235, 235, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ABCDiatypeExpanded-Bold | `--font-body` | webfont | 400 | Display, primary headings, and prominent body copy; broad, bold sans-serif voice. | Space Grotesk |
| Grit-Regular | `--font-display` | webfont | 400, 500 | Editorial headings, navigation, buttons, case-study links, and supporting text. | Cormorant Garamond |

- **ABCDiatypeExpanded-Bold:** Use as the expansive display voice; measured display and h1 tracking are tight, with mixed case rather than forced uppercase.
- **Grit-Regular:** Serif counterpoint to the wide sans; keep navigation and controls in natural case, with restrained weight.

### Type scale — Perfect Fourth (ratio ≈ 1.326, base 20px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 82px | 400 | 1.1 | -0.02em | — | ABCDiatypeExpanded-Bold | Oversized hero or brand statement typography. |
| h1 | 78px | 400 | 1.15 | -0.01em | — | ABCDiatypeExpanded-Bold | Primary section headline, including the agency introduction. |
| h2 | 56px | 400 | 1.2 | 0 | — | Grit-Regular | Editorial section and feature headings. |
| h3 | 40px | 400 | 1.2 | -0.01em | — | ABCDiatypeExpanded-Bold | Project titles and prominent content-feed headlines. |
| h4 | 30px | 500 | 1.5 | 0 | — | Grit-Regular | Supporting editorial headings and secondary statements. |
| body | 20px | 400 | 1.2 | 0 | — | ABCDiatypeExpanded-Bold | Prominent introductory and descriptive copy. |
| caption | 10px | 400 | 1.2 | 0 | — | ABCDiatypeExpanded-Bold | Compact metadata, labels, and small supporting details. |
| button | 16px | 400 | 1 | 0 | — | Grit-Regular | Pill navigation, calls to action, and form actions. |

OpenType features in use: `"kern"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 11, 12, 16, 24, 32, 34, 41, 64, 80, 180, 200 px.
- Section rhythm 32px · element gap 12px · card padding — · max content width 1376px.

Use a broad centered content area, with the measured page maximum width of 1376px. The opening hero is full-bleed and visually distinct; the rest of the page reads as a long, mostly single-column sequence of spacious white sections. Portfolio entries use two-column arrangements for media and case details, while the happenings area shifts to three columns. Align headings and copy to the start, and let thin horizontal rules define case-study rhythm. Overall density is compact within controls but generous between major content blocks.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat: no measured shadows, raised cards, or layered panels define the page. Use white canvas, direct typography, and subtle #d1d2d2 hairlines to structure content. Reserve overlap for the hero wordmark over video and keep pill controls visually light, with dark fill used selectively for the Join action.

## Imagery

Use motion-led hero media as a full-bleed backdrop, with the wordmark layered prominently over it and navigation anchored low in the frame. Portfolio cases rely on large project imagery and video rather than decorative UI illustration; frame each project as editorial evidence, not a generic card. The vivid olive, green, tan, and other screenshot colors come from image content and should not be promoted into the interface palette.

## Components

### Hero wordmark

Set the white brand name large across full-bleed video; preserve strong contrast and let the footage provide changing color.

### Pill navigation

Use Grit-Regular labels in rounded capsule controls along the hero’s lower edge, with light fills and opposing left/right groups.

### Case-study row

Arrange project media and concise case details in a two-column layout; use Deep Ink text and occasional Quiet Silver top rules.

### Content feed

Present work, jobs, and opinion as a three-column editorial group with small category labels and linked headlines.

### Newsletter form

Pair a concise signup heading with a rounded input and signup action; keep supporting privacy copy visually secondary.

### Contact footer

Group business enquiry, address, phone, email, and social links in clear columns, followed by a compact navigation row.

### Measured component styles

- **Primary button** (“Partnerships”): background #eaf7f3 · text #000000 · radius 64px · padding 12px 16px · 400 16px Grit-Regular
- **Secondary button** (“Join”): background #181f1f · text #ffffff · radius 64px · padding 12px 16px · 400 16px Grit-Regular
- **Link** (“Granola Granola committed to human progr”): transparent background · text #181f1f · border 1px solid #d1d2d2 · radius 0px · padding 16px 0px 0px 0px · 400 20px Grit-Regular
- **Input**: transparent background · text #191e1e · border 1px solid #181f1f · radius 54px · padding 0px 34px · 400 30px Grit-Regular
- **Navigation item** (“Home Partnerships Approach Happenings Jo”): transparent background · text #ffffff · radius 0px · padding 0px · 400 20px Grit-Regular

## Do

- Keep the primary canvas white and the interface low-noise.
- Use Deep Ink for core text and primary dark actions.
- Let the hero video fill the frame and carry the color.
- Use the wide sans for high-impact display typography.
- Pair editorial serif details with the broad sans.
- Separate long portfolio content with subtle measured hairlines.

## Don't

- Do not turn project-image colors into permanent UI colors.
- Do not add shadows or raised-card styling.
- Do not make the hero feel like a conventional boxed banner.
- Do not overuse the measured gradient accent colors.
- Do not center all portfolio copy; keep the measured start alignment.
- Do not replace spacious editorial pacing with dense dashboards.

## Agent prompt

Build a new agency page in Ragged Edge’s restrained, editorial style. Use Gallery White (#ffffff) as the dominant canvas and Deep Ink (#181f1f) for primary text and strong actions. Set oversized statements in a broad, assertive sans-serif; use an editorial serif for navigation, buttons, and supporting case details. Create a full-bleed motion-led hero with a prominent reversed wordmark and discreet pill navigation. Keep subsequent sections white and image-forward, with start-aligned text, broad project media, two-column case-study layouts, and subtle Quiet Silver (#d1d2d2) rules. Treat vivid image colors as content, not UI palette. Use Marquee Gold (#ffc240), Blush Signal (#ffc4f4), and Electric Mist (#96ebeb) only as restrained gradient accents. Avoid shadows, card chrome, and unnecessary decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed opening video with wordmark and navigation positioned over the image. | brand-first landing, persistent nav affordance | full-bleed video, oversized white wordmark, pill navigation |
| 2 | video | Single-column, full-bleed video section with start-aligned headline and supporting statement. | agency positioning, scroll-led storytelling | wide sans headline, full-bleed media, white canvas |
| 3 | feature-split | Two-column project feature combining media with case-study copy and outcome. | case-study storytelling, outcome highlight | project imagery, editorial text, thin divider |
| 4 | feature-split | Two-column project feature combining media with case-study copy and outcome. | case-study storytelling, outcome highlight | project imagery, editorial text, thin divider |
| 5 | feature-split | Two-column project feature combining media with case-study copy and outcome. | case-study storytelling, outcome highlight | project imagery, editorial text, thin divider |
| 6 | feature-split | Two-column project feature combining media with case-study copy and outcome. | case-study storytelling, outcome highlight | project imagery, editorial text, thin divider |
| 7 | feature-split | Two-column project feature combining media with case-study copy and outcome. | case-study storytelling, outcome highlight | project imagery, editorial text, thin divider |
| 8 | feature-split | Two-column project feature combining media with case-study copy and outcome. | case-study storytelling, outcome highlight | project imagery, editorial text, thin divider |
| 9 | feature-split | Two-column project feature combining media with case-study copy and outcome. | case-study storytelling, outcome highlight | project imagery, editorial text, thin divider |
| 10 | feature-split | Two-column project feature combining media with case-study copy and outcome. | case-study storytelling, outcome highlight | project imagery, editorial text, thin divider |
| 11 | feature-split | Two-column project feature combining media with case-study copy and outcome. | case-study storytelling, outcome highlight | project imagery, editorial text, thin divider |
| 12 | content-feed | Three-column editorial feed for work, jobs, and opinion, with linked headlines. | browse updates, discover careers | three-column grid, category labels, headline links |
| 13 | newsletter | Two-column signup block pairing a heading with an email field and action. | email signup, privacy reassurance | rounded input, signup button, supporting copy |
| 14 | contact | Three-column contact area with enquiry, address, phone, email, and social details. | start a project, copy contact details | contact columns, pill actions, text links |
| 15 | footer | Two-column closing band with primary navigation and legal or organization links. | site navigation, legal access | compact link groups, Join pill, copyright line |

## Source CSS custom properties (selected)

```css
--fui-font: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;
--fui-font-size: 16px;
--fui-color: #374151;
--fui-primary-color: #516fea;
--fui-primary-color-hover: #2349e5;
--fui-border: 0 solid #d1d5db;
--fui-border-radius: 0.25rem;
--fui-border-color: #d1d5db;
--fui-focus-border-color: #a4cafe;
--fui-focus-shadow: 0 0 0 3px rgba(164,202,254,.45);
--fui-loading-border-width: 2px;
--fui-alert-font-size: 0.875rem;
--fui-alert-font-weight: 500;
--fui-alert-error-bg-color: #fdf2f2;
--fui-alert-error-color: #771d1d;
--fui-alert-success-bg-color: #f3faf7;
--fui-alert-success-color: #03543f;
--fui-btn-font-size: 0.875rem;
--fui-btn-text-align: center;
--fui-btn-white-space: nowrap;
--fui-btn-border-style: none;
--fui-btn-text-decoration: none;
--fui-btn-border: 1px solid transparent;
--fui-btn-font-weight: 500;
--fui-btn-transition-duration: 0.15s;
--fui-link-transition-duration: 0.15s;
--fui-link-text-decoration: underline;
--fui-submit-btn-color: #fff;
--fui-submit-btn-color-hover: #fff;
--fui-submit-btn-spinner-color: #fff;
--fui-title-font-size: 1.4rem;
--fui-title-font-weight: 700;
--fui-page-title-font-size: 1.125rem;
--fui-page-title-font-weight: 600;
--fui-tabs-font-size: 0.875rem;
--fui-tab-border: 1px solid transparent;
--fui-tab-active-font-weight: 500;
--fui-tab-active-bg-color: #fff;
--fui-tab-active-border-bottom-color: transparent;
--fui-progress-font-size: 0.8rem;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/raggededge-com