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

# Adaline · Design System

> A quiet canvas for self-improving AI

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

Adaline presents its AI agent observability and evaluation platform through a restrained, pale-green canvas, concise editorial copy, and forest-toned calls to action. Nature imagery and dense product-interface previews create contrast between a calm brand surface and technically detailed software.

## North star

Keep the page serene and spacious, using forest-green actions and precise monospace details to frame the product rather than overwhelm it.

## Overview

The page is anchored by a warm near-white canvas (#fbfdf6), with pale sage surfaces (#eff2e8) and delicate gray-green borders keeping the long homepage quiet and open. Deep forest green (#203b14) is reserved for the primary CTA, while other muted greens carry labels, links, and supporting text. Akkurat provides the clean, understated sans-serif voice for headings and body copy; Fragment Mono and GT America Mono lend navigation, eyebrows, captions, and interface details a technical, controlled rhythm. The hero uses a spacious split composition: short headline and copy on the left, a column of faint code-like texture on the right. Feature sections pair concise text with large landscape illustrations and product previews. Broad vertical breathing room separates blocks, with rounded cards and pill-shaped actions providing the main soft geometry. The closing footer shifts to a dark, near-black treatment, creating a strong terminal contrast.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Ivory | `#fbfdf6` | `--color-canvas-ivory` | surface | Dominant page canvas and light button text; preserves the homepage’s warm, nearly white field. |
| Sage Mist | `#eff2e8` | `--color-sage-mist` | surface | Pale surface tone for subtle section and interface contrast against the canvas. |
| Soft Lichen | `#e4e7df` | `--color-soft-lichen` | neutral | Primary hairline and light surface border tone, separating cards and controls with little contrast. |
| Dusty Sage | `#a4aca0` | `--color-dusty-sage` | neutral | Muted copy and footer or badge details; secondary to the darker green text. |
| Moss Text | `#6a795f` | `--color-moss-text` | semantic | Muted green text for supporting copy and secondary information. |
| Forest Action | `#203b14` | `--color-forest-action` | accent | Primary CTA background with light text; also appears in compact interface labels. |
| Olive Ink | `#2e4320` | `--color-olive-ink` | brand | Brand green used for links, selected text, and supporting accent details. |
| Midnight Teal | `#0f2024` | `--color-midnight-teal` | surface | Lower-page footer gradient stop, not a dominant light-page brand color. |
| Deep Teal | `#193238` | `--color-deep-teal` | surface | Footer gradient endpoint that gives the dark closing area a subtle teal cast. |
| Charcoal Moss | `#2a332a` | `--color-charcoal-moss` | surface | Inverse dark section surface used as a broad tonal break in the long page. |
| Olive Headline | `#2b390a` | `--color-olive-headline` | brand | Primary text and accent tone for prominent headings and selected emphasis. |
| Footer Black | `#000000` | `--color-footer-black` | surface | Measured footer background at the page end; creates a near-black terminal block. |
| Pale Eucalyptus | `#d8e3dd` | `--color-pale-eucalyptus` | semantic | Light text and small details within dark footer or product-interface content. |
| Graphite Panel | `#1d2226` | `--color-graphite-panel` | surface | Dark footer or embedded interface panel surface, distinct from the pale page. |
| Deep Slate | `#1f2625` | `--color-deep-slate` | neutral | Dark footer border detail and interface edge treatment. |
| Night Overlay | `#050e11` | `--color-night-overlay` | surface | Deep footer gradient shading and fade, used for atmospheric dark transitions. |

### Semantic aliases

`--color-canvas` → `#fbfdf6` (Canvas Ivory) · `--color-surface` → `#eff2e8` (Sage Mist) · `--color-surface-2` → `#2a332a` (Charcoal Moss) · `--color-surface-3` → `#e4e7df` (Soft Lichen) · `--color-surface-4` → `#000000` (Footer Black) · `--color-text` → `#2b390a` (Olive Headline) · `--color-text-muted` → `#a4aca0` (Dusty Sage) · `--color-text-subtle` → `#6a795f` (Moss Text) · `--color-border` → `#e4e7df` (Soft Lichen) · `--color-accent` → `#2e4320` (Olive Ink) · `--color-accent-2` → `#203b14` (Forest Action) · `--color-accent-3` → `#2b390a` (Olive Headline) · `--color-on-accent` → `#fbfdf6` (Canvas Ivory)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2b390a` | `#fbfdf6` | 12.1:1 | AAA |
| `#2b390a` | `#eff2e8` | 10.95:1 | AAA |
| `#2b390a` | `#2a332a` | 1.05:1 | fail |
| `#2b390a` | `#e4e7df` | 9.92:1 | AAA |
| `#a4aca0` | `#fbfdf6` | 2.28:1 | fail |
| `#a4aca0` | `#eff2e8` | 2.06:1 | fail |
| `#a4aca0` | `#2a332a` | 5.6:1 | AA |
| `#a4aca0` | `#e4e7df` | 1.87:1 | fail |
| `#6a795f` | `#fbfdf6` | 4.54:1 | AA |
| `#6a795f` | `#eff2e8` | 4.11:1 | AA-large |

### Gradients

- `linear-gradient(rgb(15, 32, 36), rgb(25, 50, 56))`
- `linear-gradient(oklab(0 0 0 / 0) 0px, oklab(0 0 0 / 0) 50%, oklab(0.17888 -0.035011 0.0273213 / 0.05) 100%)`
- `linear-gradient(in oklab, rgba(0, 0, 0, 0) 0px, rgb(5, 14, 17) 100%)`
- `radial-gradient(circle, rgba(46, 67, 32, 0.18) 1px, rgba(0, 0, 0, 0) 1px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| akkurat | `--font-body` | webfont | 400, 500, 700, 600 | Headings, body copy, and primary navigation | Inter |
| Fragment Mono | `--font-mono` | system | 400 | Navigation labels, CTA text, badges, and product-interface text | Space Mono |
| GT America Mono | `--font-gt-america-mono` | system | 400 | Captions and code-like interface details | IBM Plex Mono |

- **akkurat:** Clean sans-serif with restrained weight; measured headings and body are regular, with slightly tight tracking.
- **Fragment Mono:** Compact technical voice; commonly used in small uppercase labels and action text.
- **GT America Mono:** Small monospace text with neutral tracking for captions and code-style content.

### Type scale — Custom (ratio ≈ 1.875, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 30px | 400 | 1.16 | -0.02em | — | akkurat | Hero headline and primary page heading. |
| body | 16px | 400 | 1.5 | -0.015em | — | akkurat | Feature descriptions and supporting page copy. |
| caption | 10px | 400 | 1.2 | 0 | — | GT America Mono | Small captions and understated interface annotations. |
| eyebrow | 9px | 500 | 1.22 | 0.1em | uppercase | Akkurat | Uppercase section labels and compact introductory badges. |
| code | 10px | 400 | 1.2 | 0 | — | GT America Mono | Code-like text and product-interface details. |

OpenType features in use: `"calt", "kern"`.

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 2, 3, 4, 6, 8, 10, 12, 16, 20 px.
- Section rhythm 96px · element gap 6px · card padding 20px · max content width 1280px.

The homepage uses a spacious, wide canvas with content organized around a measured maximum width of 1280px. The first viewport is a quiet split hero: copy and pill actions align left, with a faint code-like visual opposite. Subsequent feature blocks alternate concise explanatory text with large full-bleed product or landscape visuals. The measured section rhythm is generous, with a 96px section gap and 20px card padding. Most content remains low-density; the footer and product previews form localized dense zones.

## Shape & elevation

- Radius: button `50%` · card `10px` · badge `3px` · link `50%` · xs `2px` · sm `3px` · md `4px` · lg `6px` · xl `8px` · 2xl `10px` · pill `9999px`
- Shadow `hairline` (other): `rgb(153, 30, 75) 0px 0px 0px 1px`
- Shadow `hairline-2` (other): `rgb(36, 90, 120) 0px 0px 0px 1px`
- Shadow `hairline-3` (other): `rgb(74, 109, 71) 0px 0px 0px 1px`
- Shadow `inset` (button): `color(srgb 0.290196 0.427451 0.278431 / 0.12) 0px 0px 0px 1px inset`
- Shadow `hairline-4` (footer): `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(99, 143, 61, 0.1) 0px 0px 0px 1px`
- Shadow `xl` (footer): `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(117, 255, 188, 0.45) 0px 24px 64px -48px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The design is mostly flat, relying on the difference between the ivory canvas and pale sage surfaces rather than pronounced shadows. Thin gray-green hairlines define boundaries, and cards use softly rounded corners. CTA pills and interface previews provide modest layering; the dark footer gradient and product panels supply the strongest depth.

## Imagery

Large feature visuals combine softly rendered landscape illustrations with product-interface previews. The first feature imagery includes a warm valley scene; another uses a pale, snow-covered mountain setting. These images have rounded card framing and muted, painterly color, while product screens use dark panels and fine technical detail. The hero’s code-like texture is faint and secondary, not a competing focal point.

## Components

### Primary CTA

Forest-green pill button with light text and Fragment Mono lettering; repeated for Get Started actions.

### Secondary CTA

Quiet outlined or canvas-toned pill action beside the primary CTA, with compact monospace text.

### Eyebrow badge

Small pale green badge with uppercase monospace-style label, introducing the hero proposition.

### Navigation

Minimal top bar with Adaline mark at left and Docs, Blog, and a green Get Started action at right.

### Feature card

Rounded visual container with pale green-gray surface treatment; measured cards use a 10px radius and 20px padding.

### Product preview

Dark, information-dense software interface shown inside a much lighter page, with small monospace labels and fine details.

### Measured component styles

- **Primary button** (“Get Started”): background #203b14 · text #fbfdf6 · radius 20px · padding 0px 14px · 400 14px fragmentMono
- **Secondary button** (“The Self-Improving Agent”): background #ecf2df · text #203b14 · radius 3.35544e+07px · padding 6px 12px · 400 14px fragmentMono
- **Link**: background #d2d8d1 · text #0a1d08 · radius 3.35544e+07px · padding 0px · 400 18px akkurat
- **Input** (“adaline.ai/behaviors”): transparent background · text #2e4320 · radius 0px · padding 0px · 400 11px Fragment Mono
- **Card**: background #e1e6df · text #0a1d08 · radius 10px · padding 20px · 400 18px akkurat
- **Badge**: background #f8f9f6 · text #2d4320 · border 1px solid #dbbfc6 · radius 3px · padding 1px 4px · 400 8px Fragment Mono
- **Navigation item** (“Docs Blog Get Started”): transparent background · text #0a1d08 · radius 0px · padding 0px · 400 18px akkurat

## Do

- Use Canvas Ivory (#fbfdf6) as the dominant page background.
- Reserve Forest Action (#203b14) for primary calls to action.
- Use Akkurat or a close sans-serif for clear headings and body copy.
- Set navigation labels and technical details in a restrained monospace.
- Separate long sections with generous open space.
- Frame feature imagery and product previews with softly rounded edges.

## Don't

- Do not turn the pale canvas into a high-contrast white-and-black layout.
- Do not use bright saturated accents as dominant page colors.
- Do not crowd the hero with extra copy or decorative elements.
- Do not apply heavy shadows to ordinary cards or text.
- Do not let landscape illustrations overpower the feature content.
- Do not use oversized decorative typography in place of product detail.

## Agent prompt

Build a new Adaline-style AI platform page with a quiet, editorial composition. Use Canvas Ivory (#fbfdf6) for the main canvas, Sage Mist (#eff2e8) for subtle surfaces, and Soft Lichen (#e4e7df) for fine borders. Make Forest Action (#203b14) the focused primary CTA color; use Olive Ink (#2e4320) for links and secondary accents. Pair a clean Akkurat-like sans-serif with compact monospace labels and interface details. Keep the opening layout spacious and split between concise copy and a restrained technical visual. Alternate feature explanations with large, softly framed landscape imagery or dark product previews. Favor open vertical rhythm, minimal elevation, rounded cards, and pill-shaped actions. Close with a distinctly darker footer treatment without carrying dark tones into the main canvas.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Wide, pale hero with left-aligned copy and calls to action; faint code-like texture occupies the right. | primary and secondary actions, brand navigation | pale canvas, green pill CTA, monospace eyebrow |
| 2 | feature-split | Two-column feature section with concise copy and a large full-bleed visual. | explain capability, show supporting product context | large rounded image, compact heading, pale canvas |
| 3 | feature-split | Two-column feature layout pairing descriptive copy with a broad visual. | explain capability, illustrate evaluation workflow | large framed artwork, quiet typography, spacious separation |
| 4 | product-showcase | Wide visual showcase with a 12-column measured structure. | inspect product workflow, show interface in context | dark product panel, small technical details, light surrounding canvas |
| 5 | other | Single-column, full-width-feeling section on the pale canvas. | continue the product narrative | minimal surface treatment, generous whitespace |
| 6 | integrations | Six-column section with several visual marks, actions, and links. | browse related resources, follow supporting links | small iconography, compact link groups, light background |
| 7 | other | Long single-column pale section with minimal visible structure. | provide visual breathing room | open light canvas, low visual density |
| 8 | footer | Full-width near-black closing section. | navigate secondary content | dark surface, subtle teal gradient, fine borders |

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