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

# REKKI · Design System

> Dark product storytelling with a vivid blue signal

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

REKKI pairs an all-black canvas and oversized white typography with a vivid blue demo CTA. Product interface imagery, customer proof, and compact metrics make the homepage feel operational and product-led.

## North star

Keep the page predominantly black and let crisp white typography, real product proof, and one vivid blue CTA carry the story.

## Overview

The page is built on a near-continuous black canvas, using white for large headlines and key interface labels, muted gray for navigation and supporting copy, and saturated blue as the main conversion signal. Dark charcoal surfaces separate cards and interface areas without breaking the overall monochrome field. Oversized, tightly tracked Diatype headings create an editorial hierarchy, while small uppercase captions in OCD-GARRI add a technical, label-like counterpoint. A centered hero stacks its headline, short description, and pill-shaped CTA over subdued workplace imagery. The long page alternates product screenshots, proof points, statistics, and testimonial cards, keeping each section legible against black. Photography and interface mockups provide most of the visual variety; gradients and overlays soften transitions and maintain readable contrast. Generous vertical breathing room offsets dense product details, while rounded cards and controls keep the technology approachable.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Canvas Black | `#000000` | `--color-canvas-black` | brand | Dominant page canvas and hero field; also anchors dark media overlays and section backgrounds. |
| Signal White | `#ffffff` | `--color-signal-white` | neutral | Primary headline, body, navigation, and high-contrast text on the black canvas. |
| Slate Gray | `#87898d` | `--color-slate-gray` | neutral | Muted navigation, supporting copy, and secondary labels against black. |
| Graphite Panel | `#2b2c2e` | `--color-graphite-panel` | surface | Secondary dark surface used for supporting content areas. |
| Night Navy | `#040910` | `--color-night-navy` | surface | Deep blue-black card surface, including the benefits grid. |
| REKKI Blue | `#0063e1` | `--color-rekki-blue` | accent | Primary demo and conversion button background; a concentrated action accent. |
| Iron Gray | `#272828` | `--color-iron-gray` | surface | Dark testimonial and supporting card surfaces. |
| Soft Silver | `#989898` | `--color-soft-silver` | neutral | Minor measured heading and text variation; use sparingly for secondary text. |
| Black Fade | `#030304` | `--color-black-fade` | surface | Near-black tone within measured gradients and image treatments, not a defining solid brand surface. |
| Charcoal Fade | `#0e0e0f` | `--color-charcoal-fade` | surface | Subtle gradient and text tone within dark overlays, not a prominent standalone UI color. |
| Shadow Graphite | `#212223` | `--color-shadow-graphite` | surface | Intermediate near-black gradient tone used for tonal transitions. |
| Coal Fade | `#1d1e1f` | `--color-coal-fade` | surface | Intermediate gradient tone that blends dark surfaces into the canvas. |
| Deep Charcoal | `#18191a` | `--color-deep-charcoal` | surface | Subtle gradient shade within dark image or surface treatments. |
| Midnight Gray | `#131314` | `--color-midnight-gray` | surface | Near-black gradient transition, visually subordinate to the black canvas. |
| Ink Fade | `#0a0a0b` | `--color-ink-fade` | surface | Near-black gradient stop used for soft dark transitions. |
| Edge Black | `#060707` | `--color-edge-black` | surface | Subtle gradient edge tone; not a defining UI color. |

### Semantic aliases

`--color-canvas` → `#000000` (Canvas Black) · `--color-surface` → `#2b2c2e` (Graphite Panel) · `--color-surface-2` → `#040910` (Night Navy) · `--color-surface-3` → `#272828` (Iron Gray) · `--color-text` → `#ffffff` (Signal White) · `--color-text-muted` → `#87898d` (Slate Gray) · `--color-accent` → `#0063e1` (REKKI Blue) · `--color-on-accent` → `#000000` (Canvas Black)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffffff` | `#000000` | 21:1 | AAA |
| `#ffffff` | `#2b2c2e` | 13.98:1 | AAA |
| `#ffffff` | `#040910` | 19.97:1 | AAA |
| `#ffffff` | `#272828` | 14.78:1 | AAA |
| `#87898d` | `#000000` | 5.99:1 | AA |
| `#87898d` | `#2b2c2e` | 3.99:1 | AA-large |
| `#87898d` | `#040910` | 5.7:1 | AA |
| `#87898d` | `#272828` | 4.22:1 | AA-large |
| `#0063e1` | `#000000` | 3.87:1 | AA-large |
| `#0063e1` | `#2b2c2e` | 2.58:1 | fail |

### Gradients

- `linear-gradient(rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.01) 6.66667%, rgba(0, 0, 0, 0.04) 13.3333%, rgba(0, 0, 0, 0.08) 20%, rgba(0, 0, 0, 0.15) 26.6667%, rgba(0, 0, 0, 0.23) 33.3333%, rgba(0, 0, 0, 0.33) 40%, rgba(0, 0, 0,`
- `linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.93) 11.7712%, rgba(0, 0, 0, 0.85) 21.3151%, rgba(0, 0, 0, 0.77) 28.9776%, rgba(0, 0, 0, 0.68) 35.1042%, rgba(0, 0, 0, 0.6) 40.0407%, rgba(0, 0, 0, 0.51) 44.1327%, rgba(0, `

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Diatype REKKI Regular | `--font-body` | webfont | 400 | Primary body copy, navigation, and regular-weight headings. | Inter |
| Diatype REKKI Medium | `--font-display` | webfont | 400 | Display, h1, and h2 headlines. | Inter |
| OCD-GARRI-V01 Regular | `--font-ocd-garri-v01-regular` | webfont | 400 | Eyebrows, captions, and uppercase text links. | Space Mono |
| Diatype REKKI Bolder Rounded | `--font-diatype-rekki-bolder-rounded` | webfont | 400 | Minor rounded display accent; a very limited-use face. | Nunito Sans |

- **Diatype REKKI Regular:** Clean sans-serif with subtly tight tracking; sentence case for copy and navigation.
- **Diatype REKKI Medium:** Large, medium-weight headlines use notably negative tracking and compact line height.
- **OCD-GARRI-V01 Regular:** Small uppercase labels with expanded tracking create a technical, stamped feel.
- **Diatype REKKI Bolder Rounded:** Measured at low page share; reserve for small emphasis rather than core text.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 86px | 400 | 1 | -0.064em | — | Diatype REKKI Medium | Oversized hero and closing CTA display headlines. |
| h1 | 72px | 400 | 1 | -0.042em | — | Diatype REKKI Medium | Primary page headline and prominent section titles. |
| h2 | 56px | 400 | 1 | -0.04em | — | Diatype REKKI Medium | Major section headings and supporting feature statements. |
| h3 | 24px | 400 | 1.33 | -0.027em | — | Diatype REKKI Regular | Feature-card and testimonial headings. |
| body | 18px | 400 | 1.33 | -0.015em | — | Diatype REKKI Regular | Hero subtitle, explanatory copy, and testimonial text. |
| caption | 15px | 400 | 1.07 | 0.033em | uppercase | OCD-GARRI-V01 Regular | Small uppercase labels and compact metadata. |
| nav | 16px | 400 | 1.25 | -0.015em | — | Diatype REKKI Medium | Header navigation links. |
| link | 15px | 400 | 1.07 | 0.033em | uppercase | OCD-GARRI-V01 Regular | Uppercase secondary links and compact action labels. |
| eyebrow | 15px | 400 | 1.07 | 0.033em | uppercase | OCD-GARRI-V01 Regular | Small uppercase section labels. |

OpenType features in use: `"case"`.

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 4, 6, 8, 10, 12, 14, 16, 20, 24, 32, 39, 40, 56, 80, 120 px.
- Section rhythm 64px · element gap 10px · card padding 32px · max content width —.

Use a centered, wide content composition with strong horizontal alignment and substantial black negative space. The hero is a vertically stacked, center-aligned headline, supporting line, and CTA; navigation stays in a slim top row. Below, alternate broad product media with compact feature cards, a horizontal metrics row, and testimonial tiles. Keep section transitions mostly seamless against the canvas, reserving dark panels for grouped information. Maintain comfortable vertical rhythm: sparse around large statements, denser inside product interfaces and proof cards. Measurements do not establish a fixed maximum width.

## Shape & elevation

- Radius: button `9999px` · card `8px` · media `50%` · nav `9999px` · link `16px` · xs `8px` · sm `16px` · md `24px` · pill `9999px`
- No box shadows measured: the page is flat.

The visual system is mostly flat: black canvas, dark card fills, and no measured shadow system. Use rounded card edges and quiet tonal separation instead of conspicuous borders. Layer interface screenshots and text overlays over media only where the page demonstrates product context; dark gradients help blend media into the black field.

## Imagery

Use realistic workplace and food-service photography alongside crisp screenshots of order-management software. The hero image is dark and subdued behind the headline; product UI is shown large and bright as direct evidence of the tool. Customer proof uses image-led cards with overlaid identity and quote details. Keep imagery photographic and documentary rather than illustrative; gradients and dark overlays should preserve readable white text.

## Components

### Primary demo CTA

Bright blue, pill-shaped conversion button with bold white label; keep it the strongest color accent against black.

### Top navigation

Compact header with white REKKI mark, muted links, and a blue demo action aligned at the far edge.

### Hero headline

Large centered white Diatype Medium statement, tightly tracked over a darkened workplace image, followed by muted copy.

### Product interface showcase

Wide, bright order-management screenshot framed by the surrounding black page, with concise explanatory text and a light secondary action.

### Benefits grid

Dark navy card grouping short proof statements and simple icons, paired with workplace photography.

### Metrics row

Three prominent white numerical proof points, each supported by small muted explanatory text and subtle separators.

### Testimonial cards

Image-led customer tiles with dark overlays, compact identity details, and concise white quote text.

### Measured component styles

- **Primary button** (“BOOK A DEMO”): background #0063e1 · text #000000 · radius 6px · padding 12px 14px 12px 13px · 400 12px sans-serif
- **Secondary button** (“LEARN MORE”): background #ffffff · text #0000ee · radius 59px · padding 32px 44px · 400 12px sans-serif
- **Link** (“SALES”): transparent background · text #ffffff · radius 0px · padding 0px · 400 15px OCD-GARRI-V01 Regular · uppercase
- **Card** (“Accuracy first Your team trains our AI r”): background #040910 · text #000000 · radius 8px · padding 32px · 400 12px sans-serif
- **Navigation item** (“For Customer Service”): transparent background · text #000000 · radius 0px · padding 0px · 400 12px sans-serif

## Do

- Keep the canvas predominantly black.
- Use white for major headlines and clear product copy.
- Reserve REKKI Blue for high-priority actions.
- Use oversized, tightly tracked display typography.
- Pair software screenshots with real workplace photography.
- Separate cards with dark tonal fills, not heavy borders.

## Don't

- Do not introduce bright section backgrounds.
- Do not spread blue across decorative elements.
- Do not use pale gray as the main text color.
- Do not add conspicuous shadows or outlined panels.
- Do not crowd large headlines with nearby content.
- Do not replace product proof with abstract illustration.

## Agent prompt

Build a new page in REKKI's dark, product-led visual style. Use Canvas Black (#000000) as the dominant background, Signal White (#ffffff) for headlines, and Slate Gray (#87898d) for secondary copy. Apply REKKI Blue (#0063e1) sparingly to the primary CTA. Use oversized, tightly tracked Diatype-like sans-serif headlines and small uppercase, widely tracked labels. Structure the page with a centered hero, generous black breathing room, broad software screenshots, concise proof cards, and a compact metrics or testimonial section. Use Night Navy (#040910) and Iron Gray (#272828) for quiet card separation. Favor realistic workplace photography and direct product UI over decorative illustration. Keep surfaces flat, corners rounded, and transitions subtle; avoid bright bands, heavy borders, and unnecessary shadows.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark hero with centered headline, concise subtitle, blue demo CTA, and subdued workplace media. | primary demo action, value proposition first | black canvas, oversized white type, blue pill CTA, dark media overlay |

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