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

# cord · Design System

> Direct access, softened by calm clarity

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

cord pairs a calm, spacious recruitment-product homepage with a dense, card-based preview of real companies and job-search tools. Deep navy typography, restrained blue accents, pale cool gradients, and rounded surfaces keep a large amount of information approachable.

## North star

Use deep navy for clear hierarchy, then let white space, cool blue accents, and rounded card grids make hiring information feel approachable.

## Overview

The visual identity is anchored by deep navy #0b3658 on a white canvas, with medium blue reserved for active navigation, links, and calls to action. Cool pale gradients introduce depth around the hero and selected feature areas without turning the page into a strongly coloured interface; the coral alert strip is a functional interruption rather than a core brand colour. Figtree gives the page a friendly geometric voice: oversized, heavy hero text contrasts with compact, readable body copy and small bold labels. The layout alternates open, centered headline sections with broad rounded panels and dense grids of company, feature, ranking, and testimonial cards. Photography of teams and workplaces makes the recruitment product feel tangible, while interface screenshots explain its tools. Borders and soft navy-tinted shadows define cards more than solid fills do. Consistent rounded controls and generous gaps soften the long, information-rich page.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Hiring Navy | `#0b3658` | `--color-hiring-navy` | brand | Primary headings, body text, icons, links, and outlined controls; the main anchor against white. |
| Canvas White | `#ffffff` | `--color-canvas-white` | neutral | Dominant page canvas and the clean face of cards and content panels. |
| Action Blue | `#4e9ad9` | `--color-action-blue` | accent | Active navigation, prominent buttons, and selected links or interface highlights. |
| Hairline Mist | `#dde7ee` | `--color-hairline-mist` | neutral | Thin card and control outlines that separate surfaces without strong contrast. |
| Frosted Wash | `#f3f7f9` | `--color-frosted-wash` | surface | Very pale section and button wash, also present in soft background gradients. |
| Muted Slate | `#486984` | `--color-muted-slate` | neutral | Secondary supporting copy, especially in footer content and smaller explanatory text. |
| Periwinkle Blue | `#648de0` | `--color-periwinkle-blue` | accent | Limited blue-gradient endpoint and occasional navigation, link, or button detail. |
| Quiet Steel | `#688dac` | `--color-quiet-steel` | neutral | Muted secondary text and headings where a softer blue-gray hierarchy is needed. |
| Deep Tide | `#0c3d64` | `--color-deep-tide` | accent | Dark gradient endpoint used in secondary visual treatments, not a dominant page colour. |
| Midnight Ink | `#192443` | `--color-midnight-ink` | accent | Navy-gradient endpoint visible in dark callout styling; use sparingly. |
| Alert Coral | `#f56c6c` | `--color-alert-coral` | semantic | Bright alert strip in the job-card preview; functional status colour rather than a core brand tone. |
| Cloud Blue | `#e6f1fa` | `--color-cloud-blue` | surface | Pale blue tint in small interface and footer surfaces, not a dominant section background. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Canvas White) · `--color-text` → `#0b3658` (Hiring Navy) · `--color-text-muted` → `#486984` (Muted Slate) · `--color-text-subtle` → `#688dac` (Quiet Steel) · `--color-border` → `#dde7ee` (Hairline Mist) · `--color-accent` → `#0b3658` (Hiring Navy) · `--color-accent-2` → `#4e9ad9` (Action Blue) · `--color-accent-3` → `#688dac` (Quiet Steel)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#0b3658` | `#ffffff` | 12.48:1 | AAA |
| `#486984` | `#ffffff` | 5.79:1 | AA |
| `#688dac` | `#ffffff` | 3.5:1 | AA-large |
| `#0b3658` | `#ffffff` | 12.48:1 | AAA |

### Gradients

- `linear-gradient(148deg, rgba(255, 255, 255, 0.84) 16.77%, rgba(241, 245, 248, 0.84) 87.4%)`
- `linear-gradient(90deg, rgb(241, 245, 248) 0%, rgb(219, 229, 238) 131.12%)`
- `linear-gradient(78deg, rgb(12, 61, 100) 7.69%, rgb(25, 36, 67) 124.07%)`
- `linear-gradient(88deg, rgb(78, 154, 217) 12.34%, rgb(100, 141, 224) 98.58%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Figtree | `--font-body` | webfont | 400, 700, 600, 800 | All page typography, from oversized hero headings and navigation to card copy, controls, and footer text. | Plus Jakarta Sans |

- **Figtree:** Friendly sans-serif; use weight 800 for display, 700 for strong headings, and regular weights for body. Keep case natural and tracking close to neutral.

### Type scale — Augmented Fourth (ratio ≈ 1.443, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 100px | 800 | 1 | 0 | — | Figtree | Oversized, extra-bold hero headline treatment. |
| h1 | 48px | 700 | 1.1 | -0.001em | — | Figtree | Main hero heading and top-level page title. |
| h2 | 24px | 400 | 1.3 | -0.002em | — | Figtree | Section headings introducing company discovery and product features. |
| h3 | 22px | 700 | 1.2 | -0.002em | — | Figtree | Card titles, testimonial names, and smaller feature headings. |
| h4 | 20px | 400 | 1.3 | -0.002em | — | Figtree | Supporting subheads and secondary feature titles. |
| body | 16px | 400 | 1.3 | -0.003em | — | Figtree | Descriptions, company details, and testimonial text. |
| caption | 14px | 700 | 1.3 | -0.004em | — | Figtree | Compact labels, rankings, and metadata. |
| button | 16px | 400 | 1.3 | -0.003em | — | Figtree | Primary and secondary action labels. |
| nav | 18px | 600 | 1.3 | -0.003em | — | Figtree | Header links and category navigation labels. |
| link | 16px | 400 | 1.3 | -0.003em | — | Figtree | Inline links and navigational card text. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 4, 5, 7, 8, 10, 12, 15, 16, 20, 24, 28, 32 px.
- Section rhythm 50px · element gap 8px · card padding 29px · max content width 1270px.

A centered hero sits beneath a slim top navigation, followed by a full-width rounded content panel and successive centered sections. The measured page maximum width is 1270px, with comfortable density and repeated multi-column grids for cards, rankings, features, and testimonials. Section gaps are generous; card interiors are more compact. Keep major headings centered, while product cards and text-heavy grids align content to the left.

## Shape & elevation

- Radius: button `9999px` · card `24px` · media `21px` · nav `8px` · link `8px` · xs `8px` · sm `11px` · md `17px` · lg `20px` · xl `21px` · 2xl `22px` · pill `9999px`
- Shadow `lg` (card, media): `rgba(11, 54, 88, 0.08) 0px 12px 48px 0px`
- Shadow `lg-2` (card): `rgba(11, 54, 88, 0.08) 0px 4px 32px 0px`
- Shadow `md` (button): `rgba(11, 54, 88, 0.04) 0px 4px 12px 0px`
- Shadow `xl` (section): `rgba(11, 54, 88, 0.08) 0px -20px 80px 0px`
- Shadow `sm` (button): `rgb(255, 255, 255) 0px 0px 8px 16px`
- Shadow `lg-3` (card): `rgba(11, 54, 88, 0.04) 0px 4px 32px 0px`
- Motion: standard transition `0.1s ease-in-out` on interactive elements.

Use thin pale blue-gray borders to define cards and controls, paired with soft, low-contrast navy shadows on larger cards and search surfaces. Maintain mostly white faces and avoid heavy outlines. Layer cards over lightly tinted or gradient section backdrops, with large rounded panel edges providing the main structural separation.

## Imagery

Use real team, workplace, and company photography in rounded rectangular previews, alongside crisp product-interface screenshots that show search, messaging, and application management. Keep image crops practical and documentary rather than decorative. Small logos and avatars add identity within cards; gradients and soft pale backdrops support imagery without competing with it.

## Components

### Top navigation

A compact header with the cord wordmark, navy navigation links, blue active state, and a blue filled Get started action.

### Hero search

Centered, bold two-line headline and muted supporting line above a pill-shaped search control with a subtle shadow and keyboard shortcut hint.

### Category chips

Horizontally arranged outlined pill controls for job and company categories; selected Tech uses a stronger navy border and weight.

### Company cards

Rounded, lightly bordered cards combining company photography, a logo, compact industry details, and small activity metadata.

### Ranking panels

Side-by-side company ranking cards with compact rows, numbered positions, small logos, and pale blue growth or popularity badges.

### Feature previews

Rounded product screenshots sit beside concise feature copy, presenting messaging, applications, and insights in a clean grid.

### Testimonial cards

A multi-column set of white review cards with small avatars, bold names, compact copy, and supporting trust metrics.

### Closing CTA

A wide, heavily rounded dark navy-to-ink panel with centered white heading, supporting copy, blue button, and small social proof.

### Measured component styles

- **Primary button** (“Start-ups”): transparent background · text #0b3658 · border 1px solid #dde7ee · radius 24px · padding 12px 16px · 400 16px Figtree
- **Link** (“1 Wise Formerly TransferWise. Still buil”): transparent background · text #0b3658 · radius 8px · padding 8px · 400 16px Figtree
- **Card** (“Oliver Software Engineering Consultant I”): transparent background · text #0b3658 · border 1px solid #dde7ee · radius 20px · padding 32px 28px 28px 28px · 400 16px Figtree · shadow rgba(11, 54, 88, 0.08) 0px 12px 48px 0px
- **Navigation item** (“For finding work For hiring Sign in Get ”): transparent background · text #0b3658 · radius 0px · padding 0px · 400 16px Figtree

## Do

- Use #0b3658 for primary text and heading hierarchy.
- Reserve #4e9ad9 for active states and high-priority actions.
- Keep the main canvas white and use cool pale gradients sparingly.
- Build information-heavy areas from rounded, lightly bordered cards.
- Pair company imagery with compact logos and metadata.
- Keep hero copy centered and card content easy to scan.

## Don't

- Do not use bright coral as a general brand accent.
- Do not replace the white canvas with a saturated background.
- Do not use heavy borders or dark card fills throughout.
- Do not make every section dense; preserve open space around headings.
- Do not use decorative imagery where product screenshots explain the feature.
- Do not use inconsistent corner treatments across related cards and controls.

## Agent prompt

Build a recruitment SaaS page in cord’s clear, approachable style. Use Canvas White (#ffffff) as the main field and Hiring Navy (#0b3658) for headings, copy, and icons. Apply Action Blue (#4e9ad9) selectively to active navigation and primary actions; use Hairline Mist (#dde7ee) for quiet outlines and Frosted Wash (#f3f7f9) for subtle section tinting. Set all text in Figtree or a close sans-serif substitute, with strong oversized headings and compact, readable supporting details. Arrange centered introductory content above broad rounded panels and scannable card grids. Use documentary company photography and practical product screenshots, framed by soft shadows rather than heavy borders. Keep controls pill-shaped, card radii generous, section spacing open, and dense data confined to small structured cards.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | A centered hero flows into a broad rounded job-discovery panel with category chips, company cards, rankings, feature previews, testimonials, CTA, and footer. | role toggle, position search, category filters, company discovery | centered headline, rounded cards, soft gradients, multi-column grids, dark closing CTA |

## Source CSS custom properties (selected)

```css
--color-transparent-light-primary-5: rgba(78, 154, 217, .05);
--color-transparent-light-primary-10: rgba(78, 154, 217, .1);
--color-transparent-light-primary-20: rgba(78, 154, 217, .2);
--color-transparent-light-primary-40: rgba(78, 154, 217, .4);
--color-transparent-light-primary-60: rgba(78, 154, 217, .6);
--color-transparent-dark-primary-10: rgba(11, 54, 88, .1);
--color-transparent-dark-primary-20: rgba(11, 54, 88, .2);
--color-transparent-dark-primary-40: rgba(11, 54, 88, .4);
--color-transparent-dark-primary-60: rgba(11, 54, 88, .6);
--color-transparent-secondary-5: rgba(123, 126, 230, .05);
--color-transparent-secondary-10: rgba(123, 126, 230, .1);
--color-transparent-secondary-20: rgba(123, 126, 230, .2);
--color-transparent-secondary-40: rgba(123, 126, 230, .4);
--color-transparent-secondary-60: rgba(123, 126, 230, .6);
--color-transparent-light-grey-10: rgba(241, 245, 248, .1);
--color-transparent-light-grey-20: rgba(241, 245, 248, .2);
--color-transparent-light-grey-40: rgba(241, 245, 248, .4);
--color-transparent-light-grey-60: rgba(241, 245, 248, .6);
--color-transparent-negative-10: rgba(245, 108, 108, .1);
--color-transparent-negative-20: rgba(245, 108, 108, .2);
--color-transparent-negative-40: rgba(245, 108, 108, .4);
--color-transparent-negative-60: rgba(245, 108, 108, .6);
--color-transparent-warning-10: rgba(226, 163, 101, .1);
--color-transparent-warning-20: rgba(226, 163, 101, .2);
--color-transparent-warning-40: rgba(226, 163, 101, .4);
--color-transparent-warning-60: rgba(226, 163, 101, .6);
--color-grey-10: #f1f5f8;
--color-grey-20: #dde7ee;
--color-grey-30: #c8d8e4;
--color-grey-40: #b4cada;
--color-grey-50: #688dac;
--color-grey-60: #486984;
--color-grey-70: #334a5c;
--color-grey-80: #202f3c;
--color-grey-base: #97b5ce;
--color-primary-10: #e6f1fa;
--color-primary-20: #cbe2f5;
--color-primary-30: #95c2e8;
--color-primary-40: #71aee1;
--color-primary-50: #3284c8;
```

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