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

# Exante · Design System

> Calm finance, energized by geometric green

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

Exante pairs a clean white canvas and crisp dark typography with vivid green panels and dark, geometric hero artwork. Oversized headlines, restrained UI, and compact conversion bands give its finance-focused AI product a confident, technical presence.

## North star

Keep the page predominantly white and typographic, using vivid green bands and precise geometric artwork as deliberate, high-contrast interruptions.

## Overview

The visual system is built around a bright white canvas, near-black green-tinted text, and a sharp lime accent. White space keeps the long page readable, while green section bands interrupt the neutral flow with stats, process steps, and calls to action. The first viewport uses a deep forest-toned visual field with luminous geometric forms; that dark green imagery is a defining visual treatment, though its sampled shades come from the artwork rather than the measured brand palette. Headlines are large, lightly weighted, and tightly tracked, with small uppercase mono labels providing a technical counterpoint. Body copy stays compact and subdued. Layouts alternate between centered statements, multi-column feature cards, and wide panels, with consistent restrained corner rounding and thin separators. Product imagery is abstract and architectural rather than photographic, lending the collections workflow a precise, engineered character.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Primary page canvas, navigation background, white cards, and occasional reversed text. |
| Forest Ink | `#1e211e` | `--color-forest-ink` | brand | Core heading and body text, dark footer, and solid dark CTA surfaces. |
| Soft Graphite | `#4b4d4b` | `--color-soft-graphite` | neutral | Muted supporting copy and subtle dark-to-transparent overlays in media. |
| Quiet Line | `#d2d3d2` | `--color-quiet-line` | semantic | Hairline borders and low-emphasis separators between content rows. |
| Signal Lime | `#90fc95` | `--color-signal-lime` | accent | Bright stats, process, and CTA panel backgrounds; small highlights within feature cards. |
| Media Shadow | `#191919` | `--color-media-shadow` | surface | Appears in dark image gradients and illustration shading, not as a defining UI palette color. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#1e211e` (Forest Ink) · `--color-text` → `#1e211e` (Forest Ink) · `--color-text-muted` → `#4b4d4b` (Soft Graphite) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#d2d3d2` (Quiet Line) · `--color-accent` → `#90fc95` (Signal Lime)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1e211e` | `#ffffff` | 16.26:1 | AAA |
| `#4b4d4b` | `#ffffff` | 8.53:1 | AAA |
| `#4b4d4b` | `#1e211e` | 1.91:1 | fail |
| `#ffffff` | `#1e211e` | 16.26:1 | AAA |
| `#90fc95` | `#ffffff` | 1.27:1 | fail |
| `#90fc95` | `#1e211e` | 12.81:1 | AAA |

### Gradients

- `linear-gradient(219deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 88%)`
- `linear-gradient(rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 66.6667%, rgba(0, 0, 0, 0.9) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Geist Variable | `--font-geist-variable` | webfont | 400 | Navigation and compact supporting text | Inter |
| Geist | `--font-body` | webfont | 300, 400 | Main headings and body copy | Inter |
| Alliance No.2 Regular | `--font-display` | webfont | 400 | Display and secondary editorial headings | Manrope |
| Geist Mono | `--font-mono` | webfont | 400 | Eyebrows and technical micro-labels | IBM Plex Mono |

- **Geist Variable:** Neutral sans with regular weight; use clear, restrained tracking.
- **Geist:** Headlines can be light or regular with tight negative tracking; body is light and readable.
- **Alliance No.2 Regular:** Use a refined sans with light-to-regular weight and tightly tracked display lines.
- **Geist Mono:** Small uppercase labels use conspicuous positive tracking and a compact line height.

### Type scale — Perfect Fourth (ratio ≈ 1.333, base 19px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 300 | 1.1 | -0.05em | — | Alliance No.2 Light | Light, oversized hero and campaign display headlines. |
| h1 | 72px | 400 | 1 | -0.04em | — | Geist | Primary page headline and strongest section statements. |
| h2 | 58px | 400 | 1.2 | -0.05em | — | Alliance No.2 Regular | Large section headlines, often centered. |
| h3 | 52px | 400 | 1.2 | -0.04em | — | Alliance No.2 Regular | Feature and narrative section headings. |
| h4 | 28px | 400 | 1.2 | -0.02em | — | Alliance No.2 Regular | Card titles and smaller content headings. |
| body | 19px | 300 | 1.4 | 0 | — | Geist | Introductory descriptions and feature-card copy. |
| caption | 17px | 400 | 1.4 | 0 | — | Geist Variable | Small supporting notes and secondary card text. |
| nav | 19px | 400 | 1.4 | -0.01em | — | Geist Variable | Top navigation links and feature navigation labels. |
| eyebrow | 12px | 400 | 1.2 | 0.06em | uppercase | Geist Mono | Short uppercase labels above section headings. |
| code | 12px | 400 | 1.2 | 0.06em | uppercase | Geist Mono | Technical-looking micro-labels and compact metadata. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`, `"ss10"`, `"ss03"`.

## Spacing & layout

- Base unit **4px**, density **compact**.
- Scale (most used values): 4, 10, 11, 12, 16, 20, 24, 28, 32, 34, 36, 40, 64 px.
- Section rhythm 40px · element gap 10px · card padding 36px · max content width 1360px.

The measured page uses a wide desktop canvas with a maximum content width of 1360px. Sections shift between full-width color bands and inset content areas, with centered headline-led blocks alongside left-aligned hero and feature content. Feature cards use multi-column rows; other stretches rely on generous blank space and simple alignment rather than dense grids. The measured spacing scale is compact, but section transitions feel deliberate. Keep the page rhythm varied: broad visual panels, quieter text sections, then focused conversion bands.

## Shape & elevation

- Radius: button `2px` · card `4px` · media `4px` · link `2px` · xs `2px` · sm `4px` · md `8px`
- No box shadows measured: the page is flat.

The interface is largely flat, without measured shadows. Cards rely on white or warm near-white fills and modest corner rounding, while thin gray hairlines separate rows and FAQ items. Stronger depth comes from contrast between green panels, white cards, and dark media artwork rather than layered drop shadows.

## Imagery

The page uses abstract geometric artwork rather than conventional product photography. The hero contrasts a dark green field with luminous wireframe-like stacked forms; other vivid green panels carry crisp dark geometric line art. Feature and workflow cards reserve substantial space for visual blocks. Keep imagery architectural, clean-edged, and integrated into section backgrounds, with dark overlays only where needed for contrast.

## Components

### Top navigation

White horizontal bar with the Exante mark, Product and Company links, and compact dark Sign In and Request a Demo buttons.

### Hero

Dark geometric visual field with a large, lightly weighted headline, concise supporting copy, and contrasting primary and secondary actions.

### Green metric band

Bright lime panel with a small uppercase mono label and four white statistic cards arranged in a row.

### Feature cards

Three-column collection-agent cards with green visual areas, concise headings, short explanatory copy, and dark Get Started buttons.

### Workflow panel

Green process band containing four white step cards and a full-width dark Request a Demo action.

### FAQ list

Centered section title above a narrow stack of question rows separated by fine gray rules.

### Footer

Near-black full-width footer with a light logo and text, certification badge, and vertically grouped feature and company links.

### Measured component styles

- **Primary button** (“Sign In”): background #1e211e · text #0000ee · radius 2px · padding 11px 28px · 400 12px sans-serif
- **Link** (“Request a Demo”): transparent background · text #0000ee · radius 2px · padding 16px 34px · 400 12px sans-serif
- **Card** (“Cash Application Automatically match inc”): background #fbfaf9 · text #000000 · radius 4px · padding 40px 32px · 400 12px sans-serif
- **Navigation item** (“Product Company Sign In Request a Demo”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use white as the default page canvas.
- Reserve lime green for prominent bands and focused highlights.
- Use dark ink for headings, body copy, and primary dark buttons.
- Set section eyebrows in small uppercase monospace.
- Pair large, tightly tracked headlines with compact readable body text.
- Use geometric artwork to echo the hero’s architectural forms.

## Don't

- Do not make every section dark or green.
- Do not add shadows where flat contrast is sufficient.
- Do not use colorful gradients as a substitute for the measured palette.
- Do not crowd the layout with dense, persistent UI.
- Do not use decorative imagery that competes with headline hierarchy.
- Do not treat sampled artwork greens as additional brand colors.

## Agent prompt

Build a new Exante page with a bright, mostly white canvas and a restrained enterprise-finance feel. Use Gallery White (#ffffff) for the page and cards, Forest Ink (#1e211e) for typography and dark CTAs, Soft Graphite (#4b4d4b) for muted copy, Quiet Line (#d2d3d2) for separators, and Signal Lime (#90fc95) for focused feature or process bands. Keep Media Shadow (#191919) within illustration shading rather than expanding the interface palette. Use oversized, tightly tracked sans headlines, readable light body copy, and tiny uppercase mono eyebrows. Alternate wide vivid panels with calm white sections and compact card grids. Favor flat surfaces, modest rounding, subtle rules, and crisp geometric artwork; avoid unnecessary shadows, gradients, or visual clutter.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | category-nav | Two-column section with a left-aligned heading and a dense list of feature links. | Feature discovery, Direct navigation | Large section heading, Compact link list, Two-column layout |

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