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

# KeepGrading · Design System

> A dark, cinematic frame for colour-graded work.

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

KeepGrading’s homepage puts moving-image work against a nearly black canvas, with restrained navigation and a single prominent project frame. Warm, muted imagery and compact uppercase typography make the work itself the visual focus.

## North star

Keep the interface nearly invisible so a single cinematic work frame commands attention.

## Overview

The page uses a near-black canvas (#121212) as a quiet surround for a centered landscape video frame, leaving generous negative space to make the graded footage the focal point. Navigation sits along the top edge: a pale wordmark on the left and a compact row of uppercase links on the right. The warm ivory text (#f9f9df) stays legible without the starkness of pure white. A small outlined “SEE MORE WORK” control sits at the lower right, using a subdued dark fill and fine grey border. Suisse Intl provides an even, contemporary sans-serif voice; uppercase labels and tight navigation tracking give the interface a precise studio feel. Project-card browns and deep blues are sampled accents rather than a page-wide colour system, appearing mainly within media or card surfaces. The composition feels spacious and cinematic, with flat geometry, minimal ornament and no visible shadows.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Ivory | `#f9f9df` | `--color-warm-ivory` | brand | Primary text and navigation on the dark canvas; a softer alternative to pure white. |
| Studio Black | `#121212` | `--color-studio-black` | neutral | Dominant page canvas and the dark surround framing the featured moving image. |
| Inverse White | `#ffffff` | `--color-inverse-white` | surface | Measured inverse surface; not a defining visible page colour in the screenshot. |
| Charcoal Line | `#40403b` | `--color-charcoal-line` | neutral | Thin button border that outlines the secondary work-navigation control. |
| Ochre Frame | `#67491a` | `--color-ochre-frame` | accent | Muted brown project-card surface; treat as media-derived colour, not a global accent. |
| Deep Fjord | `#123150` | `--color-deep-fjord` | accent | Blue project-card surface, likely media-derived; not a prominent interface colour. |
| Umber Shade | `#44301d` | `--color-umber-shade` | surface | Dark brown surface detected in project content; keep scoped to media or cards. |
| Burnt Cocoa | `#50311a` | `--color-burnt-cocoa` | surface | Warm brown detected on a project card; use only as a media-adjacent surface. |
| Midnight Blue | `#132e56` | `--color-midnight-blue` | accent | Deep blue accent sampled from card content, not a defining page-wide interface colour. |
| Dark Sienna | `#512501` | `--color-dark-sienna` | surface | Brown card surface with dark text in measured data; keep inside project content. |

### Semantic aliases

`--color-canvas` → `#121212` (Studio Black) · `--color-surface` → `#ffffff` (Inverse White) · `--color-surface-2` → `#67491a` (Ochre Frame) · `--color-surface-3` → `#123150` (Deep Fjord) · `--color-surface-4` → `#44301d` (Umber Shade) · `--color-text` → `#f9f9df` (Warm Ivory) · `--color-border` → `#40403b` (Charcoal Line) · `--color-accent` → `#67491a` (Ochre Frame) · `--color-accent-2` → `#123150` (Deep Fjord) · `--color-accent-3` → `#132e56` (Midnight Blue)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#f9f9df` | `#121212` | 17.52:1 | AAA |
| `#f9f9df` | `#ffffff` | 1.07:1 | fail |
| `#f9f9df` | `#67491a` | 7.72:1 | AAA |
| `#f9f9df` | `#123150` | 12.43:1 | AAA |
| `#67491a` | `#121212` | 2.27:1 | fail |
| `#67491a` | `#ffffff` | 8.25:1 | AAA |
| `#67491a` | `#123150` | 1.61:1 | fail |

### Gradients

- `linear-gradient(0deg, rgb(249, 249, 223), rgba(249, 249, 225, 0))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| Suisse Intl | `--font-body` | webfont | 400 | Navigation, body labels, and work controls | Inter |

- **Suisse Intl:** Measured at regular weight; uppercase interface labels, with tighter tracking in navigation.

### Type scale — Major Third (ratio ≈ 1.25, base 14px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| body | 14px | 400 | 1 | 0 | uppercase | Suisse Intl | Uppercase utility labels and compact text around the featured work. |
| nav | 16px | 400 | 1 | -0.02em | uppercase | Suisse Intl | Top-row section links, set uppercase with slightly tight tracking. |

## Spacing & layout

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

A full-bleed, dark stage holds a restrained top navigation and a centered landscape media frame. The wordmark anchors the left edge while section links align to the right; a secondary work link sits near the lower-right edge. The measured page max width is 1400px, with a comfortable overall density and a 20px element gap. The broad empty canvas is a defining part of the composition, not unused space. Keep the media and controls aligned cleanly, with no visible card grid in the opening view.

## Shape & elevation

- No box shadows measured: the page is flat.
- Motion: standard transition `0.5s cubic-bezier(0.5, 0.1, 0, 1)` on interactive elements.

The interface is largely flat: no measured shadows or rounded corners. Use the dark canvas as the main layer and let media sit cleanly within it. The “SEE MORE WORK” control is differentiated by a thin #40403b border and a restrained dark fill, not by shadow or pronounced elevation.

## Imagery

Moving-image work is the central visual material: a landscape video frame shows a close human portrait against a textured outdoor setting. Keep footage cinematic and colour-graded, with subdued, warm earth tones against the near-black page. The screenshot includes many image and video assets, so project visuals should feel like selected work rather than decorative illustrations. Avoid overlays that compete with the footage.

## Components

### Top navigation

A compact row of uppercase links—WORK, COLOURISTS, STUDIOS, ABOUT, CONTACT—aligned opposite the KeepGrading wordmark.

### Featured work frame

A centered, landscape video or image frame surrounded by generous near-black negative space.

### See more work control

Uppercase 14px Suisse Intl label in warm ivory, with a dark fill and 1px #40403b border.

### Project media tiles

Unrounded project surfaces may sample ochre, brown, or deep blue tones; keep these colours contained within work imagery.

### Measured component styles

- **Primary button** (“SEE MORE WORK”): background #292927 · text #f9f9df · border 1px solid #40403b · radius 0px · padding 12px · 400 14px Suisse Intl · uppercase
- **Link**: transparent background · text #121212 · radius 0px · padding 0px · 400 16px Suisse Intl
- **Card**: background #67491a · text #121212 · radius 0px · padding 0px · 400 16px Suisse Intl
- **Navigation item** (“WORK COLOURISTS STUDIOS ABOUT CONTACT”): transparent background · text #f9f9df · radius 0px · padding 0px · 400 16px Suisse Intl

## Do

- Use #121212 as the dominant canvas.
- Keep the first viewport spacious and cinematic.
- Use #f9f9df for high-contrast interface text.
- Set navigation and utility labels in uppercase.
- Let one landscape work frame lead the composition.
- Use a fine #40403b border for secondary controls.

## Don't

- Don’t fill the canvas with bright section colours.
- Don’t add shadows or rounded-card styling.
- Don’t let project-derived browns become global UI accents.
- Don’t crowd the hero with explanatory copy.
- Don’t use oversized, decorative typography.
- Don’t overlay controls on top of the main footage.

## Agent prompt

Build a new creative-studio page in KeepGrading’s restrained cinematic style. Use Studio Black (#121212) as the dominant canvas and Warm Ivory (#f9f9df) for navigation and essential labels. Set Suisse Intl or a close sans-serif substitute such as Inter in regular weight; keep interface text uppercase and navigation tracking tight. Place a compact top navigation opposite the wordmark, then give a single landscape video or image frame generous breathing room. Treat Ochre Frame (#67491a), Deep Fjord (#123150), and the other brown-blue samples as project-media colours only, not broad UI fills. Use flat geometry, no shadows or rounded corners, and reserve Charcoal Line (#40403b) for a subtle outlined secondary action. Prioritize the work over copy and ornament.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Dark full-bleed canvas with top navigation, centered landscape media, and a lower-right secondary action. | top-level section navigation, featured moving image, secondary work link | near-black canvas, uppercase navigation, centered media frame, fine outlined button |

## Source CSS custom properties (selected)

```css
--tw-text-opacity: 1;
--subgrid-number-of-columns: 12;
```

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