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

# A Color Bright · Design System

> Quiet space for vivid work

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

A Color Bright presents a design studio through a spacious project showcase and a compact contact-focused closing section. A restrained monochrome interface lets colorful client work supply the page’s visual emphasis.

## North star

Keep the interface quiet and spacious so the featured work—not decorative UI—provides the page’s strongest color and visual character.

## Overview

The homepage is built around a near-white canvas, dark text, and generous unoccupied space. FT Regola Neue appears consistently at regular weight, with a large, lightly tracked main heading and quieter supporting copy. Navigation and links remain understated; the dark booking pill is the clearest interface emphasis. The first section centers a large square project image, with smaller neighboring project images creating a carousel-like frame; the vivid yellow artwork belongs to the featured project rather than the site’s core palette. A short caption sits directly below the showcase. The lower contact area shifts to a pale-gray band, pairing a brief invitation with a founder profile and two contact actions. The footer distributes location, contact, and policy links in a compact two-column arrangement. Hairline borders and flat surfaces preserve the editorial, low-chrome feel.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Gallery White | `#ffffff` | `--color-gallery-white` | neutral | Main page canvas and light button fill; provides the broad, uninterrupted background around project imagery. |
| Studio Ink | `#1a1a1a` | `--color-studio-ink` | neutral | Primary headings, body copy, logo, links, and dark booking button. |
| Soft Rule | `#e8e8e8` | `--color-soft-rule` | semantic | Fine button outlines and subtle interface separators. |
| Quiet Gray | `#6a6a6a` | `--color-quiet-gray` | neutral | Secondary navigation and less prominent footer and supporting text. |
| Mist Surface | `#f4f4f4` | `--color-mist-surface` | surface | Pale contact-band surface and media backdrop, distinct from the white main canvas. |

### Semantic aliases

`--color-canvas` → `#ffffff` (Gallery White) · `--color-surface` → `#f4f4f4` (Mist Surface) · `--color-text` → `#1a1a1a` (Studio Ink) · `--color-text-muted` → `#6a6a6a` (Quiet Gray) · `--color-border` → `#e8e8e8` (Soft Rule)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#1a1a1a` | `#ffffff` | 17.4:1 | AAA |
| `#1a1a1a` | `#f4f4f4` | 15.82:1 | AAA |
| `#6a6a6a` | `#ffffff` | 5.41:1 | AA |
| `#6a6a6a` | `#f4f4f4` | 4.92:1 | AA |

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| FT Regola Neue | `--font-body` | webfont | 400 | Shared typeface for navigation, headings, body copy, captions, and buttons. | Inter |

- **FT Regola Neue:** Regular weight throughout; the main heading uses subtly tight tracking. Text is sentence case, without display-style capitalization.

### Type scale — Augmented Fourth (ratio ≈ 1.422, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 46px | 400 | 1.2 | -0.02em | — | FT Regola Neue | Homepage brand heading and main introductory display text. |
| h2 | 24px | 400 | 1.35 | 0 | — | FT Regola Neue | Section headings, including contact and location labels. |
| h3 | 20px | 400 | 1.45 | 0 | — | FT Regola Neue | Supporting subheadings and smaller content headings. |
| body | 16px | 400 | 1.3 | 0 | — | FT Regola Neue | Project captions, contact details, and general page copy. |
| button | 16px | 400 | 1.3 | 0 | — | FT Regola Neue | Booking and email contact action labels. |
| nav | 16px | 400 | 1.3 | 0 | — | FT Regola Neue | Primary header navigation and site links. |

## Spacing & layout

- Base unit **8px**, density **comfortable**.
- Scale (most used values): 4, 8, 16, 24, 40, 42, 60, 128 px.
- Section rhythm 60px · element gap 16px · card padding — · max content width 1360px.

The page uses a restrained, centered composition within a measured maximum width of 1360px. The opening project area is a single-column showcase: a large square image sits centrally between smaller side previews, followed by a left-aligned caption. The header keeps the wordmark at the left and navigation at the right. After substantial whitespace, a contact band introduces a two-column lower section. Comfortable density and generous section separation let each content group read independently.

## Shape & elevation

- Radius: button `9999px` · media `50%` · nav `4px` · pill `9999px`
- No box shadows measured: the page is flat.
- Motion: standard transition `0.2s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

The interface is predominantly flat, with no measured shadows or gradients. Subtle hairline borders outline selected pill-shaped actions, while the contact area uses a pale surface band rather than a raised card. Keep layering minimal and let image content establish depth and contrast.

## Imagery

Project imagery is the visual centerpiece: a large square featured work is flanked by smaller previews, with a concise caption below. The screenshot shows graphic, brand-led artwork rather than conventional lifestyle photography. Its vivid yellow and supporting colors are part of the showcased client work, not the measured interface palette. The contact area includes a small founder portrait; media remains neatly framed against the open page.

## Components

### Header navigation

Place the compact wordmark at the left and Work, Studio, and Observations links at the right; use dark and muted text without a strong enclosing bar.

### Project showcase

Center one large square project image, flank it with smaller previews, and put a short, left-aligned project caption directly beneath.

### Carousel controls

Provide paired Next slide and Previous slide controls with simple text treatment and no filled button background.

### Booking action

Use a dark pill with white 16px regular text for Book 30 minutes; retain a fine light outline and generous horizontal inset.

### Email action

Present Send an email as a text-led pill action with dark text, a fine light border, and no dark fill.

### Contact band and footer

Set the invitation, founder detail, booking action, and email action in a pale-gray band; follow with location, contact, and legal information.

### Measured component styles

- **Primary button** (“Book 30 minutes”): background #1a1a1a · text #ffffff · border 1px solid #e8e8e8 · radius 99px · padding 0px 16px · 400 16px FT Regola Neue
- **Secondary button** (“Send an email”): transparent background · text #1a1a1a · border 1px solid #e8e8e8 · radius 99px · padding 0px 16px · 400 16px FT Regola Neue
- **Link** (“View project: Theo, A Berlin proptech st”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 20px FT Regola Neue
- **Navigation item** (“Work Studio Observations”): transparent background · text #1a1a1a · radius 0px · padding 0px · 400 20px FT Regola Neue

## Do

- Use #ffffff as the dominant page canvas.
- Keep interface text in FT Regola Neue or a close sans-serif substitute.
- Give the project showcase generous whitespace.
- Let client artwork provide vivid color rather than tinting the interface.
- Use #1a1a1a for primary text and the booking CTA.
- Reserve #6a6a6a for secondary navigation and quieter copy.
- Keep the contact area visually distinct with #f4f4f4.

## Don't

- Do not treat project-art colors as the site’s brand palette.
- Do not add gradients or decorative shadows.
- Do not crowd the hero with extra copy or controls.
- Do not make secondary navigation as dark or prominent as primary content.
- Do not turn every contact action into a filled button.
- Do not add heavy cards or strong dividers.

## Agent prompt

Build a design-studio page with the calm, editorial feel of A Color Bright. Use Gallery White (#ffffff) as the dominant canvas, Studio Ink (#1a1a1a) for primary text and the key booking action, Quiet Gray (#6a6a6a) for secondary navigation, Soft Rule (#e8e8e8) for fine outlines, and Mist Surface (#f4f4f4) for a restrained contact band. Use a regular-weight humanist sans-serif close to FT Regola Neue, with understated headings and compact, readable supporting copy. Keep the header simple, place one large featured project image centrally with smaller neighboring previews, and add a concise caption. End with a pale contact strip and a tidy location/contact footer. Favor whitespace, flat surfaces, and thin borders; allow the project artwork to supply its own color.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Single-column, centered project display with a large square image, small side previews, and a left-aligned caption. | Project carousel, Next and previous controls, View project link | Minimal header navigation, Centered artwork, Short caption |
| 2 | contact | A pale contact band leads into a two-column footer for location, contact details, and legal links. | Book a meeting, Email contact, Social links | Muted surface band, Founder profile, Outlined pill actions, Compact footer columns |

## Source CSS custom properties (selected)

```css
--spacing-page-x: 40px;
--text-h4: 20px;
--text-h5: 20px;
--text-body: 20px;
```

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