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

# reboot · Design System

> A quiet canvas for confident, type-led storytelling.

**Theme:** light · **Industry:** agency · **Source:** https://reboot.studio/ · **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._

Reboot’s homepage uses an almost-white canvas and a narrow column of large, conversational copy to introduce its web-design studio. Dark emphasis, muted supporting text, small interface details, and occasional colorful media accents keep the page restrained but not sterile.

## North star

Let a narrow column of clear, oversized copy do the work, using color and interface detail only as occasional punctuation.

## Overview

The page is built around a white canvas (#ffffff) and a focused column of large, left-aligned copy. Near-black text (#232323) carries the main message and selected emphases, while soft gray (#a7a7a7) recedes for supporting lines and secondary content. The type is Inter at a measured medium weight: the headline is generously sized and loosely led, giving the introduction an editorial, almost conversational pace. Subsequent statements continue as plain text rather than being divided into a conventional card grid. Ample measured section spacing lets each thought stand on its own. The header stays understated, pairing a compact wordmark with a fine outlined hiring pill. Hairlines (#e5e5e5) are used sparingly. Bright blue gradient hues and warm gradient hues appear as occasional media or illustrative accents, not as broad page backgrounds. Small product-like graphics and emoji punctuate the copy; the layout remains mostly flat and deliberately quiet.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | surface | Dominant page canvas and light text treatment; keep the overall surface bright and uncluttered. |
| Soft Ink | `#232323` | `--color-soft-ink` | brand | Primary copy, emphasized phrases, and dark logo details against the white canvas. |
| Quiet Line | `#e5e5e5` | `--color-quiet-line` | neutral | Fine outline on the hiring pill; use sparingly for subtle component boundaries. |
| Misted Gray | `#a7a7a7` | `--color-misted-gray` | neutral | Muted supporting copy that visually recedes behind the dark headline and emphasis. |
| Electric Cyan | `#00c8fb` | `--color-electric-cyan` | accent | Blue gradient accent in media or illustration; not a dominant page surface. |
| Signal Blue | `#1a2ff7` | `--color-signal-blue` | accent | Deeper end of the blue gradient accent, appearing in media or illustration. |
| Burnt Vermilion | `#a4341e` | `--color-burnt-vermilion` | accent | Warm gradient color confined to occasional illustrative or media detail. |
| Bright Vermilion | `#ef3313` | `--color-bright-vermilion` | accent | Middle stop of a warm illustration gradient; avoid using as a large page fill. |
| Marigold Glow | `#f4a41b` | `--color-marigold-glow` | accent | Warm gradient highlight inside occasional media or illustration. |
| Pure Black | `#000000` | `--color-pure-black` | semantic | Small dark interface or text details; the page’s main text is the softer #232323. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-text` → `#232323` (Soft Ink) · `--color-text-muted` → `#a7a7a7` (Misted Gray) · `--color-text-subtle` → `#ffffff` (Gallery White) · `--color-border` → `#e5e5e5` (Quiet Line) · `--color-accent` → `#00c8fb` (Electric Cyan) · `--color-accent-2` → `#1a2ff7` (Signal Blue) · `--color-accent-3` → `#a4341e` (Burnt Vermilion)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#232323` | `#ffffff` | 15.72:1 | AAA |
| `#a7a7a7` | `#ffffff` | 2.41:1 | fail |
| `#00c8fb` | `#ffffff` | 1.97:1 | fail |

### Gradients

- `linear-gradient(rgb(0, 200, 251), rgb(26, 47, 247))`
- `linear-gradient(to right bottom, rgb(164, 52, 30), rgb(239, 51, 19), rgb(244, 164, 27))`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __inter_d4f92f | `--font-body` | webfont | 500, 600 | All measured page typography, including headline, body copy, caption text, and interface labels. | Inter |

- **__inter_d4f92f:** Measured webfont uses weights 500 and 600. Sentence case and untracked text; large headline has spacious leading.

### Type scale — Custom (ratio ≈ 2.5, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 40px | 500 | 1.6 | 0 | — | __inter_d4f92f | Opening studio statement, set as large, medium-weight text. |
| body | 16px | 500 | 1.8 | 0 | — | __inter_d4f92f | Main explanatory paragraphs and service or process statements. |
| caption | 14px | 600 | 1.6 | 0 | — | __inter_d4f92f | Small interface labels and compact supporting text. |

## Spacing & layout

- Base unit **8px**, density **spacious**.
- Scale (most used values): 1, 8, 16, 24, 32, 128 px.
- Section rhythm 128px · element gap — · card padding — · max content width 808px.

Use a centered, narrow content column within the measured 808px page max width, with left-aligned copy and a restrained header row. Keep the page density spacious: the measured spacing scale is based on 8px, with a 128px section gap. The long single-page composition progresses through separated text statements rather than a dense grid. Maintain generous blank canvas around the copy and keep small header and footer details visually secondary.

## Shape & elevation

- Radius: button `9999px` · media `16px` · xs `16px` · pill `9999px`
- Shadow `lg` (other): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.06) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.06) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0.06) 0px 6px 6px -3px, rgba(0, 0, 0, `
- Shadow `lg-2` (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 0px 0px 1px, rgba(0, 0, 0, 0.05) 0px 1px 1px -0.5px, rgba(0, 0, 0, 0.05) 0px 3px 3px -1.5px, rgba(0, 0, 0, 0`
- Motion: standard transition `0.3s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The overall page is flat, with no strong panel or card system. The hiring pill has a thin #e5e5e5 outline and a fully rounded silhouette. Measured layered shadows are subtle and should only support small media or interface elements when appropriate, never create heavy floating cards.

## Imagery

Media is limited and used as punctuation within the text-led composition: a small colorful product-like graphic sits beside the opening statement, while other page media includes compact graphics and a video. Treat these as isolated accents, not as full-bleed backgrounds. Keep framing neat and contained; measured media uses a 16px radius. Avoid inventing a photography-led art direction.

## Components

### Header

A restrained top row pairs the reboot wordmark at the left with a compact hiring pill at the right.

### Hiring pill

Outlined with #e5e5e5, fully rounded, and set in measured 14px medium Inter; keep it quiet rather than CTA-like.

### Opening statement

Large, left-aligned 40px medium-weight copy; dark lead text is followed by lighter supporting lines.

### Inline media accent

Small colorful product-like visual sits within the opening text flow; use as punctuation rather than a large hero image.

### Text statements

Follow-up copy appears as separated, broad-leading text blocks with selected dark emphasis and muted surrounding lines.

### Text link

Links such as “Book a call” use plain text treatment in #232323 rather than a filled button.

### Footer details

Keep contact, location, and copyright-style information compact and low contrast at the end of the page.

### Measured component styles

- **Primary button** (“Hiring · Web Designer”): transparent background · text #000000 · border 1px solid #e5e5e5 · radius 9999px · padding 0px 16px · 500 14px __inter_d4f92f
- **Link** (“radio.”): transparent background · text #232323 · radius 0px · padding 0px · 500 16px __inter_d4f92f

## Do

- Use #ffffff as the dominant canvas.
- Set primary copy in #232323 and supporting copy in #a7a7a7.
- Keep the main content in a narrow, left-aligned column.
- Use large, medium-weight Inter for the opening statement.
- Separate statements with generous whitespace.
- Reserve gradients for small media or illustrative accents.

## Don't

- Do not add large colored background bands.
- Do not turn every text block into a card.
- Do not make the page feel dense or dashboard-like.
- Do not use bright gradients as the primary CTA treatment.
- Do not replace the text-led composition with a photo-heavy hero.
- Do not overuse borders or shadows.

## Agent prompt

Build a new page in reboot’s restrained studio style. Use Gallery White (#ffffff) as the canvas, Soft Ink (#232323) for primary copy, and Misted Gray (#a7a7a7) for quieter supporting lines. Set all text in Inter or a close free equivalent, using measured medium weights and an editorial, generous leading. Center a narrow content area within the measured 808px max width, align statements to the left, and separate them with spacious vertical rhythm based on the measured 8px scale and 128px section gap. Keep the header minimal, with a compact wordmark and a rounded, hairline-outlined hiring-style pill. Use Quiet Line (#e5e5e5) sparingly. Cyan-to-blue and warm gradients are accents for small inline media only. Prefer plain text links, subtle elevation, and a clean footer; avoid card-heavy layouts or large color fields.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single long-form white page with a compact top header, narrow left-aligned copy column, and spacious text-led flow. | inline hiring link, text-led introduction, plain-text booking link | minimal header, muted supporting copy, inline media accent, spacious text blocks |

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