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

# Control · Design System

> A calm canvas for expressive creative tools

**Theme:** light · **Industry:** design · **Source:** https://cntrl.site/ · **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._

Control presents its browser-based website builder through oversized typography, generous white space, and a long sequence of product demonstrations. Restrained black-and-white foundations are punctuated by a pale blue-gray feature band and vivid, selectively applied calls to action.

## North star

Let oversized type and generous white space frame real product previews, using bright accent colors only to make actions unmistakable.

## Overview

The page uses Gallery White (#ffffff) as its dominant canvas, letting oversized black typography and large gaps establish a quiet, editorial first impression. Ink (#000000) anchors headings, copy, the FAQ and the closing section; pale Blue Haze (#d2dcdd) forms a recurring backdrop for feature demonstrations. Melange carries most of the display and body hierarchy, with Favorit Mono reserved for compact uppercase controls and utility labels. A small amount of Goudy Bookletter 1911 adds a contrasting literary note. The hero is centered and sparse, while later product examples sit in a broad, measured content area with varied single- and two-column arrangements. Interface screenshots, browser previews and video frames supply the color and texture, rather than decorative illustration. Vivid green and yellow mark key actions; the warm off-white button is a quieter alternative. Sections alternate between expansive white space, a pale feature band, a cream template showcase and a stark black FAQ/footer, maintaining rhythm without heavy borders or shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Ink | `#000000` | `--color-ink` | brand | Primary typography and inverse surface; dominates the FAQ and final CTA/footer. |
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Main page canvas and the open backdrop around the hero and feature demonstrations. |
| Blue Haze | `#d2dcdd` | `--color-blue-haze` | surface | Pale blue-gray feature band and recurring frames behind product previews. |
| Soft Graphite | `#8f8f8f` | `--color-soft-graphite` | semantic | Muted text, including subdued supporting copy in the light sections. |
| Electric Leaf | `#00eb40` | `--color-electric-leaf` | accent | Primary TRY FREE buttons and small action highlights against light surfaces. |
| Studio Yellow | `#ffdc4d` | `--color-studio-yellow` | accent | Secondary ANIMATE NOW and tutorial-oriented calls to action. |
| Warm Ash | `#c6c6c0` | `--color-warm-ash` | semantic | Low-emphasis utility links and muted text, particularly REACH OUT. |
| Quiet Silver | `#e4e4e4` | `--color-quiet-silver` | semantic | Subdued text detail; treat as a minor typographic tone, not a defining surface. |
| Pale Pewter | `#bababa` | `--color-pale-pewter` | semantic | Secondary text and occasional section detail, below black in visual priority. |
| Linen | `#f4f3ed` | `--color-linen` | surface | Warm off-white WATCH TUTORIAL button and the contrasting templates section. |
| Pool Cyan | `#01dff1` | `--color-pool-cyan` | accent | Rare small highlight; secondary to the green and yellow CTA colors. |
| Charcoal Rule | `#282828` | `--color-charcoal-rule` | neutral | Subtle dark hairlines and borders; use sparingly against the mostly flat layout. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#d2dcdd` (Blue Haze) · `--color-surface-2` → `#000000` (Ink) · `--color-surface-3` → `#f4f3ed` (Linen) · `--color-text` → `#000000` (Ink) · `--color-text-muted` → `#8f8f8f` (Soft Graphite) · `--color-text-subtle` → `#c6c6c0` (Warm Ash) · `--color-border` → `#282828` (Charcoal Rule) · `--color-accent` → `#00eb40` (Electric Leaf) · `--color-accent-2` → `#ffdc4d` (Studio Yellow) · `--color-accent-3` → `#01dff1` (Pool Cyan) · `--color-on-accent` → `#000000` (Ink)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#000000` | `#ffffff` | 21:1 | AAA |
| `#000000` | `#d2dcdd` | 15.02:1 | AAA |
| `#000000` | `#f4f3ed` | 18.89:1 | AAA |
| `#8f8f8f` | `#ffffff` | 3.23:1 | AA-large |
| `#8f8f8f` | `#d2dcdd` | 2.31:1 | fail |
| `#8f8f8f` | `#000000` | 6.49:1 | AA |
| `#8f8f8f` | `#f4f3ed` | 2.91:1 | fail |
| `#c6c6c0` | `#ffffff` | 1.72:1 | fail |
| `#c6c6c0` | `#d2dcdd` | 1.23:1 | fail |
| `#c6c6c0` | `#000000` | 12.24:1 | AAA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Melange | `--font-body` | webfont | 400, 500 | Primary display, headings and body copy throughout the page. | Manrope |
| Favorit Mono | `--font-mono` | webfont | 400 | Compact CTA labels, code-like captions and uppercase utility text. | Space Mono |
| Goudy Bookletter 1911 | `--font-goudy-bookletter-1911` | webfont | 400 | Occasional expressive feature-heading treatment. | Garamond |

- **Melange:** Use regular and medium weights; large headings are tightly tracked, with clean sentence case.
- **Favorit Mono:** Regular weight, uppercase labels, and a technical, tightly sized interface tone.
- **Goudy Bookletter 1911:** Regular serif provides a deliberate contrast to the geometric sans and mono.

### Type scale — Golden Ratio (ratio ≈ 1.628, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 183px | 400 | normal | -0.048em | — | Melange | Oversized Control wordmark treatment in the hero. |
| h1 | 146px | 500 | 1.03 | -0.055em | — | Melange | Primary hero statement and major page headline. |
| h2 | 102px | 400 | 0.7 | -0.015em | — | Melange | Large feature and section headlines. |
| h3 | 90px | 400 | 0.94 | -0.02em | — | Goudy Bookletter 1911 | Occasional serif-led feature headline. |
| h4 | 71px | 500 | 1.07 | -0.051em | — | Melange | Secondary feature and promotional headlines. |
| body | 16px | 400 | 1.31 | -0.037em | — | Melange | Feature explanations, FAQ answers and supporting copy. |
| caption | 11px | 400 | 1.82 | 0 | — | Melange | Compact media captions and supporting labels. |
| code | 10px | 400 | 1.2 | 0.02em | uppercase | Favorit Mono | Uppercase mono labels, utility copy and compact interface text. |

## Spacing & layout

- Base unit **2px**, density **spacious**.
- Scale (most used values): 1, 10, 20, 29, 147, 173 px.
- Section rhythm 173px · element gap 29px · card padding — · max content width 1248px.

A spacious single-page flow with a measured maximum content width of 1248px. The hero is centered, while feature copy and media align to a broad content grid that shifts between full-width showcases and paired examples. Sections have pronounced vertical separation; content is sparse rather than card-dense. The page moves from white to a blue-gray feature band, back to white, then a warm template area and black FAQ/footer. Keep alignment intentional and let large margins provide the rhythm.

## Shape & elevation

- Radius: media `8px` · xs `8px`
- Shadow `inset` (button): `rgb(0, 0, 0) 0px 0px 0px 0px, rgb(0, 0, 0) 0px 0px 0px 0px inset`
- Motion: standard transition `0.25s ease` on interactive elements.

The design is mostly flat: avoid drop shadows and card-heavy elevation. Separate areas through canvas changes, generous whitespace and the occasional fine dark rule. Product previews may overlap within their pale showcase panels, while media frames use a restrained measured corner radius. Buttons remain simple, crisp rectangles without prominent shadow treatment.

## Imagery

Use product UI as the main visual content: browser windows, website mockups, component libraries, templates and tutorial previews. Frame media in pale blue-gray panels, often with softly rounded corners, and allow some previews to overlap or sit within a larger showcase. Video and screen captures should feel like evidence of the tool in use, not generic stock imagery. The template section uses a collage of distinct site examples.

## Components

### Minimal header

Place a compact brand mark left, a small centered descriptive line and LOGIN plus TRY FREE actions at right.

### Hero wordmark

Center a very large Melange wordmark above a wide media preview, followed by the supporting headline and a green CTA.

### Product showcase

Pair concise feature copy with large pale blue-gray media frames; vary between full-width previews and two-column examples.

### Action buttons

Use square-corner buttons with Favorit Mono uppercase labels; green for TRY FREE, yellow for ANIMATE NOW, and Linen for WATCH TUTORIAL.

### Template collage

Set a bold headline and concise copy beside a full-bleed-style collection of varied website template previews on a warm surface.

### FAQ accordion

Use a black section with a clear heading, a vertical list of question rows and restrained horizontal separators.

### Closing CTA

Finish on black with oversized centered type, a compact green action and atmospheric product-related visuals.

### Measured component styles

- **Primary button** (“TRY FREE TRY FREE”): background #00eb40 · text #000000 · radius 0px · padding 0px 20px · 400 12px Favorit Mono · uppercase · shadow rgb(0, 0, 0) 0px 0px 0px 0px, rgb(0, 0, 0) 0px 0px 0px 0px inset
- **Secondary button** (“ANIMATE NOW! ANIMATE NOW!”): background #ffdc4d · text #000000 · radius 0px · padding 0px 20px · 400 12px Favorit Mono · uppercase · shadow rgb(0, 0, 0) 0px 0px 0px 0px, rgb(0, 0, 0) 0px 0px 0px 0px inset
- **Link** (“LOGIN LOGIN”): transparent background · text #000000 · radius 0px · padding 0px · 400 16px Arial

## Do

- Keep the primary canvas white and the overall composition spacious.
- Use oversized, tightly tracked sans-serif headlines.
- Show real-looking product interfaces in pale blue-gray frames.
- Reserve mono uppercase text for compact actions and utility labels.
- Use green for the primary action and yellow for selected secondary actions.
- Create section rhythm with whitespace and restrained background changes.

## Don't

- Do not fill the page with dense cards or decorative UI chrome.
- Do not use gradients as a defining brand treatment.
- Do not spread accent colors across large areas without evidence.
- Do not add prominent shadows to otherwise flat components.
- Do not replace product previews with generic stock photography.
- Do not make utility labels compete with the large headlines.

## Agent prompt

Build a new page in Control’s spacious, editorial design-tool style. Use Gallery White (#ffffff) as the main canvas and Ink (#000000) for strong type and dark sections. Set oversized, tightly tracked display headlines in a Melange-like sans, with compact uppercase mono labels and clear hierarchy. Organize content in a broad centered layout, but leave generous open space between sections. Present product work through browser previews and interface imagery inside Blue Haze (#d2dcdd) frames, alternating wide showcases with paired examples. Make the primary action Electric Leaf (#00eb40), using Studio Yellow (#ffdc4d) sparingly for secondary actions and Linen (#f4f3ed) for a quieter button. Keep surfaces flat, borders restrained, and imagery credible. Let each section feel distinct through alignment and background bands rather than card decoration.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Sparse white hero; compact header above centered wordmark, large media and supporting CTA. | login access, primary free-trial CTA | minimal header, oversized wordmark, centered media |
| 2 | other | Full-width pale blue-gray band with expressive text behind a centered product preview. | feature overview, product preview | tinted section band, large serif-like background copy, layered media |
| 3 | product-showcase | Long white content area with a broad grid of alternating full-width and paired media showcases. | feature discovery, tutorial links, component preview | large product frames, paired showcases, curved type detail |
| 4 | gallery | Warm light section with text at left and a full-bleed template collage at right. | browse templates, template discovery | asymmetric split, site-preview collage, green CTA |
| 5 | faq | Black full-width section with heading at left and a vertically stacked question list at right. | expandable questions, answer discovery | inverse surface, fine row separators, plus indicators |
| 6 | footer | Black closing area with compact developer links above a large centered CTA composition. | documentation access, final conversion CTA | utility link columns, oversized closing headline, green action |

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