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

# Adora · Design System

> A calm canvas for lively product intelligence

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

Adora pairs a quiet, warm-white canvas and deep ink typography with bright product accents and expansive interface previews. Its SaaS homepage balances polished product storytelling with a playful, approachable visual language.

## North star

Keep the page calm and legible, then use saturated purple and soft pastel panels to direct attention toward product evidence.

## Overview

The page is grounded in a warm off-white canvas (#f9f9f7), with dark plum-ink headings (#21164c) and softer charcoal copy (#353241). A vivid purple (#592eff) marks the primary action and selected links, while cyan, pink, and lime appear as generous feature-panel fills and illustrated accents rather than competing interface chrome. PolySans gives display and heading text a compact, confident presence; Plus Jakarta Sans carries navigation, body copy, and controls with a rounded, approachable feel. The composition alternates centered hero storytelling with left-aligned product explanations, large interface demonstrations, logo proof, and colorful testimonial panels. A comfortable, wide content frame and substantial section breathing room keep the long page readable. Rounded cards, fine neutral borders, and restrained shadows soften the product UI without making the whole page feel elevated or glossy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#f9f9f7` | `--color-warm-canvas` | surface | Dominant page background across the hero, feature sections, testimonials, integration content, and footer. |
| Soft Charcoal | `#353241` | `--color-soft-charcoal` | neutral | Default body copy, navigation labels, and supporting interface text. |
| Plum Ink | `#21164c` | `--color-plum-ink` | brand | Primary headings, emphasized product copy, and dark text on light controls. |
| Quiet Line | `#e0e0db` | `--color-quiet-line` | neutral | Thin card, button, and footer borders that define structure without strong contrast. |
| Signal Violet | `#592eff` | `--color-signal-violet` | accent | Primary Get started CTA, links, and selected brand or interface accents. |
| Clean White | `#ffffff` | `--color-clean-white` | surface | Navigation capsule, secondary CTA, and light product-card or interface surfaces. |
| Sky Tint | `#bcf2ff` | `--color-sky-tint` | accent | Pastel feature and testimonial panel fill, plus occasional decorative illustration accents. |
| Petal Pink | `#ffaae6` | `--color-petal-pink` | accent | Colorful testimonial panel and playful decorative product storytelling. |
| Lime Wash | `#dfff9d` | `--color-lime-wash` | accent | Bright testimonial panel and occasional illustration or product-preview highlight. |
| Muted Graphite | `#5f5f69` | `--color-muted-graphite` | semantic | Minor muted text variation; not a defining page-wide brand color. |
| Electric Fuchsia | `#f843c2` | `--color-electric-fuchsia` | accent | Small expressive accents within illustrations and decorative interface details, not a primary surface color. |

### Semantic aliases

`--color-canvas` → `#f9f9f7` (Warm Canvas) · `--color-surface` → `#ffffff` (Clean White) · `--color-surface-2` → `#bcf2ff` (Sky Tint) · `--color-text` → `#21164c` (Plum Ink) · `--color-text-muted` → `#353241` (Soft Charcoal) · `--color-border` → `#e0e0db` (Quiet Line) · `--color-accent` → `#592eff` (Signal Violet) · `--color-accent-2` → `#ffaae6` (Petal Pink) · `--color-on-accent` → `#ffffff` (Clean White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#21164c` | `#f9f9f7` | 15.52:1 | AAA |
| `#21164c` | `#ffffff` | 16.36:1 | AAA |
| `#21164c` | `#bcf2ff` | 13.46:1 | AAA |
| `#353241` | `#f9f9f7` | 11.83:1 | AAA |
| `#353241` | `#ffffff` | 12.47:1 | AAA |
| `#353241` | `#bcf2ff` | 10.26:1 | AAA |
| `#592eff` | `#f9f9f7` | 6.11:1 | AA |
| `#592eff` | `#ffffff` | 6.44:1 | AA |
| `#592eff` | `#bcf2ff` | 5.3:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Plus Jakarta Sans | `--font-body` | webfont | 500, 600, 400, 700 | Navigation, body copy, captions, buttons, and links. | Manrope |
| PolySans | `--font-display` | webfont | 600, 700 | Display headlines and the main heading hierarchy. | Inter |

- **Plus Jakarta Sans:** Use medium weights for most interface and body text, heavier weights for controls; keep tracking neutral and case natural.
- **PolySans:** Use semibold display and heading weights, tight negative tracking, compact line-height, and sentence case.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 68px | 600 | 1.1 | -0.02em | — | PolySans | Oversized platform headline and prominent promotional display copy. |
| h1 | 58px | 600 | 1.1 | -0.02em | — | PolySans | Primary hero headline. |
| h2 | 38px | 600 | 1.2 | -0.02em | — | PolySans | Major section headings and testimonial statements. |
| h3 | 32px | 500 | 1.1 | -0.02em | — | Plus Jakarta Sans | Feature and product-card headings. |
| h4 | 28px | 600 | 1.1 | -0.02em | — | PolySans | Smaller feature titles and integration step headings. |
| body | 18px | 500 | 1.6 | 0 | — | Plus Jakarta Sans | Section descriptions, testimonial copy, and product explanations. |
| caption | 14px | 500 | 1.6 | 0 | — | Plus Jakarta Sans | Small labels, metadata, and supporting interface details. |
| button | 18px | 500 | 1.6 | 0 | — | Plus Jakarta Sans | Primary and secondary CTA labels. |
| nav | 16px | 500 | 1 | 0 | — | Plus Jakarta Sans | Top navigation links and menu labels. |
| link | 18px | 500 | 1.6 | 0 | — | Plus Jakarta Sans | Inline actions such as privacy and product-detail links. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 6, 8, 10, 12, 16, 20, 24, 30, 32, 40, 48, 50, 60, 70, 100 px.
- Section rhythm 60px · element gap 5px · card padding — · max content width 1192px.

Use a centered content frame with a measured maximum width of 1192px and a comfortable, spacious density. The hero is centered and two-column in content, with a large, nearly full-width product demonstration below. Alternate centered logo proof and feature introductions with left-aligned copy and product previews. Product showcases and cards create the denser passages; testimonial panels and large headings restore visual breathing room. Keep section gaps generous and maintain clear separation between content bands even when the canvas color stays consistent.

## Shape & elevation

- Radius: button `12px` · card `40px` · media `26px` · nav `9999px` · xs `8px` · sm `12px` · md `16px` · lg `26px` · xl `30px` · 2xl `40px` · pill `9999px`
- Shadow `md` (other, card): `rgba(126, 137, 153, 0.01) 0px 9.8px 4.2px 0px, rgba(126, 137, 153, 0.05) 0px 5.6px 2.8px 0px, rgba(126, 137, 153, 0.09) 0px 2.8px 2.8px 0px, rgba(126, 137, 153, 0.1) 0px 0px 1.4px 0px`
- Shadow `sm` (nav): `rgba(33, 22, 76, 0.08) 0px 2px 8px -2px`
- Motion: standard transition `0.2s linear` on interactive elements.

The overall page is mostly flat, with thin #e0e0db borders separating cards and controls. Use the measured restrained card shadow sparingly, and apply a subtle shadow to the white navigation capsule. Product previews gain depth mainly through layered screenshots, tinted frames, and rounded clipping rather than heavy shadows.

## Imagery

Product-interface screenshots and animated or video-led demonstrations are the primary visual evidence, often shown large inside rounded frames. Supplement them with customer portraits, customer logos, and light hand-drawn cloud marks. Bright landscape-like artwork and colorful annotation details occur inside product mockups and testimonial imagery; treat those as illustrative content, not as the page’s core palette.

## Components

### Floating navigation

A compact white capsule centered near the top, with Adora branding, navigation links, and a subtle shadow.

### Hero CTA pair

Purple filled Get started button beside a white bordered Watch 1min button; both use rounded corners and clear labels.

### Product demonstration frame

Large rounded product screenshot or video, layered over softly colored framing and annotated with interface details.

### Feature cards

Rounded cards with fine neutral borders, product imagery, concise headings, explanatory copy, and small Learn more links.

### Pastel testimonial panel

Wide rounded quote block using a bright lime, pink, or cyan fill, with a customer portrait and compact attribution.

### Integration steps

Three concise setup cards followed by horizontal privacy and security information rows with small icons and links.

### Footer link groups

A white, rounded footer surface with grouped product, resource, and company links plus a compact legal row.

### Measured component styles

- **Primary button** (“Get started Get started”): background #592eff · text #ffffff · border 1px solid · radius 12px · padding 0px 20px · 600 16px Plus Jakarta Sans
- **Secondary button** (“Watch 1min Watch 1min”): background #ffffff · text #21164c · border 1px solid #e0e0db · radius 12px · padding 0px 20px · 600 16px Plus Jakarta Sans
- **Link** (“See our privacy controls”): transparent background · text #592eff · radius 0px · padding 0px · 500 18px Plus Jakarta Sans
- **Card** (“Automated journey maps Goodbye manual sc”): transparent background · text #353241 · border 1px solid #e0e0db · radius 40px · padding 0px · 500 18px Plus Jakarta Sans
- **Navigation item** (“Product Resources Pricing Login”): transparent background · text #353241 · radius 0px · padding 0px · 500 16px Plus Jakarta Sans

## Do

- Use #f9f9f7 as the primary page canvas.
- Set major headings in PolySans with deep #21164c ink.
- Reserve #592eff for the primary action and important links.
- Show real product-interface previews prominently.
- Use pastel colors selectively for feature and testimonial panels.
- Keep borders thin, neutral, and visually quiet.

## Don't

- Do not make the whole page dark or high-contrast.
- Do not use bright pink or lime as the primary CTA color.
- Do not replace product screenshots with generic abstract art.
- Do not crowd the spacious section rhythm with dense text.
- Do not apply heavy shadows to every card.
- Do not use all caps for ordinary headings or navigation.

## Agent prompt

Build a new Adora-style SaaS page on a warm #f9f9f7 canvas. Use deep #21164c PolySans headlines and #353241 Plus Jakarta Sans interface copy; keep headings compact and confident, body text readable, and alignment intentional. Use #592eff for the primary CTA and links, with white secondary controls and thin #e0e0db borders. Make product-interface imagery the centerpiece: frame it with soft rounded corners and occasional pastel #bcf2ff, #ffaae6, or #dfff9d panels. Keep these brighter hues to feature storytelling and testimonials, not general page chrome. Establish a spacious, centered content frame, alternate centered hero moments with left-aligned feature explanations, and organize content into clear, generous bands. Prefer restrained shadows, layered product previews, and straightforward navigation.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and copy above paired CTAs, followed by a wide product preview. | Primary and secondary CTA, Product demo preview | Floating capsule navigation, Decorative cloud marks, Rounded interface frame |
| 2 | logo-cloud | Centered heading and short trust line above a horizontal row of customer logos. | Social proof | Customer logo strip, Centered typography |
| 3 | feature-split | Two-column introduction with section label, left-aligned heading, and explanatory copy. | Feature explanation | Small outlined section label, Split text alignment |
| 4 | gallery | Horizontal sequence of small screen previews with concise captions. | Browse screen examples | Product thumbnails, Compact metadata |
| 5 | product-showcase | Large rounded panel with heading, supporting copy, and a layered interface montage. | Show language and device variants | Product mockup, Rounded framing, Interface controls |
| 6 | testimonials | Wide bright quote panel pairing customer photography with a short endorsement. | Customer proof | Lime panel, Portrait image, Quote and attribution |
| 7 | feature-split | Centered section label and headline introducing the product-journey feature. | Feature introduction | Centered heading, Decorative underline accents |
| 8 | product-showcase | Large centered product view presented as a standalone visual. | Demonstrate product workflow | Layered interface preview, Rounded media frame |
| 9 | feature-split | Small platform label and brief introduction leading into a large display heading. | Transition into feature catalog | Section label, Oversized display typography |
| 10 | feature-grid | Two rows of three cards with preview imagery, titles, short copy, and links. | Explore feature details | Six feature cards, Product thumbnails, Learn more links |
| 11 | testimonials | Wide pink quote panel combining a customer statement and portrait. | Customer proof | Pink panel, Portrait image, Quote attribution |
| 12 | testimonials | Wide cyan quote panel with customer portrait and text in opposing columns. | Customer proof | Cyan panel, Portrait image, Quote and attribution |
| 13 | how-it-works | Three setup cards above two horizontal privacy and security information rows. | Three-step setup, Privacy reassurance | Icon-led cards, Security links, Horizontal information rows |
| 14 | footer | Three link columns in a white panel above a compact legal and social row. | Grouped site navigation, Legal links | White rounded surface, Column headings, Small footer marks |

## Source CSS custom properties (selected)

```css
--ease-Out: cubic-bezier(.43, .195, .02, 1);
--ease-In: cubic-bezier(.98, 0, .57, 0);
--ease-OutQuint: cubic-bezier(.23, 1, .32, 1);
--ease-Out2: cubic-bezier(.9, .1, .15, 1.05);
--ease-Out3: cubic-bezier(.63, .195, .01, 1);
--ease-OutSlow: cubic-bezier(.43, .195, .02, 1);
--ease-OutSnap: cubic-bezier(.835, .085, .005, 1);
--ease-OutUnspun: cubic-bezier(.745, .065, .17, 1);
--ease-OutCubic: cubic-bezier(.215, .61, .355, 1);
--font-default: "Plus Jakarta Sans";
--font-heading: "PolySans";
--image-radius: 26px;
--color-purple-60: #4c29d2;
--color-blue-1: #21164c;
--color-blue-2: #382099;
--color-blue-3: #592eff;
--color-blue-4: #9074ff;
--color-blue-5: #baa8ff;
--color-blue-7: #e5e0f8;
--color-green-darkest: #1c2901;
--color-green-1: #34490b;
--color-green-2: #517900;
--color-green-3: #a2ea13;
--color-green-4: #c5fb5c;
--color-green-5: #dfff9d;
--color-pink-1: #57003d;
--color-pink-2: #9d0d72;
--color-pink-3: #f843c2;
--color-pink-4: #fd80d8;
--color-pink-5: #ffaae6;
--color-sea-1: #0a3c48;
--color-sea-2: #055265;
--color-sea-3: #2ed6ff;
--color-sea-4: #90e9ff;
--color-sea-5: #bcf2ff;
--color-grey-1: #353241;
--color-grey-2: #3a3647;
--color-grey-3: #5f5f69;
--color-grey-4: #e0e0db;
--color-grey-5: #f9f9f7;
```

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