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

# Legora · Design System

> Quiet neutrals, cinematic scale, confident green accents.

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

Legora pairs a restrained, warm-neutral interface with cinematic legal-work imagery and expansive product storytelling. Oversized, lightly weighted headlines and generous whitespace keep the experience editorial, while green CTAs provide focused points of action.

## North star

Let warm whitespace and cinematic product imagery lead; use green only to direct attention to meaningful actions.

## Overview

The visual system begins with a warm off-white canvas (#fafaf9), balanced by charcoal text and muted taupe-gray copy. Large stretches of light space alternate with pale gray and warm stone section bands, then resolve into near-black security content for contrast. Deep green (#005032) is a restrained action color, notably in the announcement strip and demo buttons; avoid promoting incidental interface or image colors into brand accents. Aktiv Grotesk sets a clean, modern voice: headlines are large, tightly tracked, and mostly regular or light, while small navigation and body copy remain compact. The layout moves between full-bleed cinematic video, centered headline moments, broad product imagery, and editorial multi-column content. Photography, interface captures, and occasional 3D product visuals carry much of the storytelling. Rounded pill CTAs and compact gray feature chips soften an otherwise flat, spacious composition.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery Ivory | `#fafaf9` | `--color-gallery-ivory` | surface | Primary page canvas and dominant background for light editorial sections. |
| Muted Taupe | `#68655e` | `--color-muted-taupe` | semantic | Muted body copy and subdued section text, especially on pale backgrounds. |
| Soft Concrete | `#e6e6e6` | `--color-soft-concrete` | surface | Pale interface surfaces, secondary CTA background, and muted feature-chip text. |
| Midnight Ink | `#0d1016` | `--color-midnight-ink` | surface | Dark inverse section surface, notably the security and compliance block. |
| Graphite Text | `#343434` | `--color-graphite-text` | neutral | Primary text color on light backgrounds. |
| Warm Stone | `#e1dfda` | `--color-warm-stone` | surface | Warm pale section band, visible behind vision and editorial content. |
| Clean White | `#ffffff` | `--color-clean-white` | neutral | Light text and details over dark photographic or inverse backgrounds. |
| Forest Signal | `#005032` | `--color-forest-signal` | accent | Brand action color for announcement strip and primary demo buttons. |
| Slate Chip | `#7e7e7d` | `--color-slate-chip` | semantic | Gray rounded feature chips; treat as interface detail, not a core brand accent. |
| Soft Pewter | `#989897` | `--color-soft-pewter` | semantic | Minor gradient or visual-detail color; not a defining page surface. |
| Cool Mist | `#d8dbe0` | `--color-cool-mist` | semantic | Minor gradient or illustrative detail; do not use as a primary brand color. |

### Semantic aliases

`--color-canvas` → `#fafaf9` (Gallery Ivory) · `--color-surface` → `#e6e6e6` (Soft Concrete) · `--color-surface-2` → `#e1dfda` (Warm Stone) · `--color-surface-3` → `#0d1016` (Midnight Ink) · `--color-text` → `#343434` (Graphite Text) · `--color-text-muted` → `#68655e` (Muted Taupe) · `--color-text-subtle` → `#e6e6e6` (Soft Concrete) · `--color-accent` → `#005032` (Forest Signal) · `--color-on-accent` → `#0000ee`

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#343434` | `#fafaf9` | 11.92:1 | AAA |
| `#343434` | `#e6e6e6` | 9.98:1 | AAA |
| `#343434` | `#e1dfda` | 9.35:1 | AAA |
| `#343434` | `#0d1016` | 1.53:1 | fail |
| `#68655e` | `#fafaf9` | 5.57:1 | AA |
| `#68655e` | `#e6e6e6` | 4.66:1 | AA |
| `#68655e` | `#e1dfda` | 4.37:1 | AA-large |
| `#68655e` | `#0d1016` | 3.27:1 | AA-large |
| `#e6e6e6` | `#fafaf9` | 1.19:1 | fail |
| `#e6e6e6` | `#e1dfda` | 1.07:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.1) 13.1176%, rgba(0, 0, 0, 0.1) 72.2498%, rgba(0, 0, 0, 0.5) 100%)`
- `linear-gradient(rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 75%)`
- `linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(67, 81, 112, 0.2) 15%, rgba(0, 0, 0, 0) 100%)`
- `linear-gradient(rgba(250, 250, 250, 0) 0%, rgba(250, 250, 250, 0) 50%, rgba(250, 250, 250, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| CUSTOMV2;Aktiv Grotesk VF Variable Regular | `--font-body` | system | 400 | Primary interface and headline family across navigation, headings, body copy, and buttons. | Inter |
| Aktiv Grotesk VF Variable Regular | `--font-display` | webfont | 400, 300 | Webfont variant used for display and select heading styles. | Inter |

- **CUSTOMV2;Aktiv Grotesk VF Variable Regular:** Measured at regular weight for most UI; headlines use tight negative tracking and generous scale, without uppercase styling.
- **Aktiv Grotesk VF Variable Regular:** Variable regular and light weights; display headlines are light, closely tracked, and sentence case.

### Type scale — Perfect Fifth (ratio ≈ 1.473, base 13px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 90px | 300 | 1 | -0.03em | — | Aktiv Grotesk VF Variable Regular | Oversized, light hero and prominent editorial headlines. |
| h1 | 56px | 400 | 1.05 | -0.04em | — | CUSTOMV2;Aktiv Grotesk VF Variable Regular | Primary page headline and major feature-section titles. |
| h2 | 41px | 400 | 1.05 | -0.03em | — | Aktiv Grotesk VF Variable Regular | Section headings such as product introduction and innovations. |
| h3 | 33.5px | 400 | 1.2 | -0.02em | — | CUSTOMV2;Aktiv Grotesk VF Variable Regular | Feature, story, and card-group headings. |
| h4 | 22.5px | 400 | 1.2 | -0.01em | — | CUSTOMV2;Aktiv Grotesk VF Variable Regular | Compact card and supporting content titles. |
| body | 13px | 400 | 1.4 | 0 | — | CUSTOMV2;Aktiv Grotesk VF Variable Regular | Descriptions, supporting paragraphs, and navigation copy. |
| caption | 12px | 400 | 1.4 | 0 | — | CUSTOMV2;Aktiv Grotesk VF Variable Regular | Small metadata, labels, and fine-print details. |

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

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 5, 8, 10, 15, 24, 30, 60 px.
- Section rhythm 60px · element gap 10px · card padding — · max content width 1392px.

A broad, centered composition uses a measured maximum content width of 1392px and comfortable density. The page alternates full-bleed media with centered headline sections, logo strips, product showcases, and editorial grids. Headings are often centered for major brand moments, while detailed copy and cards return to left alignment. The measured section gap is 60px; element spacing is compact by comparison. Large open areas create a slow, premium rhythm, with occasional dense product and compliance panels providing contrast.

## Shape & elevation

- Radius: button `9999px` · media `2px` · link `9999px` · xs `2px` · pill `9999px`
- No box shadows measured: the page is flat.

The interface reads as mostly flat: the measured data reports no shadows and no defined border color. Sections are separated mainly through whitespace, image changes, and shifts between ivory, gray, warm stone, and near-black surfaces. Buttons and chips rely on pill-shaped silhouettes rather than visible outlines or shadow depth; media uses only a subtle measured corner radius.

## Imagery

Cinematic video and photography dominate the hero and major storytelling moments, often framed edge to edge with dark gradients that protect white overlay text. Product sections mix interface screenshots, legal-work environments, portrait photography, and occasional polished 3D visuals. Images are generally rectangular with restrained corner treatment; imagery supplies warmer and cooler hues than the core interface palette, so keep those colors contextual rather than repeating them as UI accents.

## Components

### Announcement strip

A narrow full-width forest-green bar above the main navigation, with centered announcement text and a small learn-more link.

### Overlay navigation

Compact links sit over the hero media, with a centered Legora wordmark and login plus a green pill-shaped demo action on the right.

### Hero

Full-bleed video or imagery fills the opening section; a dark lower gradient supports the centered white headline, descriptor, and demo CTA.

### Demo CTA

Small green pill button with a light circular arrow detail; repeat it in high-intent locations rather than adding multiple competing accents.

### Feature chips

Compact gray rounded labels identify product capabilities within the product showcase; they are subdued, not primary buttons.

### Innovation cards

A row of product-story cards pairs rectangular image or interface previews with short headings, concise copy, and understated text links.

### Measured component styles

- **Primary button** (“Book a demo”): background #005032 · text #0000ee · radius 48px · padding 5px · 400 12px sans-serif
- **Secondary button** (“Large Language Models”): background #7e7e7d · text #0000ee · radius 24px · padding 10px 10px 10px 15px · 400 12px sans-serif
- **Link** (“Legora aOS™ The Legora aOS facilitates t”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Use #fafaf9 as the default light canvas.
- Reserve #005032 for primary actions and announcement emphasis.
- Use near-black media gradients to keep overlay text readable.
- Set major headlines large, lightly weighted, and tightly tracked.
- Alternate open editorial areas with focused product imagery.
- Keep cards and controls visually flat and softly rounded.

## Don't

- Do not add shadows or heavy outlines absent from the measured design.
- Do not use bright blue as a brand link or button color.
- Do not turn photo-derived hues into interface accents.
- Do not crowd full-bleed media with dense navigation or copy.
- Do not use uppercase-heavy typography or decorative typefaces.
- Do not make every section a card grid.

## Agent prompt

Create a new Legora page using a restrained editorial system. Set the main canvas to Gallery Ivory (#fafaf9), use Graphite Text (#343434) for primary copy and Muted Taupe (#68655e) for supporting text, and introduce Soft Concrete (#e6e6e6) or Warm Stone (#e1dfda) only for clear section changes. Use Forest Signal (#005032) sparingly for important actions. Build with Aktiv Grotesk or Inter, using oversized tightly tracked headlines, compact body copy, and sentence case. Favor full-bleed cinematic imagery with subtle dark overlays, generous whitespace, and wide editorial layouts within the measured 1392px maximum width. Use flat surfaces, pill-shaped CTAs, and restrained gray chips; avoid shadows, decorative borders, and extra accent colors. Ensure media overlays remain legible and product imagery feels integrated into the story.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | A long, single-page sequence: full-bleed hero, logo strip, product story, editorial cards, team use cases, stats, vision, and dark security content. | Persistent-looking overlay navigation, Repeated demo calls to action, Scroll-led product storytelling | Announcement bar, Centered headline, Logo cloud, Image-led product cards, Alternating light and dark section bands |

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