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

# Stark · Design System

> Accessibility software with a vivid, confident visual voice

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

Stark pairs a striking violet hero with a warm ivory canvas, oversized white headline typography, and vivid product-interface imagery. Below the hero, calm centered sections, yellow-highlighted headings, pastel cards, and a deep navy footer make a long SaaS story feel structured and approachable.

## North star

Pair an energetic violet product moment with calm ivory storytelling, using bold type and real interface imagery to keep every section clear.

## Overview

Stark’s visual strategy starts with a full-bleed saturated violet hero, setting oversized white display type against the brand’s quieter warm ivory canvas. Deep navy anchors headings and body copy on light sections, while bright yellow marker-like highlights draw attention to selected phrases and calls to action. Teal and pale lavender appear as large rounded feature surfaces rather than competing page backgrounds. ArminGrotesk supplies the rounded, heavy headline voice and readable supporting copy; RobotoMono is reserved for compact uppercase eyebrow labels. The layout is centered and spacious, with product screenshots and platform illustrations breaking up otherwise restrained text sections. Repeated centered feature stories lead into compact multi-column grids, followed by a more decorative pastel role card and a dark navy footer. Keep the page flat and graphic: rely on color blocks, generous breathing room, rounded cards, and layered product visuals instead of ornamental borders or heavy shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Ink | `#10284b` | `--color-midnight-ink` | brand | Primary heading and body text on ivory; also the full-width footer background with light footer links. |
| Gallery Ivory | `#f6f6eb` | `--color-gallery-ivory` | neutral | Main page canvas behind the centered feature stories, product visuals, and lower content sections. |
| Electric Violet | `#381fd1` | `--color-electric-violet` | brand | Full-bleed hero background, primary CTA fill, prominent links, and selective headline emphasis. |
| Marker Gold | `#fedb63` | `--color-marker-gold` | accent | Secondary CTA fill and brush-like highlight bands behind selected headings and phrases. |
| Pure White | `#ffffff` | `--color-pure-white` | neutral | Hero headline and navigation on violet, plus text on dark or violet buttons and surfaces. |
| Seafoam | `#99d6cc` | `--color-seafoam` | surface | Large rounded benefit card surface in the lower story; its dark copy is distinct from the ivory canvas. |
| Lavender Mist | `#faf5ff` | `--color-lavender-mist` | surface | Pale rounded department card surface near the bottom, paired with violet accents and dark text. |

### Semantic aliases

`--color-canvas` → `#f6f6eb` (Gallery Ivory) · `--color-surface` → `#10284b` (Midnight Ink) · `--color-surface-2` → `#99d6cc` (Seafoam) · `--color-surface-3` → `#faf5ff` (Lavender Mist) · `--color-text` → `#10284b` (Midnight Ink) · `--color-text-muted` → `#f6f6eb` (Gallery Ivory) · `--color-text-subtle` → `#ffffff` (Pure White) · `--color-accent` → `#381fd1` (Electric Violet) · `--color-accent-2` → `#fedb63` (Marker Gold) · `--color-accent-3` → `#99d6cc` (Seafoam) · `--color-on-accent` → `#ffffff` (Pure White)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#10284b` | `#f6f6eb` | 13.52:1 | AAA |
| `#10284b` | `#99d6cc` | 9:1 | AAA |
| `#10284b` | `#faf5ff` | 13.71:1 | AAA |
| `#f6f6eb` | `#10284b` | 13.52:1 | AAA |
| `#f6f6eb` | `#99d6cc` | 1.5:1 | fail |
| `#f6f6eb` | `#faf5ff` | 1.01:1 | fail |
| `#ffffff` | `#f6f6eb` | 1.09:1 | fail |
| `#ffffff` | `#10284b` | 14.71:1 | AAA |
| `#ffffff` | `#99d6cc` | 1.63:1 | fail |
| `#ffffff` | `#faf5ff` | 1.07:1 | fail |

### Gradients

- `linear-gradient(to right bottom, rgba(0, 0, 0, 0) 50%, rgb(254, 219, 99) 50%), linear-gradient(rgb(254, 219, 99), rgb(254, 219, 99)), linear-gradient(to left top, rgba(0, 0, 0, 0) 50%, rgb(254, 219, 99) 50%)`
- `linear-gradient(to right, rgb(255, 255, 255) 50%, rgb(16, 40, 75) 50%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ArminGrotesk | `--font-body` | webfont | 400, 900, 600, 500 | Display, headings, body copy, navigation, and buttons throughout the page. | DM Sans |
| RobotoMono | `--font-mono` | webfont | 700 | Compact uppercase eyebrow and code-like labels above section headings. | Roboto Mono |

- **ArminGrotesk:** Use very heavy weights for display and headings; body stays regular. Buttons and captions are uppercase, bold, and tracked.
- **RobotoMono:** Bold monospaced labels use conspicuous letter spacing and uppercase styling.

### Type scale — Perfect Fifth (ratio ≈ 1.47, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 110px | 900 | 1.1 | -0.02em | — | ArminGrotesk | Oversized hero and display-scale headline treatment. |
| h1 | 56px | 900 | 1.1 | -0.01em | — | ArminGrotesk | Main page and primary section headings. |
| h2 | 48px | 900 | 1.1 | -0.01em | — | ArminGrotesk | Large centered section headings. |
| h3 | 24px | 900 | 1.1 | 0 | — | ArminGrotesk | Feature, card, and benefit headings. |
| h4 | 20px | 400 | 1.5 | 0 | — | ArminGrotesk | Smaller supporting section or card titles. |
| body | 16px | 400 | 1.7 | 0 | — | ArminGrotesk | Feature descriptions and explanatory paragraph copy. |
| caption | 14px | 900 | 1.5 | 0.08em | uppercase | ArminGrotesk | Compact uppercase labels and category captions. |
| button | 14px | 900 | 1.43 | 0.08em | uppercase | ArminGrotesk | Uppercase CTA and utility button labels. |
| nav | 110px | 900 | 1.1 | -0.02em | — | ArminGrotesk | Hero-scale display navigation role in the measured styles; visible site navigation is compact. |
| eyebrow | 16px | 700 | 1.4 | 0.08em | uppercase | RobotoMono | Monospaced uppercase section labels such as platform and workflow markers. |
| code | 16px | 700 | 1.4 | 0.08em | uppercase | RobotoMono | Monospaced uppercase technical or compact interface labels. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 6, 8, 12, 16, 17, 24, 32, 40, 48, 56, 64, 80, 144 px.
- Section rhythm 64px · element gap 16px · card padding 64px · max content width 1200px.

Use a centered content column capped at the measured 1200px page width, with comfortable density and clear separation between stories. The first viewport is a full-bleed hero; the rest sits on the ivory canvas, mostly centered with a single main column. Use a four-column platform feature area and two-column lower card layouts where measured. Maintain the measured 64px section gap, 16px element gap, and 64px card padding as the reference rhythm, not as arbitrary decoration.

## Shape & elevation

- Radius: button `6px` · card `40px` · link `20px` · xs `6px` · sm `20px` · md `40px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s ease` on interactive elements.

The design is primarily flat, with bold section color fields and rounded cards doing the structural work. The screenshots and hero UI collage provide the main sense of layering, with restrained image shadows where visible. Avoid adding decorative borders or strong card shadows; measured shadow data is empty.

## Imagery

Use product-interface screenshots as the key proof point: layered desktop and mobile views, reports, charts, and collaboration UI. Pair these with colorful illustrated platform and security graphics rather than lifestyle photography. The hero’s interface collage sits over a violet-to-magenta visual field with chart-like bars; later visuals float in open ivory space. Keep images crisp, large enough to read as software, and integrated with the surrounding color rather than boxed into generic frames.

## Components

### Primary CTA

Violet fill (#381fd1), white label, compact 6px radius, and measured 24px horizontal padding; use as the primary action on ivory.

### Secondary CTA

Marker Gold (#fedb63) fill with Midnight Ink (#10284b) text and the same compact button treatment.

### Hero navigation

Compact white navigation and utility actions sit across the top of the violet hero, with a white request-demo control.

### Highlight heading

Dark, heavy heading text with a bright yellow marker-like band behind selected words, not a full heading panel.

### Platform feature grid

Four compact feature columns pair illustrated icons, uppercase eyebrow labels, violet headings, and concise body copy.

### Benefit card

Seafoam surface with 40px measured card radius and 64px padding; arrange four benefits in a two-column layout.

### Department links

Lavender card with 20px measured link radius and violet text; emphasize one role with a pale filled row.

### Footer

Full-width Midnight Ink background with compact white link columns and a small muted copyright line.

### Measured component styles

- **Primary button** (“Get started for free”): background #381fd1 · text #ffffff · border 2px solid · radius 6px · padding 6px 24px · 600 16px ArminGrotesk
- **Secondary button** (“Sign up for free”): background #fedb63 · text #10284b · border 2px solid · radius 6px · padding 6px 24px · 600 16px ArminGrotesk
- **Link** (“Developers Test and audit your code from”): transparent background · text #381fd1 · radius 20px · padding 24px · 500 16px ArminGrotesk
- **Card** (“WHY STARK? Build and ship inclusive soft”): background #99d6cc · text #000000 · radius 40px · padding 64px · 400 16px ArminGrotesk
- **Navigation item** (“USE CASES PRICING SUPPORT RESOURCES LOG ”): transparent background · text #ffffff · radius 0px · padding 0px · 400 16px ArminGrotesk

## Do

- Use Electric Violet (#381fd1) as the defining hero field.
- Keep the main content canvas Gallery Ivory (#f6f6eb).
- Use Midnight Ink (#10284b) for light-section headings and copy.
- Highlight selected heading phrases with Marker Gold (#fedb63).
- Let product screenshots and custom illustrations carry the visual proof.
- Reserve Seafoam and Lavender Mist for distinct large card surfaces.

## Don't

- Do not turn every section into a colored panel.
- Do not replace the warm ivory canvas with stark white.
- Do not use yellow as a general page background.
- Do not add heavy shadows or ornamental borders.
- Do not crowd the centered content with dense, wide text blocks.
- Do not use lifestyle photography in place of software visuals.

## Agent prompt

Build a new SaaS page in Stark’s visual style. Start with a full-bleed Electric Violet (#381fd1) hero, compact white navigation, an oversized heavy headline, concise centered copy, and a contrasting Marker Gold (#fedb63) CTA. Continue on a Gallery Ivory (#f6f6eb) canvas with Midnight Ink (#10284b) headings, spacious centered feature stories, and selective yellow marker highlights. Use ArminGrotesk or a close DM Sans substitute for rounded, weighty display and readable body text; use tracked uppercase Roboto Mono for small eyebrows. Include crisp, layered product UI screenshots and purpose-made illustrations. Build distinct Seafoam (#99d6cc) and Lavender Mist (#faf5ff) rounded cards, not repeated generic panels. Keep the layout comfortable, use clear column groupings, and finish with a Midnight Ink footer.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed violet hero with compact top navigation, centered oversized headline, CTA, and layered product UI collage. | Hero CTA, Top navigation, Product proof | Violet field, White display type, Chart-like visual, Layered screenshots |
| 2 | product-showcase | Centered headline and short copy on ivory, with the hero product imagery bridging into the section. | Value proposition, Trust proof | Ivory canvas, Yellow heading highlight, Customer logo row |
| 3 | feature-grid | Centered section title above four illustrated feature columns and a centered primary CTA. | Feature discovery, Platform overview, Get-started CTA | Four-column grid, Illustrated icons, Violet feature headings |
| 4 | product-showcase | Centered product screenshot above a heading, supporting paragraph, and trial CTA. | Product proof, Team benefit, Trial CTA | Floating interface, Yellow highlight, Open ivory space |
| 5 | integrations | Platform and tool icons sit above a centered highlighted heading, explanatory copy, and CTA. | Integration reassurance, Get-started CTA | Floating app icons, Yellow heading band, Centered composition |
| 6 | feature-split | Security illustration above a centered highlighted heading, compact copy, and trial CTA. | Trust building, Security proof, Trial CTA | Orbit-style illustration, Outlined security labels, Ivory canvas |
| 7 | feature-grid | Large Seafoam rounded card with a centered title and four benefits in a two-column grid. | Benefit scan, Four-point value summary | Seafoam card, Two-column grid, Small illustrated icons |
| 8 | category-nav | Lavender rounded content card over decorative violet and textured shapes, with department links in a vertical list. | Role-based navigation, Department selection | Lavender surface, Selected role row, Decorative color shapes |
| 9 | footer | Full-width navy footer with four link columns, followed by security links, social icons, and a compact copyright row. | Multi-column navigation, Policy access, Social links | Midnight Ink band, White link text, Compact column grid |

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