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

# Ankar · Design System

> Editorial calm for ambitious invention

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

Ankar presents an enterprise AI and research platform through a restrained editorial system, pairing oversized serif headlines with cinematic workplace footage. Cool pale backgrounds, near-black typography, and occasional vivid accent panels balance institutional trust with an inventive edge.

## North star

Let refined serif typography and a cool, quiet canvas carry the page, reserving saturated colour for focused product moments.

## Overview

The visual strategy combines an almost-white blue-gray canvas with near-black text and expansive serif typography. The opening screen places a large, elegant headline over darkened laboratory footage, while concise supporting copy and small monospace controls keep the message precise. Further down, generous pale sections create a quiet reading surface for editorial headings, compact explanatory copy, and fine dividing rules. Red and deep blue appear as concentrated accent colours, notably in a vivid abstract platform panel; treat them as selective feature colour rather than page-wide decoration. Rounded pill navigation and CTAs provide a softer counterpoint to the formal type. Images feel cinematic and observational—research environments, people, and product interface views—often cropped into wide bands or prominent media panels. Preserve the contrast between calm, spacious content sections and immersive, darkened photographic moments.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Deep Ink | `#000000` | `--color-deep-ink` | neutral | Primary text, dark content cards, and the black Book a Demo CTA. |
| Mist Canvas | `#eef2f6` | `--color-mist-canvas` | surface | Main pale page canvas and the broad background for editorial content sections. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Headlines and supporting text over dark hero footage, plus light button text. |
| Frost White | `#f8fafb` | `--color-frost-white` | neutral | Secondary pale text tone; use for subtle text contrast, not as a dominant surface. |
| Signal Crimson | `#ba484f` | `--color-signal-crimson` | accent | Vivid feature-panel accent and colour within abstract product artwork. |
| Research Indigo | `#2f3d86` | `--color-research-indigo` | accent | Deep blue within the abstract platform visual; keep it concentrated in feature artwork. |

### Semantic aliases

`--color-canvas` → `#eef2f6` (Mist Canvas) · `--color-surface` → `#000000` (Deep Ink) · `--color-text` → `#000000` (Deep Ink) · `--color-text-muted` → `#ffffff` (Paper White) · `--color-text-subtle` → `#f8fafb` (Frost White) · `--color-accent` → `#ba484f` (Signal Crimson) · `--color-accent-2` → `#2f3d86` (Research Indigo)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#eef2f6` | 18.67:1 | AAA |
| `#ffffff` | `#eef2f6` | 1.12:1 | fail |
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#f8fafb` | `#eef2f6` | 1.07:1 | fail |
| `#f8fafb` | `#000000` | 20.06:1 | AAA |
| `#ba484f` | `#eef2f6` | 4.52:1 | AA |
| `#ba484f` | `#000000` | 4.13:1 | AA-large |

### Gradients

- `linear-gradient(90deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 100%)`
- `linear-gradient(90deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0.7) 100%)`
- `linear-gradient(90deg, rgba(0, 0, 0, 0.3) 0%, rgb(0, 0, 0) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Crimson Text | `--font-body` | webfont | 400 | Editorial body copy and supporting paragraphs. | Crimson Text |
| Crimson Pro Variable | `--font-display` | webfont | 400 | Display headlines and section headings. | Crimson Pro |
| DM Mono | `--font-mono` | webfont | 400 | Navigation, button labels, captions, and small utility text. | DM Mono |

- **Crimson Text:** Regular weight; use sentence case and a comfortable, book-like reading rhythm.
- **Crimson Pro Variable:** Regular weight with tight negative tracking; preserve large, graceful mixed-case headlines.
- **DM Mono:** Regular weight; compact labels and controls use restrained, readable monospace.

### Type scale — Perfect Fifth (ratio ≈ 1.485, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 130px | 400 | 1.1 | -0.031em | — | Crimson Pro Variable | Oversized hero-scale editorial statements. |
| h1 | 80px | 400 | 1.1 | -0.025em | — | Crimson Pro Variable | Primary hero headline and major page statements. |
| h2 | 52px | 400 | 1 | -0.019em | — | Crimson Pro Variable | Large section headlines introducing key themes. |
| h3 | 45px | 400 | 1.1 | -0.022em | — | Crimson Pro Variable | Secondary feature and content-section headings. |
| h4 | 36px | 400 | 1.1 | -0.028em | — | Crimson Pro Variable | Smaller card or sub-section headings. |
| body | 18px | 400 | 1.33 | 0 | — | Crimson Text | Paragraphs and explanatory editorial copy. |
| caption | 12px | 400 | 1.6 | 0 | — | DM Mono | Small labels, captions, and supporting metadata. |
| button | 12px | 400 | 1.17 | 0 | — | DM Mono | Compact monospace navigation and CTA labels. |
| code | 12px | 400 | 1.6 | 0 | — | DM Mono | Utility-style or technical supporting text. |

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

## Spacing & layout

- Base unit **2px**, density **compact**.
- Scale (most used values): 1, 3, 10, 20, 40 px.
- Section rhythm 40px · element gap 10px · card padding — · max content width 1280px.

A wide desktop composition uses a measured maximum content width of 1280px. The first viewport is a full-bleed photographic hero with a floating pill-shaped navigation bar, a left-aligned headline, and supporting copy set to the right. Below, pale editorial sections alternate between split text layouts, broad media bands, and feature panels. Fine horizontal rules and compact supporting details organise content without dense card grids. Spacing follows a compact measured rhythm, but large headline and media areas preserve a spacious overall impression.

## Shape & elevation

- Radius: button `9999px` · card `20px` · media `40px` · link `20px` · xs `10px` · sm `20px` · md `40px` · pill `9999px`
- Shadow `inset` (button): `rgba(255, 255, 255, 0.4) 0px 2px 2px 0px inset, rgba(255, 255, 255, 0.4) 0px -2px 2px 0px inset`
- Motion: standard transition `0.4s cubic-bezier(0.22, 1, 0.36, 1)` on interactive elements.

The page is largely flat: pale sections rely on canvas contrast and fine hairlines instead of heavy card shadows. The navigation and CTAs use rounded pill silhouettes. The measured button treatment includes a subtle white inset highlight; image overlays add depth to photographic areas without introducing a broad shadow system.

## Imagery

Use cinematic workplace and research footage as the primary visual anchor, with people and laboratory environments framed in broad, immersive crops. Dark overlays improve white headline legibility over the hero. Supporting media includes panoramic video strips and product-interface imagery. Abstract red-and-blue graphics belong to focused feature artwork, not the site-wide background.

## Components

### Floating navigation

A translucent, pale pill bar overlays the hero, with a bold Ankar mark, compact DM Mono links, and a black Book a Demo pill.

### Cinematic hero

Full-bleed workplace video or photography, darkened for contrast, with a large white Crimson Pro headline and concise supporting copy.

### Primary CTA

Use compact 12px DM Mono labels in rounded pill buttons; the measured Book a Demo variant is black with white text.

### Editorial section header

Large regular-weight serif heading paired with concise body copy, often arranged in opposite columns on the pale canvas.

### Feature artwork panel

A broad, rounded visual panel may use the measured crimson and indigo accents; keep saturated colour contained within the artwork.

### Media strip

A wide, low-height crop of video or photography separates editorial sections and adds cinematic pacing.

### Trust indicators

Compact monospace labels and restrained badges communicate enterprise trust without competing with the main serif hierarchy.

### Measured component styles

- **Primary button** (“Explore The Platform”): background #f3f6f9 · text #ffffff · radius 20px · padding 0px 20px · 400 12px DM Mono · shadow rgba(255, 255, 255, 0.4) 0px 2px 2px 0px inset, rgba(255, 255, 255, 0.4) 0px -2p
- **Secondary button** (“Book a Demo”): background #000000 · text #ffffff · radius 20px · padding 0px 20px · 400 12px DM Mono
- **Link** (“Home”): transparent background · text #0000ee · radius 0px · padding 0px · 400 12px sans-serif
- **Card** (“Lifecycle - 1 Explore See the landscape ”): background #000000 · text #000000 · radius 20px · padding 0px · 400 12px sans-serif

## Do

- Use the pale blue-gray canvas for broad content sections.
- Set major statements in regular-weight editorial serif.
- Keep utility labels and buttons in compact monospace.
- Use cinematic media as a deliberate focal point.
- Reserve crimson and indigo for focused artwork.
- Keep rules and card treatments visually restrained.

## Don't

- Do not make vivid accent colours the dominant page background.
- Do not replace the editorial serif hierarchy with generic heavy sans headings.
- Do not crowd the page with dense cards or decoration.
- Do not place white copy on imagery without a darkening treatment.
- Do not add heavy shadows to otherwise flat sections.
- Do not turn navigation labels into oversized controls.

## Agent prompt

Build a new Ankar page with a calm, enterprise editorial character. Use Mist Canvas (#eef2f6) for broad content areas and Deep Ink (#000000) for primary text and key dark CTAs. Set major headlines in a regular, tightly tracked Crimson Pro-style serif; use Crimson Text-style serif for readable paragraphs and DM Mono-style text for compact navigation, captions, and buttons. Compose content in a wide layout with generous breathing room, split editorial sections, fine dividers, and rounded pill controls. Use cinematic research or workplace imagery for focal sections, darkening it where white text overlays. Keep Paper White (#ffffff) and Frost White (#f8fafb) for restrained contrast. Limit Signal Crimson (#ba484f) and Research Indigo (#2f3d86) to focused feature artwork rather than broad page surfaces. Maintain a flat, clean elevation system.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed workplace footage with overlay navigation, split headline and supporting copy, plus a lower trust-logo rail. | Explore platform CTA, Book a Demo CTA, Trust-logo proof | Floating pill navigation, Large white serif headline, Darkened cinematic image, Outlined logo rail |

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