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

# Ada · Design System

> Quiet dark surfaces, human-centered AI, confident green signals

**Theme:** dark · **Industry:** ai · **Source:** https://www.ada.cx/ · **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._

Ada’s homepage pairs a near-black canvas and oversized, restrained typography with soft green calls to action and immersive customer-service imagery. Its long-form enterprise story moves from a media-led hero through proof points, case studies, product capabilities, trust, and a calm closing CTA.

## North star

Keep the page grounded in near-black simplicity, and use spacious editorial structure and restrained sage actions to make enterprise proof feel human.

## Overview

The page is anchored by a near-black canvas (#050506), with only slight shifts to charcoal surfaces for cards and content panels. Soft sage green (#8fbe8e) marks the main conversion actions; warm terracotta (#c96a42) appears sparingly as a secondary signal, including small announcement and industry accents. Roobert’s geometric sans-serif shapes give the oversized, regular-weight headlines a calm editorial quality, while muted gray copy keeps dense supporting information legible without competing. Layout uses a centered, wide content frame, left-aligned headings, and broad breathing room between long sections. The hero overlays product UI on a cinematic customer-service photograph, while later sections combine case-study cards, metrics, interface imagery, and trust features. Fine dark borders, rounded panels, and pill-shaped controls establish hierarchy in place of strong shadows. Color variation inside hero photography and mockups is supporting media, not the brand palette.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#050506` | `--color-midnight-canvas` | brand | Dominant page background across hero, content sections, and footer. |
| Sage Signal | `#8fbe8e` | `--color-sage-signal` | accent | Primary expert-contact buttons, selected industry pill, and occasional highlighted text. |
| Soft Ash | `#a0a0a0` | `--color-soft-ash` | neutral | Muted navigation, body copy, captions, and secondary footer text. |
| Charcoal Panel | `#0d0e11` | `--color-charcoal-panel` | surface | Case-study, metric, and content cards against the black canvas. |
| Slate Edge | `#15171b` | `--color-slate-edge` | surface | Raised dark surfaces and subtle card or section borders. |
| Porcelain Text | `#f0f0f0` | `--color-porcelain-text` | neutral | Primary headlines, important copy, and high-contrast labels. |
| Button Ink | `#0a0b0c` | `--color-button-ink` | semantic | Dark text on sage primary buttons and occasional dark UI details. |
| Terracotta Signal | `#c96a42` | `--color-terracotta-signal` | accent | Sparse announcement and industry accents; secondary to the sage CTA. |
| Graphite Line | `#242424` | `--color-graphite-line` | surface | Fine outlines on secondary buttons, inputs, and dark UI panels. |
| Media White | `#f9f9f9` | `--color-media-white` | neutral | Bright details in embedded product imagery and occasional media text, not a dominant brand field. |
| Shadow Black | `#070809` | `--color-shadow-black` | surface | Subtle gradient and deep media shading near the canvas tone. |
| UI Charcoal | `#1e1f22` | `--color-ui-charcoal` | surface | Occasional product-media or mockup details, not a major page surface. |
| Deep Gradient | `#111216` | `--color-deep-gradient` | surface | Dark gradient shading within select media or section treatments. |
| Muted Steel | `#626364` | `--color-muted-steel` | neutral | Rare low-emphasis text detail; supporting rather than defining the page palette. |

### Semantic aliases

`--color-canvas` → `#050506` (Midnight Canvas) · `--color-surface` → `#0d0e11` (Charcoal Panel) · `--color-surface-2` → `#15171b` (Slate Edge) · `--color-text` → `#f0f0f0` (Porcelain Text) · `--color-text-muted` → `#a0a0a0` (Soft Ash) · `--color-text-subtle` → `#0a0b0c` (Button Ink) · `--color-border` → `#15171b` (Slate Edge) · `--color-accent` → `#8fbe8e` (Sage Signal) · `--color-accent-2` → `#c96a42` (Terracotta Signal) · `--color-on-accent` → `#0a0b0c` (Button Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f0f0f0` | `#050506` | 17.88:1 | AAA |
| `#f0f0f0` | `#0d0e11` | 16.94:1 | AAA |
| `#f0f0f0` | `#15171b` | 15.75:1 | AAA |
| `#a0a0a0` | `#050506` | 7.79:1 | AAA |
| `#a0a0a0` | `#0d0e11` | 7.38:1 | AAA |
| `#a0a0a0` | `#15171b` | 6.86:1 | AA |
| `#0a0b0c` | `#050506` | 1.03:1 | fail |
| `#0a0b0c` | `#0d0e11` | 1.02:1 | fail |
| `#0a0b0c` | `#15171b` | 1.1:1 | fail |
| `#8fbe8e` | `#050506` | 9.63:1 | AAA |

### Gradients

- `linear-gradient(oklab(0.11563 0.000887383 -0.00309757 / 0.45) 0%, oklab(0.11563 0.000887383 -0.00309757 / 0.93) 100%)`
- `linear-gradient(oklab(0.11563 0.000887383 -0.00309757 / 0.62) 0%, oklab(0.11563 0.000887383 -0.00309757 / 0.86) 100%)`
- `linear-gradient(oklab(0.11563 0.000887383 -0.00309757 / 0.25) 0%, oklab(0.11563 0.000887383 -0.00309757 / 0.78) 100%)`
- `linear-gradient(oklab(0.11563 0.000887383 -0.00309757 / 0.25) 0%, oklab(0.11563 0.000887383 -0.00309757 / 0.7) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Roobert-84752c255402143e | `--font-body` | webfont | 400 | Site-wide display, headings, body copy, navigation, labels, and controls. | Manrope |

- **Roobert-84752c255402143e:** Regular weight throughout; large headlines use tight negative tracking, while eyebrow labels are uppercase with slight positive tracking.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 72px | 400 | 1 | -0.03em | — | Roobert-84752c255402143e | Oversized hero or campaign headline when used. |
| h1 | 60px | 400 | 1 | -0.03em | — | Roobert-84752c255402143e | Primary hero headline and major page title. |
| h2 | 36px | 400 | 1.11 | -0.02em | — | Roobert-84752c255402143e | Section headings introducing proof, capability, and trust. |
| h3 | 20px | 400 | 1.5 | 0 | — | Roobert-84752c255402143e | Subsection titles and feature-card headings. |
| body | 16px | 400 | 1.5 | 0 | — | Roobert-84752c255402143e | Explanatory paragraphs and case-study descriptions. |
| caption | 14px | 400 | 1.5 | 0 | — | Roobert-84752c255402143e | Small supporting details and compact media copy. |
| button | 14px | 400 | 1 | 0 | — | Roobert-84752c255402143e | Primary CTA and compact action labels. |
| nav | 14px | 400 | 1 | 0 | — | Roobert-84752c255402143e | Main navigation links and footer navigation items. |
| link | 14px | 400 | 1.43 | 0 | — | Roobert-84752c255402143e | Case-study links and secondary inline actions. |
| eyebrow | 12px | 400 | 1.38 | 0.04em | uppercase | Roobert-84752c255402143e | Uppercase section labels and small category markers. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 12, 16, 20, 24, 32, 40, 56, 64 px.
- Section rhythm 56px · element gap 12px · card padding — · max content width 1184px.

Use a centered content frame capped at the measured 1184px, with left-aligned section headings and responsive multi-column arrangements for proof cards, industries, and trust features. The hero is a wide, media-led split composition; subsequent sections retain the same dark canvas, alternating spacious editorial blocks with denser card grids. The measured spacing system uses an 8px base, 12px element gaps, and a 56px section gap, with generous vertical breathing room in the full-page flow. Keep card interiors comfortable and avoid crowding data or interface imagery.

## Shape & elevation

- Radius: button `9999px` · input `9999px` · card `16px` · media `50%` · badge `9999px` · nav `9999px` · link `16px` · xs `8px` · sm `16px` · md `22px` · pill `9999px`
- Shadow `xl` (card, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `md` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.1) 0px 2px `
- Shadow `inset` (card): `oklab(0.9821 0 0 / 0.05) 0px 1px 0px 0px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.25) 0px 25px 50px -12px`
- Shadow `lg` (nav, other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.1) 0px 8p`
- Shadow `hairline` (nav): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Shadow `hairline-2` (other): `rgba(143, 190, 142, 0.165) 0px 0px 0px 5.37492px`
- Motion: standard transition `0.2s cubic-bezier(0.23, 1, 0.32, 1)` on interactive elements.

The design is mostly flat: the near-black canvas does most of the separation work. Cards use charcoal fills, thin graphite borders, and rounded corners rather than prominent shadows. Layered hero UI and occasional media panels create depth; reserve shadows for those overlapping media elements and keep navigation and text sections visually quiet.

## Imagery

Lead with cinematic customer-service photography in a large circular crop, layered with realistic dark product-interface panels. Across the page, use interface mockups, customer logos, and case-study media as evidence rather than decoration. The measured screenshot includes olive and warm hues in the hero and card imagery; treat these as photographic content, not brand colors. Keep media darkened or naturally low-key so white type and sage controls remain clear.

## Components

### Primary CTA

Sage pill button (#8fbe8e) with dark text (#0a0b0c), regular Roobert at 14px, and measured 12px vertical by 24px horizontal padding.

### Secondary pill

Transparent dark button with white text, a thin #242424 outline, and pill-shaped corners.

### Case-study card

Dark #0d0e11 card with a fine dark border, rounded 16px corners, white copy, and a concise outcome-led link.

### Metric panel

A horizontal row of large figures and compact uppercase explanations inside a dark, lightly bordered panel.

### Announcement strip

Slim dark banner beneath navigation, pairing a small terracotta eyebrow with a centered research message and outlined action.

### Industry selector

A vertical industry list with a terracotta or sage filled selected pill and dark media-led content beside it.

### Product UI overlay

Dark interface cards layered over photography, using fine borders, restrained labels, and one bright action control.

### Measured component styles

- **Primary button** (“Speak to an expert”): background #8fbe8e · text #0a0b0c · radius 3.35544e+07px · padding 12px 24px · 400 14px Roobert-84752c255402143e
- **Secondary button** (“Financial services”): background #c96a42 · text #0a0b0c · radius 3.35544e+07px · padding 12px 20px · 400 14px Roobert-84752c255402143e
- **Link** (“Case study 80% CSAT after automating sup”): background #0d0e11 · text #ffffff · border 1px solid #171718 · radius 16px · padding 24px · 400 16px Roobert-84752c255402143e
- **Input**: transparent background · text #ffffff · border 1px solid #242424 · radius 8px · padding 12px 16px · 400 14px Roobert-84752c255402143e
- **Card** (“AI CX for financial services AI CX for g”): background #0d0e11 · text #ffffff · border 1px solid #171718 · radius 16px · padding 0px · 400 16px Roobert-84752c255402143e
- **Badge** (“Case study”): background #0b0b0d · text #ffffff · border 1px solid #2b2b2e · radius 3.35544e+07px · padding 4px 12px · 400 12px Roobert-84752c255402143e
- **Navigation item** (“Overview”): transparent background · text #ffffff · radius 0px · padding 0px · 400 14px Roobert-84752c255402143e

## Do

- Keep the page canvas near-black and consistent.
- Use sage green for the primary conversion action.
- Set large headings in regular-weight, tightly tracked sans-serif.
- Separate cards with subtle borders and charcoal fills.
- Let customer and product imagery carry its own color.
- Use generous vertical rhythm between major content blocks.

## Don't

- Do not introduce bright section backgrounds.
- Do not use terracotta as the primary CTA color.
- Do not add heavy shadows to ordinary cards.
- Do not crowd the page with dense copy or tight grids.
- Do not treat colors sampled from photos as brand tokens.
- Do not use bold, all-caps display headlines.

## Agent prompt

Build a new enterprise AI SaaS page in Ada’s visual style. Use Midnight Canvas (#050506) for the page foundation, Charcoal Panel (#0d0e11) for cards, and Slate Edge (#15171b) for subtle separation. Set headings and copy in Roobert or a close Manrope substitute, with large regular-weight headlines, tight tracking, and muted supporting text in Soft Ash (#a0a0a0). Make Sage Signal (#8fbe8e) the primary CTA, with Button Ink (#0a0b0c) text; reserve Terracotta Signal (#c96a42) for rare secondary accents. Build an editorial flow with a media-led hero, measurable proof, case-study panels, product UI imagery, trust content, and a closing CTA. Keep cards rounded and lightly bordered, use wide breathing room, and let photography provide secondary color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide dark hero with left-aligned headline and form; cinematic circular media and layered UI on the right. | Email capture, Expert consultation CTA, Announcement link | Transparent pill navigation, Sage CTA, Floating product update card |
| 2 | logo-cloud | A single horizontal strip of customer logos centered beneath the hero. | Social proof | Monochrome logo row |
| 3 | stats | Left-aligned section heading above a four-column metric panel. | Scan key outcomes | Large numeric figures, Compact uppercase labels |
| 4 | testimonials | Featured live-conversation metric followed by a three-column grid of case-study cards. | Case-study navigation, Outcome comparison | Dark bordered cards, Compact metric labels |
| 5 | category-nav | Heading above a horizontal industry selector, central media panel, and adjacent outcome card. | Industry selection, Case-study link | Selected pill, Product media, Metric card |
| 6 | feature-split | Stacked customer-story panels transition into a two-column platform feature with interface media. | Read customer stories, Explore platform features | Story cards, Accordion-like feature list, Product UI image |
| 7 | feature-grid | Section title above four compact trust and compliance columns. | Review compliance coverage | Small line icons, Thin card dividers, Learn-more action |
| 8 | cta | Wide, dark, lightly bordered panel with a large heading and a single compact CTA. | Expert consultation | Sage pill button, Generous empty space |
| 9 | footer | Six compact link columns arranged across the footer width. | Browse site sections | Small uppercase column labels, Muted link lists |
| 10 | newsletter | A compact summary-request area and a single-column business-email form. | Request AI summary, Email newsletter signup | Email input, Sage submit button |
| 11 | footer | Large brand mark on the left, company statement and legal links on the right. | Social links, Legal and accessibility links | Oversized white logo, Muted metadata |

## Source CSS custom properties (selected)

```css
--ada-accent: #c96a42;
--web-section-gap: 72px;
--web-section-gap-desktop: 120px;
--color-ink-1: #fffffff0;
--color-ink-2: #ffffff9e;
--color-ink-3: #ffffff85;
--color-line: #ffffff1f;
--color-hair: #ffffff12;
--color-surface-1: #0d0e11;
--color-surface-2: #15171b;
--color-tint: oklch(98.21% 0 129.63);
```

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