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

# Clyde · Design System

> Editorial serif meets luminous product protection

**Theme:** dark · **Industry:** saas · **Source:** https://joinclyde.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._

Clyde’s homepage pairs an expansive black canvas with oversized Recoleta headlines and vivid, softly glowing product imagery. Compact supporting copy and layered interface cards keep the visual story focused on ownership protection and customer outcomes.

## North star

Keep the canvas quiet and dark, then let oversized serif headlines and luminous product imagery carry the visual emphasis.

## Overview

The visual system is anchored by a near-black canvas (#000000) and warm off-white typography (#f6f6f4), creating strong contrast without relying on bright section bands. Recoleta supplies oversized, editorial serif headlines; Oldschool Grotesk handles compact navigation, body copy, and actions. The first viewport centers a two-line hero headline, then balances a narrow copy column against a luminous 3D product orb. Across the page, dark cards and interface mockups sit directly on the canvas, while muted glow and a yellow-orange-pink gradient add color primarily to imagery rather than ordinary text or controls. The layout uses a wide page frame, generous section pauses, and asymmetrical compositions; small labels and dense supporting text contrast with spacious headline areas. Softly rounded cards, restrained hairlines, and subtle inset highlights lend depth without turning the page into a conventional boxed dashboard.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Porcelain | `#f6f6f4` | `--color-warm-porcelain` | brand | Primary text on the dark canvas, including hero headings, navigation, and button labels. |
| Deep Canvas | `#000000` | `--color-deep-canvas` | neutral | Dominant page background and the ground behind navigation, hero content, and later sections. |
| Soft Graphite | `#1a1a1a` | `--color-soft-graphite` | surface | Dark card and control surface, with subtle hairline borders against the black canvas. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Inverse light surface used in mockups and selected content areas, not the dominant page canvas. |
| Lemon Glow | `#feed7a` | `--color-lemon-glow` | accent | Warm gradient highlight within luminous product imagery; not a general interface fill. |
| Signal Orange | `#ff8400` | `--color-signal-orange` | accent | Central warm gradient color in the hero and product-art glow, rather than standard text or controls. |
| Orchid Light | `#df91f7` | `--color-orchid-light` | accent | Pink-purple gradient highlight around hero product imagery and ambient visual effects. |

### Semantic aliases

`--color-canvas` → `#000000` (Deep Canvas) · `--color-surface` → `#ffffff` (Gallery White) · `--color-surface-2` → `#1a1a1a` (Soft Graphite) · `--color-surface-3` → `#f6f6f4` (Warm Porcelain) · `--color-text` → `#f6f6f4` (Warm Porcelain) · `--color-text-muted` → `#000000` (Deep Canvas) · `--color-border` → `#1a1a1a` (Soft Graphite) · `--color-accent` → `#ff8400` (Signal Orange) · `--color-accent-2` → `#df91f7` (Orchid Light)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f6f6f4` | `#000000` | 19.41:1 | AAA |
| `#f6f6f4` | `#ffffff` | 1.08:1 | fail |
| `#f6f6f4` | `#1a1a1a` | 16.08:1 | AAA |
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#1a1a1a` | 1.21:1 | fail |
| `#000000` | `#f6f6f4` | 19.41:1 | AAA |
| `#ff8400` | `#000000` | 8.55:1 | AAA |
| `#ff8400` | `#ffffff` | 2.46:1 | fail |
| `#ff8400` | `#1a1a1a` | 7.09:1 | AAA |
| `#ff8400` | `#f6f6f4` | 2.27:1 | fail |

### Gradients

- `linear-gradient(0deg, rgb(254, 237, 122) 0%, rgb(255, 132, 0) 48.96%, rgb(223, 145, 247) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Oldschool Grotesk | `--font-body` | webfont | 300, 400 | Navigation, body copy, links, and buttons. | DM Sans |
| Recoleta | `--font-display` | webfont | 400 | Display headings and prominent editorial statements. | Fraunces |
| Oldschool Grotesk Compact | `--font-oldschool-grotesk-compact` | webfont | 400 | Small uppercase captions and eyebrow labels. | Barlow Condensed |

- **Oldschool Grotesk:** Use light body weight and regular controls; keep case natural and letter spacing neutral.
- **Recoleta:** Regular-weight serif with tight negative tracking; use large, unforced mixed-case lines.
- **Oldschool Grotesk Compact:** Compact regular sans; uppercase with visibly open tracking for short labels.

### Type scale — Perfect Fifth (ratio ≈ 1.528, base 15px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 125px | 400 | 1.1 | -0.03em | — | Recoleta | Oversized editorial statements and prominent hero-scale display text. |
| h1 | 80px | 400 | 1 | -0.03em | — | Recoleta | Main hero headline, set as a large two-line serif statement. |
| h2 | 61px | 400 | 1.1 | -0.03em | — | Recoleta | Major section headlines introducing customer outcomes and features. |
| h3 | 47px | 400 | 1.1 | -0.02em | — | Recoleta | Secondary feature and testimonial headlines. |
| h4 | 36px | 400 | 1 | -0.01em | — | Recoleta | Smaller card headings and supporting section titles. |
| body | 15px | 300 | 1.6 | 0 | — | Oldschool Grotesk | Light-weight explanatory copy and paragraph text. |
| caption | 12px | 400 | 1.8 | 0.03em | uppercase | Oldschool Grotesk Compact | Compact uppercase labels, annotations, and small metadata. |
| button | 15px | 400 | 1.6 | 0 | — | Oldschool Grotesk | Demo and case-study action labels. |
| nav | 36px | 400 | 1 | -0.01em | — | Recoleta | Prominent serif navigation treatment where used in expanded menus. |
| link | 15px | 400 | 1.6 | 0 | — | Oldschool Grotesk | Inline links and compact navigation actions. |
| eyebrow | 12px | 400 | 1.8 | 0.03em | uppercase | Oldschool Grotesk Compact | Short uppercase section labels above headings. |

OpenType features in use: `"clig", "liga"`, `"tnum"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 3, 5, 10, 20, 25, 30, 50 px.
- Section rhythm 92px · element gap 25px · card padding 10px · max content width 1340px.

Use a wide, centered frame with a measured maximum width of 1340px and comfortable density. The hero places a large centered headline above an asymmetrical lower composition, with narrow supporting copy at the left and a dominant visual nearby. Later sections alternate spacious text-led moments with image-heavy, layered card arrangements. Keep alignment varied but deliberate, leave generous pauses between sections, and use compact copy blocks to preserve the contrast between open canvas and dense product detail.

## Shape & elevation

- Radius: button `12px` · card `16px` · media `50%` · xs `12px` · sm `16px`
- Shadow `inset` (text, button, card): `rgba(0, 0, 0, 0.1) 0px 8.86702px 9.45815px 0px, rgba(255, 255, 255, 0.25) 0px 0.636826px 3.82096px 0px inset`
- Motion: standard transition `1s cubic-bezier(0.19, 1, 0.22, 1)` on interactive elements.

Keep most sections visually flat against the black canvas. Separate dark cards with subtle graphite surfaces, measured rounded corners, and restrained hairlines; reserve soft shadow and inset highlight for controls and card depth. Use imagery glow and overlapping mockups for the strongest layering, not heavy drop shadows.

## Imagery

Favor luminous 3D product scenes and interface mockups over conventional lifestyle photography. The hero orb frames product objects against black, with soft orchid and warm gradient light; product cards show pale dashboard surfaces, charts, and registration flows. Crop imagery boldly, allow glow to spill into the surrounding dark space, and keep mockup text subordinate to the page’s editorial headings.

## Components

### Top navigation

Sparse dark header with left-aligned product and resource links, centered Clyde and Cover Genius identity, and right-side login and demo actions.

### Hero headline

Large two-line Recoleta statement centered over the black canvas, with a compact explanatory column and prominent glowing product visual below.

### Demo button

Dark, softly rounded action surface with Warm Porcelain text in Oldschool Grotesk; use for demo requests without introducing a bright fill.

### Product mockup collage

Pale interface screenshots and product panels overlap on the dark canvas, combining registration, claim, and performance visuals.

### Feature statement

Large serif benefit lines set with ample surrounding space, creating a quiet editorial pause between denser showcase areas.

### Case-study cards

Dark rounded cards pair customer identifiers and short proof points with bright product imagery and compact case-study actions.

### Measured component styles

- **Primary button** (“Demo”): background #171717 · text #f6f6f4 · radius 12px · padding 0px · 400 15px Oldschool Grotesk · shadow rgba(0, 0, 0, 0.1) 0px 8.86702px 9.45815px 0px, rgba(255, 255, 255, 0.25) 0px 0.
- **Secondary button** (“View Case Study”): background #202020 · text #f6f6f4 · radius 12px · padding 0px · 400 15px Oldschool Grotesk · shadow rgba(0, 0, 0, 0.1) 0px 8.86702px 9.45815px 0px, rgba(255, 255, 255, 0.25) 0px 0.
- **Link** (“Request a Demo ↗”): transparent background · text #f6f6f4 · radius 0px · padding 0px · 400 15px Oldschool Grotesk
- **Card** (“With Clyde, Lull guarantees great sleep ”): background #171717 · text #f6f6f4 · radius 16px · padding 10px · 400 16px Times New Roman · shadow rgba(0, 0, 0, 0.1) 0px 8.86702px 9.45815px 0px, rgba(255, 255, 255, 0.25) 0px 0.
- **Navigation item** (“Clyde is now a part of Cover Genius. Rea”): transparent background · text #f6f6f4 · radius 0px · padding 0px · 400 16px Times New Roman

## Do

- Use #000000 as the dominant page canvas.
- Set major statements in a tight-tracked editorial serif.
- Keep navigation and supporting copy compact and restrained.
- Use gradient accents chiefly in product imagery and ambient glow.
- Layer pale interface mockups against dark surrounding space.
- Preserve generous pauses between dense showcase sections.

## Don't

- Do not replace the dark canvas with bright section bands.
- Do not use accent colors as routine paragraph or control colors.
- Do not crowd the hero with multiple competing headlines.
- Do not make every content block a bordered dashboard card.
- Do not rely on heavy shadows for depth.
- Do not stretch small supporting copy into wide text blocks.

## Agent prompt

Build a new Clyde-style SaaS page on a dominant #000000 Deep Canvas, using #f6f6f4 Warm Porcelain for high-contrast text and #1a1a1a Soft Graphite for understated controls and cards. Set major headlines in an editorial serif close to Recoleta, large and tightly tracked; use a clean, lightweight grotesk for navigation, body copy, and actions. Create spacious, asymmetrical compositions with a wide centered frame, compact copy blocks, and clear pauses between sections. Let product mockups or 3D objects provide the visual focus, with #feed7a Lemon Glow, #ff8400 Signal Orange, and #df91f7 Orchid Light reserved mainly for luminous gradient imagery. Use rounded dark cards and subtle inset depth sparingly. Keep the overall page calm, dark, and editorial rather than dashboard-dense.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Black full-page canvas with centered oversized headline, compact left-side copy, and a glowing product visual in an asymmetrical hero composition. | Primary demo request, Top-level product navigation, Customer login access | Oversized serif headline, Minimal dark header, Soft gradient product glow, Compact rounded CTA |

## Source CSS custom properties (selected)

```css
--font-recoleta: "Recoleta",serif;
--font-oldschool: "Oldschool Grotesk",sans-serif;
--font-oldschool-compact: "Oldschool Grotesk Compact",sans-serif;
--ease-in-quad: cubic-bezier(0.55,0.085,0.68,0.53);
--ease-in-cubic: cubic-bezier(0.55,0.055,0.675,0.19);
--ease-in-quart: cubic-bezier(0.895,0.03,0.685,0.22);
--ease-in-quint: cubic-bezier(0.755,0.05,0.855,0.06);
--ease-in-expo: cubic-bezier(0.95,0.05,0.795,0.035);
--ease-in-circ: cubic-bezier(0.6,0.04,0.98,0.335);
--ease-out-quad: cubic-bezier(0.25,0.46,0.45,0.94);
--ease-out-cubic: cubic-bezier(0.215,0.61,0.355,1);
--ease-out-quart: cubic-bezier(0.165,0.84,0.44,1);
--ease-out-quint: cubic-bezier(0.23,1,0.32,1);
--ease-out-expo: cubic-bezier(0.19,1,0.22,1);
--ease-out-circ: cubic-bezier(0.075,0.82,0.165,1);
--ease-in-out-quad: cubic-bezier(0.455,0.03,0.515,0.955);
--ease-in-out-cubic: cubic-bezier(0.645,0.045,0.355,1);
--ease-in-out-quart: cubic-bezier(0.77,0,0.175,1);
--ease-in-out-quint: cubic-bezier(0.86,0,0.07,1);
--ease-in-out-expo: cubic-bezier(1,0,0,1);
--ease-in-out-circ: cubic-bezier(0.785,0.135,0.15,0.86);
--layout-columns-gap: 1.7361111111vw;
--theme-primary: #000;
--theme-primary-transparent: transparent;
--theme-secondary: #f6f6f4;
--theme-secondary-transparent: hsla(60,10%,96%,0);
--theme-box-shadow: 0px 11.0794px 11.818px rgba(0,0,0,.1),inset 0px 0.79572px 4.77432px hsla(0,0%,100%,.25);
--theme-secondary-filter: invert(99%) sepia(24%) saturate(340%) hue-rotate(43deg) brightness(107%) contrast(93%);
```

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