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

# Duna · Design System

> Calm compliance, framed by expansive landscapes

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

Duna pairs a restrained SaaS layout with immersive, painterly landscapes and a calm neutral palette. Large, tightly tracked headlines and pill-shaped dark CTAs give the compliance story a clear, confident rhythm.

## North star

Keep the interface quiet and legible, then use expansive painterly landscapes as the page’s emotional punctuation.

## Overview

The page builds a quiet, editorial interface around a bright white canvas, using warm near-black text and muted gray supporting copy to keep product messaging legible. The opening is distinguished by a full-width, painterly landscape in peach, ochre, green, and lavender; these image colors are illustrative rather than the core interface palette. Across the rest of the long homepage, white space separates proof points, customer logos, testimonials, product capabilities, security, and customer stories. Pale warm-gray panels provide occasional contrast, while teal appears in a large AI feature band and the illustrated footer. GT America’s clean sans-serif forms support oversized, tightly tracked headings and compact body copy. Navigation and calls to action remain simple, with dark pill buttons and restrained labels. Product mockups sit within quiet, lightly tinted panels, preserving the overall sense of order and calm.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | brand | Primary canvas across the hero, content sections, navigation, and most of the long-page layout. |
| Warm Ink | `#292421` | `--color-warm-ink` | neutral | Main heading and body-text color, providing softer contrast than pure black. |
| Quiet Gray | `#898683` | `--color-quiet-gray` | neutral | Muted explanatory copy, captions, and secondary text on white. |
| Soft Porcelain | `#f7f7f5` | `--color-soft-porcelain` | surface | Warm pale testimonial and content-card surface. |
| Duna Teal | `#46838c` | `--color-duna-teal` | brand | Large inverse feature section and illustrated footer band; a supporting brand surface rather than a small CTA accent. |
| Mauve Slate | `#766a7c` | `--color-mauve-slate` | accent | Small seQura proof badge; keep limited to badge or illustration contexts. |
| Button Charcoal | `#1a1816` | `--color-button-charcoal` | semantic | Dark pill CTA background, including the demo and get-started actions. |
| Deep Plum | `#1b0624` | `--color-deep-plum` | semantic | Minor sampled text color; not a defining page-wide brand surface. |
| Oat Mist | `#edece7` | `--color-oat-mist` | surface | Occasional warm neutral section or interface surface. |
| Stone Panel | `#dfdcd5` | `--color-stone-panel` | surface | Muted testimonial-media and product-card panel background. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Minor sampled text and mockup color; use sparingly, not as the main text tone. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f7f7f5` (Soft Porcelain) · `--color-surface-2` → `#46838c` (Duna Teal) · `--color-surface-3` → `#edece7` (Oat Mist) · `--color-surface-4` → `#dfdcd5` (Stone Panel) · `--color-text` → `#292421` (Warm Ink) · `--color-text-muted` → `#898683` (Quiet Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-accent` → `#46838c` (Duna Teal)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#292421` | `#ffffff` | 15.34:1 | AAA |
| `#292421` | `#f7f7f5` | 14.3:1 | AAA |
| `#292421` | `#46838c` | 3.57:1 | AA-large |
| `#292421` | `#edece7` | 12.97:1 | AAA |
| `#898683` | `#ffffff` | 3.62:1 | AA-large |
| `#898683` | `#f7f7f5` | 3.37:1 | AA-large |
| `#898683` | `#46838c` | 1.19:1 | fail |
| `#898683` | `#edece7` | 3.06:1 | AA-large |
| `#ffffff` | `#f7f7f5` | 1.07:1 | fail |
| `#ffffff` | `#46838c` | 4.3:1 | AA-large |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| GT America Regular | `--font-body` | webfont | 400 | Primary headings, body copy, navigation, and links throughout the page. | Inter |
| GT America Medium | `--font-gt-america-medium` | webfont | 400 | Sparse medium-weight emphasis within the main typographic system. | Inter |
| GT America Trial Md | `--font-display` | webfont | 400, 500 | Display-style headline treatment. | Inter |

- **GT America Regular:** Regular weight; large headings use tight negative tracking, while body copy stays compact and comfortably line-spaced.
- **GT America Medium:** Use selectively for emphasis; avoid turning the page into a heavy, bold interface.
- **GT America Trial Md:** Measured as medium display text; keep the oversized treatment clean, restrained, and untransformed.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 500 | 1 | 0 | — | GT America Trial Md | Oversized display treatment for prominent headline moments. |
| h1 | 72px | 400 | 1 | -0.06em | — | GT America Regular | Main hero headline about the future of business onboarding. |
| h2 | 44px | 400 | 1.1 | -0.05em | — | GT America Regular | Major section headlines and feature-band statements. |
| h3 | 40px | 400 | 1.2 | -0.03em | — | GT America Regular | Product capability, security, and customer-story section headings. |
| h4 | 32px | 400 | 1.2 | -0.03em | — | GT America Regular | Smaller feature or card headings within content sections. |
| body | 16px | 400 | 1.5 | -0.01em | — | GT America Regular | Supporting descriptions, testimonials, and explanatory product copy. |
| caption | 14px | 400 | 1.71 | 0 | — | GT America Trial Rg | Compact labels, customer attributions, and supporting metadata. |
| link | 16px | 400 | 1.5 | -0.01em | — | GT America Regular | Navigation links and understated inline or section actions. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`, `"tnum", "zero"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 6, 8, 10, 12, 16, 20, 24, 40, 48, 64, 128, 140 px.
- Section rhythm 40px · element gap 10px · card padding 64px · max content width 1120px.

The homepage uses a centered, constrained content frame with a measured maximum width of 1120px, alternating with full-bleed landscape and color-band sections. Navigation sits in a single horizontal row over the hero artwork. The main content is editorial and mostly left-aligned, with centered hero and brand-proof moments. Product features use spacious two-column splits, alternating text and mockup placement. Sections have generous separation and a compact information density within each block; the measured spacing system is based on a 4px unit.

## Shape & elevation

- Radius: button `9999px` · media `24px` · link `9999px` · xs `8px` · sm `16px` · md `24px` · pill `9999px`
- Shadow `lg` (button): `rgba(45, 32, 50, 0.08) 0px 0.602187px 1.80656px -0.666667px, rgba(45, 32, 50, 0.09) 0px 2.28853px 6.8656px -1.33333px, rgba(45, 32, 50, 0.12) 0px 10px 30px -2px`

The interface is predominantly flat: white space and warm surface fills separate content rather than visible borders. Cards are mostly square-edged in the measured component data, while buttons and links use fully rounded pill shapes. A subtle layered shadow is measured on a small proof badge, not as a general card treatment. Avoid adding heavy outlines or broad elevation.

## Imagery

Large, full-bleed painterly landscapes anchor the opening and footer; a sky-and-cloud image also fills a teal-toned AI feature band. Their warm, varied pigments are illustration colors, not a cue to recolor interface controls. Product sections use muted, softly tinted mockup panels with restrained interface details. Customer story cards introduce cropped imagery, while logos and certification marks stay small and secondary.

## Components

### Primary pill CTA

Dark charcoal, fully rounded action button with concise white label; used for Schedule a demo and Get started.

### Top navigation

Brand mark at left, centered text links, and a compact demo CTA at right; placed directly over the hero image.

### Proof badge

Small rounded mauve-slate badge above the hero headline, carrying a customer outcome and a subtle shadow.

### Customer logo row

Quiet, small customer marks aligned in a horizontal proof strip on white.

### Testimonial panel

Large pale warm-gray quote card with generous inset space and a separate muted media panel.

### Product feature split

Editorial heading and concise details paired with a softly tinted product mockup; alternate the media side across capabilities.

### Full-bleed feature band

Centered AI message and compact CTA over a sky landscape, using the teal section treatment.

### Measured component styles

- **Primary button** (“Schedule a demo”): background #160f0c · text #0000ee · radius 999px · padding 8px 14px · 400 12px sans-serif
- **Secondary button** (“seQura: 16x faster KYB reviews”): background #766a7c · text #0000ee · radius 99px · padding 4px 8px 4px 14px · 400 12px sans-serif · shadow rgba(45, 32, 50, 0.08) 0px 0.602187px 1.80656px -0.666667px, rgba(45, 32, 50, 0.
- **Link** (“Onboard”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px GT America Regular
- **Card** (““People ask how we're using AI in compli”): background #f7f7f5 · text #000000 · radius 0px · padding 64px · 400 12px sans-serif

## Do

- Use white as the default canvas.
- Set primary copy in Warm Ink #292421.
- Reserve muted gray for supporting text.
- Use full-bleed landscapes as occasional section anchors.
- Keep primary actions dark and fully pill-shaped.
- Give feature sections ample breathing room.

## Don't

- Do not turn illustration colors into interface accents.
- Do not add heavy borders to cards.
- Do not use dense dashboard-like layouts.
- Do not make every section a colored band.
- Do not replace the restrained type with heavy bold display styles.
- Do not use shadows as a default card treatment.

## Agent prompt

Build a new Duna-style SaaS page with a bright Gallery White #ffffff canvas, Warm Ink #292421 headings, and Quiet Gray #898683 supporting copy. Use GT America or a close sans-serif substitute such as Inter; keep display headings large, clean, and tightly tracked, with regular-weight body text. Structure content in a centered frame, opening with an immersive, full-bleed painterly landscape and a concise hero message. Use dark Button Charcoal #1a1816 pill CTAs, ample whitespace, and editorial feature splits with softly tinted mockup panels. Introduce Duna Teal #46838c only for a prominent feature band or illustrated footer, not as a pervasive control color. Keep cards mostly flat, use rounded pills for actions, and let customer proof and product details remain visually quiet.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | footer | Full-width white footer region with grouped navigation links and a full-bleed illustrated landscape backdrop. | Grouped site navigation, Utility and legal links, Brand-signoff links | Multi-column link groups, Teal landscape illustration, Small muted footer text |

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