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

# Heynds · Design System

> Dark canvas, luminous type, AI in a shortcut

**Theme:** dark · **Industry:** ai · **Source:** https://www.heynds.com/en · **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._

Heynds presents its AI writing and dictation app through a dark, editorial landing page with large serif headlines and restrained interface chrome. Product screenshots, compact feature cards, and warm gradient highlights turn the page into a clear tour from promise to proof and pricing.

## North star

Keep the dark page quiet and let editorial serif headlines, focused product evidence, and selective warm gradient accents carry the story.

## Overview

The visual strategy centers on a near-black canvas (#101216) and slightly lighter charcoal panels, creating contrast without the glare of pure black and white. Large, centered Kalice Trial serif headlines give the page an editorial character; Inter Variable handles navigation, body copy, cards, and controls with compact, legible clarity. Accent words and selected icons use a multicolor gradient, while the coral (#ff5733) is the recurring emphasis for phrases about instant AI, speed, and workflow. White primary buttons stand out against the dark field; secondary actions remain dark with fine borders. The long page is organized as a centered product narrative: hero and video, feature and privacy cards, paired use cases, workflow examples, pricing, FAQ, social proof, then footer. Interface imagery stays inside rounded, bordered frames, with generous dark breathing room around each section.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Canvas | `#101216` | `--color-midnight-canvas` | brand | Dominant page background behind the hero and long-form sections. |
| Charcoal Panel | `#1a1c23` | `--color-charcoal-panel` | surface | Main feature, testimonial, and footer surfaces; also used for secondary buttons. |
| Quiet Lavender | `#9fa5ba` | `--color-quiet-lavender` | neutral | Muted supporting copy and understated text links. |
| Slate Hairline | `#343946` | `--color-slate-hairline` | neutral | Fine outlines separating cards, navigation, and dark controls from the canvas. |
| Paper White | `#ffffff` | `--color-paper-white` | neutral | Primary headings and text, plus high-contrast primary CTA backgrounds. |
| Pale Periwinkle | `#c2c6d7` | `--color-pale-periwinkle` | neutral | Secondary copy and selectable audience tabs against dark surfaces. |
| Signal Coral | `#ff5733` | `--color-signal-coral` | accent | Emphasizes headline phrases, product icons, badges, and key speed or AI claims. |
| Graphite Control | `#23242a` | `--color-graphite-control` | surface | Deeper card and button surface variation within the dark interface. |
| Electric Blue | `#00aaff` | `--color-electric-blue` | accent | Appears at the cool end of the headline gradient, not as a broad UI fill. |
| Iced Lilac | `#e1e1fe` | `--color-iced-lilac` | accent | Pale gradient transition within highlighted display text. |
| Golden Glow | `#ffcb5c` | `--color-golden-glow` | accent | Warm middle stop in the gradient used for selected display lettering. |
| Neon Orchid | `#f384ff` | `--color-neon-orchid` | accent | Violet-pink endpoint in the text gradient; not a general interface surface. |

### Semantic aliases

`--color-canvas` → `#101216` (Midnight Canvas) · `--color-surface` → `#1a1c23` (Charcoal Panel) · `--color-surface-2` → `#23242a` (Graphite Control) · `--color-text` → `#ffffff` (Paper White) · `--color-text-muted` → `#9fa5ba` (Quiet Lavender) · `--color-text-subtle` → `#c2c6d7` (Pale Periwinkle) · `--color-border` → `#343946` (Slate Hairline) · `--color-accent` → `#ff5733` (Signal Coral) · `--color-accent-2` → `#00aaff` (Electric Blue) · `--color-accent-3` → `#ffcb5c` (Golden Glow)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#101216` | 18.75:1 | AAA |
| `#ffffff` | `#1a1c23` | 17.01:1 | AAA |
| `#ffffff` | `#23242a` | 15.47:1 | AAA |
| `#9fa5ba` | `#101216` | 7.65:1 | AAA |
| `#9fa5ba` | `#1a1c23` | 6.94:1 | AA |
| `#9fa5ba` | `#23242a` | 6.31:1 | AA |
| `#c2c6d7` | `#101216` | 11.03:1 | AAA |
| `#c2c6d7` | `#1a1c23` | 10.01:1 | AAA |
| `#c2c6d7` | `#23242a` | 9.1:1 | AAA |
| `#ff5733` | `#101216` | 5.95:1 | AA |

### Gradients

- `linear-gradient(100deg, rgb(0, 170, 255) 0%, rgb(225, 225, 254) 28%, rgb(255, 203, 92) 52%, rgb(255, 87, 51) 75%, rgb(243, 132, 255) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Inter Variable | `--font-body` | webfont | 400, 500, 700, 600 | Navigation, body copy, cards, buttons, labels, and compact supporting headings. | Inter |
| Kalice Trial | `--font-display` | webfont | 400 | Display and hero headlines, plus editorial section titles. | Cormorant Garamond |

- **Inter Variable:** Mostly regular weights, with medium navigation and CTA labels; sentence case and neutral tracking.
- **Kalice Trial:** Regular serif with graceful contrast; centered, mixed-case display lines, occasionally accented with gradient.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 80px | 400 | 1.1 | 0 | — | Kalice Trial | Oversized editorial hero or headline moments. |
| h1 | 64px | 400 | 1.12 | 0 | — | Kalice Trial | Primary hero title and major page statement. |
| h2 | 48px | 400 | 1 | 0 | — | Inter Variable | Centered section titles throughout the product narrative. |
| h3 | 40px | 500 | 1.15 | 0 | — | Inter Variable | Feature and content group headings. |
| h4 | 36px | 500 | 1.11 | 0 | — | Inter Variable | Card headings and smaller subsection titles. |
| body | 16px | 400 | 1.25 | 0 | — | Inter Variable | Feature explanations, testimonials, and supporting prose. |
| caption | 14px | 400 | 1.25 | 0 | — | Inter Variable | Small clarifiers, metadata, and supporting labels. |
| button | 16px | 400 | 1.25 | 0 | — | Inter Variable | Primary and secondary call-to-action labels. |
| nav | 16px | 500 | 1.25 | 0 | — | Inter Variable | Top navigation and interactive audience tabs. |
| link | 14px | 400 | 1.25 | 0 | — | Inter Variable | Footer and inline secondary links. |
| code | 12px | 400 | 1.33 | 0 | — | Geist Mono Variable | Compact technical or code-like utility labels. |

## Spacing & layout

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

The page uses a centered content column, with measured page max width of 830px and generous negative space around it. The hero is tightly stacked and center-aligned, followed by framed product media and alternating centered grids or paired cards. Feature and FAQ content stays compact against the broad dark canvas. Sections repeat with a measured 48px section gap and an 8px element rhythm, while the footer switches to a three-column link arrangement. Preserve the long, orderly scroll and avoid filling every available area.

## Shape & elevation

- Radius: button `8px` · card `16px` · media `50%` · nav `8px` · xs `4px` · sm `6px` · md `8px` · lg `12px` · xl `16px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.35) 0px 32px 96px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is mostly flat: dark surface changes and fine slate borders define cards more than shadows. Cards use measured rounded treatments, while the large media and interface examples sit as distinct framed layers. Reserve stronger depth for featured media or overlays; avoid bright glows and heavy drop shadows across the page.

## Imagery

Product UI is the primary visual evidence: screen recordings, app mockups, and workflow examples appear inside dark, rounded frames. The hero includes a large video-style product window; later use-case panels pair interface screenshots with concise text. Small portraits and app icons provide social proof and compatibility context. Keep screenshots legible and framed, while treating saturated colors inside app mockups as content imagery rather than as the site palette.

## Components

### Top navigation

A centered dark bar with a fine border, brand mark, text links, language selector, and white Get Heynds CTA.

### Hero CTA pair

White filled primary action with dark text beside a charcoal Try for free button outlined in slate.

### Product media frame

Large rounded dark window holding a screen recording or app interface, visually separated from the canvas.

### Feature cards

Compact charcoal cards with fine borders, small coral icon accents, short headings, and muted explanatory copy.

### Paired workflow panels

Two framed product-use examples with screenshots, concise descriptions, and restrained in-card actions.

### FAQ accordion

Stacked dark question rows with fine outlines, white question text, and a small trailing disclosure chevron.

### Testimonial and metric cards

Dark outlined cards combine coral percentage highlights or short quotes with compact user attribution.

### Footer link groups

A charcoal footer with brand mark, three compact link columns, and a low-emphasis copyright row.

### Measured component styles

- **Primary button** (“Get Heynds”): background #ffffff · text #101216 · radius 8px · padding 8px 40px · 500 16px Inter Variable
- **Secondary button** (“Product Managers”): transparent background · text #c2c6d7 · border 1px solid · radius 8px · padding 8px 20px · 400 16px Inter Variable
- **Link** (“Study”): transparent background · text #9fa5ba · radius 0px · padding 0px · 400 14px Inter Variable
- **Input** (“Français English Deutsch Español Portugu”): transparent background · text #ffffff · radius 0px · padding 0px 8px 0px 0px · 500 16px Inter Variable
- **Card** (“What is Heynds and how does it work? Hey”): background #1a1c23 · text #ffffff · border 1px solid #343946 · radius 12px · padding 20px 0px · 400 16px Inter Variable
- **Navigation item** (“Blog Download Français English Deutsch E”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px Inter Variable

## Do

- Use #101216 as the dominant canvas.
- Set major statements in an editorial serif.
- Use Inter for navigation, cards, and controls.
- Reserve the full spectrum gradient for selected headline words.
- Frame screenshots with dark panels and fine borders.
- Make primary actions white and secondary actions outlined.
- Leave visible dark breathing room between content groups.

## Don't

- Do not turn the page into a bright or white interface.
- Do not apply the gradient to every card or button.
- Do not use product mockup colors as the site-wide palette.
- Do not replace editorial headlines with generic heavy sans-serif.
- Do not add thick borders or conspicuous shadows to every panel.
- Do not crowd the centered sections with extra columns.
- Do not make supporting copy compete with the main headline.

## Agent prompt

Build a new page in the Heynds visual style: use Midnight Canvas (#101216) as the broad background, with Charcoal Panel (#1a1c23) and Graphite Control (#23242a) for framed content. Use Paper White (#ffffff) for key text and primary CTA fills; keep secondary text in Quiet Lavender (#9fa5ba) or Pale Periwinkle (#c2c6d7). Set display headlines in an elegant editorial serif and use Inter-style sans serif for navigation, prose, and controls. Highlight only selected headline words with Signal Coral (#ff5733) or the measured blue-to-orchid gradient. Center content in a restrained column, build sections from compact bordered cards, and use product screenshots as evidence inside rounded dark frames. Keep the overall page quiet, spacious, and readable; avoid decorative gradients, heavy shadows, and dense layouts.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | feature-split | Dark centered content band with a twelve-column measured grid and product examples within a narrow page column. | before-and-after proof, speed comparison, workflow examples | centered serif headings, rounded feature cards, framed product screenshots, coral emphasis |
| 2 | footer | Charcoal footer arranged in three compact link columns with brand and copyright rows. | grouped site navigation, legal and support access | three-column links, brand mark, muted copyright |

## Source CSS custom properties (selected)

```css
--background: 220 16% 7.5%;
--foreground: 0 0% 100%;
--card-foreground: 0 0% 100%;
--popover-foreground: 0 0% 100%;
--primary: 0 0% 100%;
--primary-foreground: 220 16% 7.5%;
--secondary: 231.4 9.1% 15.1%;
--secondary-foreground: 0 0% 100%;
--muted-foreground: 224 13% 68%;
--accent: 224 14.6% 20.2%;
--accent-foreground: 0 0% 100%;
--destructive-foreground: 356.1 100% 76.1%;
--border: 223.3 14.8% 23.9%;
--radius: .5rem;
```

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