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

# Coda · Design System

> Global commerce, presented with editorial restraint

**Theme:** light · **Industry:** fintech · **Source:** https://www.coda.co/ · **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._

Coda pairs a restrained monochrome foundation with pale olive surfaces and vivid product imagery to present its global payments and commerce platform. Bold centered typography, generous whitespace, and a dark closing CTA and footer give the long homepage a clear visual cadence.

## North star

Keep the interface quiet and editorial, letting bold type and product imagery—not decorative brand colour—carry the visual impact.

## Overview

The page is built on an almost-white canvas (#fcfcfc), with black typography and dark charcoal bands used to anchor key moments. Soft olive-tinted panels (#edeee1 and #c0c2a9) distinguish benefit cards and the editorial content carousel without making the interface feel colourful overall. The opening hero is centered and typographic: a very bold, large headline sits above muted copy, paired CTA buttons, and a low-key row of customer marks. ABC Monument Grotesk carries nearly all interface and display text; uppercase heavy headings create contrast with regular-weight body copy. The page alternates expansive whitespace with compact, aligned grids and large media-led product cards. Product imagery supplies the strongest colour, including saturated orange, blue, green, and pink panels; those hues belong to product illustrations, not the core brand palette. Rounded buttons and cards soften the otherwise crisp, flat layout. A charcoal closing CTA and footer give the page a deliberate endpoint.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#fcfcfc` | `--color-gallery-white` | surface | Primary page canvas and the background for most content sections. |
| Olive Ink | `#5a5a4f` | `--color-olive-ink` | neutral | Muted copy and fine borders; use for secondary text and restrained dividers. |
| Charcoal | `#202020` | `--color-charcoal` | surface | Inverse surfaces, the closing CTA and footer, dark cards, and compact badges. |
| Near Black | `#131311` | `--color-near-black` | neutral | Measured only in a gradient-related trace; not a defining visible interface colour. |
| Pale Olive | `#edeee1` | `--color-pale-olive` | surface | Benefit cards and light CTA buttons, with occasional muted text on dark or coloured surfaces. |
| Sage Stone | `#c0c2a9` | `--color-sage-stone` | surface | Secondary pale card surface and occasional subtle border treatment. |
| True Black | `#000000` | `--color-true-black` | semantic | Primary headlines, body copy, links, and dark primary CTA backgrounds. |
| Warm Ivory | `#f8f9eb` | `--color-warm-ivory` | neutral | Light button and text foreground on dark surfaces. |

### Semantic aliases

`--color-canvas` → `#fcfcfc` (Gallery White) · `--color-surface` → `#202020` (Charcoal) · `--color-surface-2` → `#edeee1` (Pale Olive) · `--color-surface-3` → `#c0c2a9` (Sage Stone) · `--color-text` → `#000000` (True Black) · `--color-text-muted` → `#5a5a4f` (Olive Ink) · `--color-text-subtle` → `#edeee1` (Pale Olive) · `--color-border` → `#5a5a4f` (Olive Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#fcfcfc` | 20.47:1 | AAA |
| `#000000` | `#202020` | 1.29:1 | fail |
| `#000000` | `#edeee1` | 17.92:1 | AAA |
| `#000000` | `#c0c2a9` | 11.53:1 | AAA |
| `#5a5a4f` | `#fcfcfc` | 6.8:1 | AA |
| `#5a5a4f` | `#202020` | 2.34:1 | fail |
| `#5a5a4f` | `#edeee1` | 5.95:1 | AA |
| `#5a5a4f` | `#c0c2a9` | 3.83:1 | AA-large |
| `#edeee1` | `#fcfcfc` | 1.14:1 | fail |
| `#edeee1` | `#202020` | 13.9:1 | AAA |

### Gradients

- `linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| abcMonumentGrotesk | `--font-body` | webfont | 400, 500, 800, 900 | Primary display and interface typeface for headings, body text, navigation, links, and buttons. | Space Grotesk |
| jetBrainsMono | `--font-mono` | webfont | 400 | Compact uppercase code-like labels and outlined category badges. | JetBrains Mono |

- **abcMonumentGrotesk:** Use heavy weights for display headings; headings often run tight and uppercase, while body copy remains regular and open.
- **jetBrainsMono:** Use sparingly for small uppercase labels, with a technical, monospaced contrast to the main sans-serif.

### Type scale — Perfect Fourth (ratio ≈ 1.318, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 71.5px | 800 | 1 | -0.01em | — | abcMonumentGrotesk | Oversized bold hero and campaign display headlines. |
| h1 | 62.5px | 900 | 0.9 | -0.01em | uppercase | abcMonumentGrotesk | Primary page headline, often uppercase in measured styles. |
| h2 | 45px | 800 | 1 | -0.01em | uppercase | abcMonumentGrotesk | Major section headings and prominent feature titles. |
| h3 | 31.5px | 500 | 1.2 | -0.01em | — | abcMonumentGrotesk | Subsection titles and card group headings. |
| h4 | 27px | 500 | 1.2 | -0.01em | — | abcMonumentGrotesk | Smaller card or content titles. |
| body | 18px | 400 | 1.5 | 0 | — | abcMonumentGrotesk | Hero supporting copy and general explanatory text. |
| caption | 15.5px | 400 | 1 | 0 | — | abcMonumentGrotesk | Small captions, partner labels, and supporting metadata. |
| button | 15.5px | 500 | 1.43 | 0.01em | — | abcMonumentGrotesk | CTA labels and action controls. |
| link | 15.5px | 500 | 1.43 | 0.01em | — | abcMonumentGrotesk | Text links and secondary navigation actions. |
| code | 14px | 400 | 0.9 | 0 | uppercase | jetBrainsMono | Uppercase technical labels and category badges. |

## Spacing & layout

- Base unit **1px**, density **compact**.
- Scale (most used values): 4, 9, 13, 18, 27, 36, 63, 72 px.
- Section rhythm 36px · element gap 9px · card padding 27px · max content width 1129px.

The content sits within a measured maximum width of 1129px, with centered hero messaging and mostly centered section titles. The homepage balances sparse opening space and full-bleed media with compact multi-column cards: three-column feature areas, four-column award listings, and a denser footer. Section gaps and card padding follow the measured spacing scale, while repeated bands create a steady scroll rhythm. Alignment shifts to left for editorial and resource content. Overall density is compact inside cards but generous between major page moments.

## Shape & elevation

- Radius: button `13px` · card `13px` · badge `9999px` · link `9999px` · xs `9px` · sm `13px` · md `22px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadow system. Separate sections through background contrast, pale card fills, and thin dark borders rather than floating layers. Cards and buttons use rounded corners, while pill-shaped badges and links provide the few more pronounced silhouettes. Maintain clear contrast between light sections and the charcoal closing band.

## Imagery

Media is concentrated in product showcases and editorial cards rather than used as general decoration. The product cards contain vivid interface mockups and campaign-style artwork, including payment screens, storefronts, and a distribution map; these colours are illustrative rather than core brand colours. Customer, award, and press marks appear as compact logo rows. A featured case-study image is framed as a broad horizontal carousel card.

## Components

### Primary CTA

Rounded dark button with light text; use as the high-contrast action in the hero and closing CTA.

### Secondary CTA

Pale olive filled button with black text, paired beside the dark action in the hero and CTA band.

### Benefit cards

Pale olive card grid with black copy, restrained padding, and rounded corners; cards communicate platform advantages.

### Product showcase cards

Large rounded media panels with product interface mockups and vivid illustration-led colour; keep copy legible over the artwork.

### Outlined badge

Compact uppercase JetBrains Mono label with a dark outline and pill-shaped border.

### Editorial carousel

Pale olive content band framing a prominent horizontal case-study image, caption, and compact navigation controls.

### Logo rows

Small monochrome customer, award, and press marks spaced across a light background.

### Footer

Charcoal band with a bright wordmark, thin dividers, grouped text links, and subdued legal details.

### Measured component styles

- **Primary button** (“Contact sales”): background #edeee1 · text #000000 · radius 13.44px · padding 14px 17.9px · 500 17.92px abcMonumentGrotesk
- **Secondary button** (“Get started”): background #202020 · text #f8f9eb · radius 13.44px · padding 9px 17.9px · 400 17.92px abcMonumentGrotesk
- **Link** (“Codapay Unlock global payment coverage”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px ui-sans-serif
- **Card** (“Proven over time A decade spent maximizi”): background #edeee1 · text #000000 · radius 13.44px · padding 26.9px · 400 16px ui-sans-serif
- **Badge** (“CASE STUDIES”): transparent background · text #202020 · border 1px solid #202020 · radius 9999px · padding 0px 9px · 400 14px jetBrainsMono · uppercase

## Do

- Use Gallery White as the default canvas.
- Make the hero headline bold, large, and centrally aligned.
- Reserve Pale Olive for cards and secondary actions.
- Use Charcoal for the closing CTA and footer.
- Keep product mockups vivid and confined to media panels.
- Use rounded controls and cards without adding shadows.

## Don't

- Do not turn illustration colours into global brand accents.
- Do not fill every section with a tinted background.
- Do not crowd the hero with extra controls or copy.
- Do not use decorative gradients as a core visual motif.
- Do not add heavy shadows or floating-card effects.
- Do not use monospaced type for general body copy.

## Agent prompt

Build a new Coda-style page with a quiet editorial foundation. Use Gallery White (#fcfcfc) as the canvas, True Black (#000000) for primary text, and Olive Ink (#5a5a4f) for muted copy and hairlines. Set headings and interface text in ABC Monument Grotesk or Space Grotesk, with heavy display headlines and regular body copy; reserve JetBrains Mono for occasional uppercase labels. Organize content in a centered, measured-width layout with generous gaps between major sections and compact, rounded cards within grids. Use Pale Olive (#edeee1) and Sage Stone (#c0c2a9) sparingly for card surfaces. Keep CTAs simple: dark charcoal or black with light text, paired with a pale secondary button. Let product imagery carry saturated colour. Finish with a charcoal CTA and footer; avoid shadows and decorative gradients.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and supporting copy above paired CTAs and a horizontal customer logo row. | Primary and secondary CTA, Customer trust signals | Oversized bold heading, Muted supporting copy, Logo strip |
| 2 | other | Centered section title above four award columns with marks, issuer details, and links. | Award credibility, Learn-more links | Four-column grid, Compact logo tiles, Small captions |
| 3 | content-feed | Left-aligned heading within a pale band above a large featured story card and carousel controls. | Featured story, Carousel navigation, Read-more action | Pale olive band, Wide media card, Rounded controls |
| 4 | logo-cloud | Centered heading over a horizontally arranged row of press logos. | Press credibility | Monochrome logo row, Centered title |
| 5 | cta | Single-column centered statement and two CTA buttons on a charcoal band. | Contact sales, Get started | Inverse surface, Large uppercase headline, Paired buttons |
| 6 | footer | Dark full-width footer with wordmark, grouped link columns, divider rules, and a compact legal row. | Grouped navigation, Legal links, Social link | Charcoal background, Thin separators, Multi-column links |

## Source CSS custom properties (selected)

```css
--spacing-0: 0px;
--spacing-1: calc(4px + (100vw - 1200px) / 400 * .8);
--spacing-2: calc(8px + (100vw - 1200px) / 400 * 1.6);
--spacing-3: calc(12px + (100vw - 1200px) / 400 * 2.4);
--spacing-4: calc(16px + (100vw - 1200px) / 400 * 3.2);
--spacing-5: calc(24px + (100vw - 1200px) / 400 * 4.8);
--spacing-6: calc(32px + (100vw - 1200px) / 400 * 6.4);
--spacing-7: calc(40px + (100vw - 1200px) / 400 * 8);
--spacing-8: calc(56px + (100vw - 1200px) / 400 * 11.2);
--spacing-9: calc(64px + (100vw - 1200px) / 400 * 12.8);
--spacing-10: calc(80px + (100vw - 1200px) / 400 * 16);
--spacing-11: calc(96px + (100vw - 1200px) / 400 * 19.2);
--spacing-12: calc(120px + (100vw - 1200px) / 400 * 24);
--spacing-3half: calc(14px + (100vw - 1200px) / 400 * 2.8);
--spacing-navBarHeightBase: calc(64px + (100vw - 1200px) / 400 * 12.8);
--spacing-navBarInnerTopBase: calc(84px + (100vw - 1200px) / 400 * 16.8);
--spacing-navToggleGap: calc(3px + (100vw - 1200px) / 400 * .6);
--spacing-navToggleAnimate: calc(5px + (100vw - 1200px) / 400 * 1);
--spacing-paymentTypeH: calc(28px + (100vw - 1200px) / 400 * 5.6);
--border-radius-sm: calc(8px + (100vw - 1200px) / 400 * 1.6);
--border-radius-md: calc(12px + (100vw - 1200px) / 400 * 2.4);
--border-radius-mdu: calc(16px + (100vw - 1200px) / 400 * 3.2);
--border-radius-lgu: calc(20px + (100vw - 1200px) / 400 * 4);
--border-radius-lg: calc(20px + (100vw - 1200px) / 400 * 4);
--border-radius-xlu: calc(24px + (100vw - 1200px) / 400 * 4.8);
--border-radius-xl: calc(50px + (100vw - 1200px) / 400 * 10);
--border-radius-xxl: calc(40px + (100vw - 1200px) / 400 * 8);
--border-radius-menuIcon: calc(8px + (100vw - 1200px) / 400 * 1.6);
--size-headerRightEmptySpace: calc(250px + (100vw - 1200px) / 400 * 50);
--size-blogPostLargeTextW: calc(800px + (100vw - 1200px) / 400 * 160);
--size-blogPostTextW: calc(592px + (100vw - 1200px) / 400 * 118.4);
--size-featuredPostInsightTextW: calc(432px + (100vw - 1200px) / 400 * 86.4);
--color-white: 255 255 255;
--color-slightWhite: 252 252 252;
--color-offWhite: 248 249 235;
--color-charcoal: 32 32 32;
--color-black: 0 0 0;
--color-purple-1: 211 190 255;
--color-purple-2: 164 122 255;
--color-purple-3: 103 31 255;
```

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