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

# Bauhaus Clock · Design System

> Quiet Bauhaus precision, framed for everyday screens.

**Theme:** light · **Industry:** consumer-electronics · **Source:** https://bauhausclock.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 restrained product homepage for a clock screensaver and companion mobile app, led by a bold centered message and immersive product imagery. Cool gray surfaces, near-black typography, and restrained aqua accents give the page a calm, premium feel.

## North star

Keep the interface quiet and spacious so the clock imagery and precise typography do the persuading.

## Overview

The visual strategy is quiet and product-first: a cool gray canvas (#eef0f2) holds most of the page, letting large, near-black headlines and cinematic clock imagery take precedence. White marks a distinct comparison band, while pale aqua surfaces and a small green accent signal app availability and selected product details rather than becoming a competing palette. System sans-serif typography stays clean and familiar; the hero headline is large, centered, and tightly tracked, with lighter supporting copy and compact caption-like labels. The header places a small clock identity at left and a dark pill-shaped purchase link at right. Broad, centered content bands alternate with expansive media and testimonial groupings, leaving generous breathing room between them. Rounded media and cards soften the geometric Bauhaus influence. Keep shadows subtle and reserve visible contrast for text, product media, and the purchase control.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Midnight Ink | `#04080d` | `--color-midnight-ink` | brand | Primary headline, body copy, and link color against the pale canvas. |
| Gallery Mist | `#eef0f2` | `--color-gallery-mist` | surface | Dominant page canvas and background for most content sections. |
| Clean Porcelain | `#ffffff` | `--color-clean-porcelain` | surface | Card surfaces and the distinct comparison section band. |
| Pure Rule | `#000000` | `--color-pure-rule` | neutral | Measured hairline border color and occasional card text; use sparingly. |
| Soft Graphite | `#121317` | `--color-soft-graphite` | neutral | Secondary dark text and the subtle card and section hairline treatment. |
| Lagoon Glass | `#a1e5e4` | `--color-lagoon-glass` | accent | Pale aqua section surfaces and the restrained mobile-app announcement accent. |
| Smoke Gradient | `#545558` | `--color-smoke-gradient` | neutral | Intermediate gray in dark gradients; not a defining flat interface color. |
| Frosted Aqua | `#d5efef` | `--color-frosted-aqua` | surface | Secondary pale aqua surface, supporting soft product and card treatments. |
| Slate Haze | `#6d6f73` | `--color-slate-haze` | neutral | Muted gray in gradient details and occasional link text. |
| Dial Green | `#00753e` | `--color-dial-green` | accent | Small accent within a card or product detail, not a general CTA color. |
| Seafoam Tint | `#c8eaea` | `--color-seafoam-tint` | surface | Subtle card and decorative tint supporting the aqua product palette. |
| Ice Light | `#f2ffff` | `--color-ice-light` | surface | Light gradient endpoint and pale highlight in decorative or link treatments. |

### Semantic aliases

`--color-canvas` → `#eef0f2` (Gallery Mist) · `--color-surface` → `#ffffff` (Clean Porcelain) · `--color-surface-2` → `#a1e5e4` (Lagoon Glass) · `--color-surface-3` → `#d5efef` (Frosted Aqua) · `--color-text` → `#04080d` (Midnight Ink) · `--color-border` → `#000000` (Pure Rule) · `--color-accent` → `#a1e5e4` (Lagoon Glass) · `--color-accent-2` → `#00753e` (Dial Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#04080d` | `#eef0f2` | 17.58:1 | AAA |
| `#04080d` | `#ffffff` | 20.08:1 | AAA |
| `#04080d` | `#a1e5e4` | 14.19:1 | AAA |
| `#04080d` | `#d5efef` | 16.66:1 | AAA |
| `#a1e5e4` | `#eef0f2` | 1.24:1 | fail |
| `#a1e5e4` | `#ffffff` | 1.41:1 | fail |
| `#a1e5e4` | `#d5efef` | 1.17:1 | fail |

### Gradients

- `linear-gradient(140deg, rgb(4, 8, 13) 0%, rgba(18, 19, 23, 0.7) 100%)`
- `radial-gradient(53% 128% at 36.4% -18.1%, rgb(109, 111, 115) 0%, rgb(4, 8, 13) 95.8527%)`
- `linear-gradient(rgb(214, 246, 255) 0%, rgb(242, 255, 255) 100%)`
- `linear-gradient(rgba(245, 247, 249, 0.9) 0%, rgba(233, 234, 236, 0.7) 100%)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| ui-sans-serif | `--font-body` | system | 400, 600, 599, 700, 500 | Site-wide system sans-serif for headlines, body copy, labels, and links. | Inter |

- **ui-sans-serif:** Use regular to bold weights; headlines use tight tracking, centered display text, and sentence case.

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

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| display | 60px | 600 | 1.07 | -0.017em | — | ui-sans-serif | Oversized hero headline and other prominent page statements. |
| h1 | 40px | 600 | 1.1 | -0.005em | — | ui-sans-serif | Primary section heading or main product heading. |
| h2 | 32px | 400 | 1.2 | 0.006em | — | ui-sans-serif | Secondary section headings, including centered feature titles. |
| body | 18px | 400 | 1.5 | 0 | — | ui-sans-serif | Supporting product descriptions and explanatory copy. |
| caption | 16px | 400 | 1.2 | 0.02em | — | ui-sans-serif | Compact labels, app announcement text, and small supporting details. |

OpenType features in use: `"blwf", "cv03", "cv04", "cv09", "cv11"`.

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 8, 10, 12, 15, 20, 22, 25, 30, 50, 75 px.
- Section rhythm 50px · element gap 15px · card padding 30px · max content width 1340px.

Use a centered single-column hero within a wide page frame, followed by broad media and content bands. The measured maximum page width is 1340px; preserve generous outer margins and pronounced vertical gaps between sections. Most headings are centered, while the testimonial and product-display areas can expand into multi-column groupings. The page feels comfortable rather than dense: keep copy short, media visually dominant, and controls separated from surrounding text.

## Shape & elevation

- Radius: card `30px` · media `50%` · link `9999px` · xs `25px` · sm `30px` · pill `9999px`
- Shadow `md` (other): `rgba(0, 0, 0, 0) 0px 4px 10px 0px`
- Shadow `hairline` (other): `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px`
- Shadow `hairline-2` (other): `rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px`
- Shadow `inset` (card): `rgba(255, 255, 255, 0) 0px 1px 1px 1.5px inset, rgba(255, 255, 255, 0) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0) 0px 0.597144px 2.508px -1.1875px, rgba(0, 0, 0, 0) 0px 1.81088px 7.60569px -2.375px, rgba`
- Shadow `hairline-3` (card, section): `rgba(18, 19, 23, 0.02) 0px 0px 0px 1px`
- Shadow `inset-2` (other): `rgb(255, 255, 255) 0px 2px 0.5px 0px inset, rgba(255, 255, 255, 0.5) 0px 1px 1px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 1px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(0, 0, 0, 0.1) 0px 12px 30px 0px`

The interface is mostly flat, relying on tonal section changes and large media rather than heavy shadows. Cards use generously rounded corners, with a subtle measured hairline available for separation. The purchase control and app announcement may sit slightly above the canvas; keep their shadowing soft and restrained.

## Imagery

Lead with large, rounded lifestyle video or photography showing the clock on a real screen in a calm interior. Keep the image natural and slightly softened by ambient light; the screenshot’s muted room tones and aqua clock face are product imagery, not the brand palette. Later sections use dial variations, product visuals, press marks, and testimonial media. Avoid decorative illustrations that compete with the clock.

## Components

### Header

Compact horizontal identity row with a small clock mark and product name at left, plus a dark pill purchase link at right.

### App announcement

Centered pale aqua pill with a small status dot, concise iPhone and iPad copy, and a right-facing chevron.

### Hero statement

Large, centered near-black sans-serif headline with tight tracking and ample clear space before the main media.

### Lifestyle media

Wide rounded video or image showing the clock screensaver in a real-world setting; use it as the dominant visual proof.

### Dial showcase

Centered section heading above a gallery of clock-face styles and color options, with product visuals carrying the detail.

### Testimonial cards

White, generously rounded review cards on the pale canvas, using restrained borders and concise attribution.

### Purchase callout

Centered closing pitch that emphasizes lifetime ownership and updates, paired with a clear buy action.

### Measured component styles

- **Link** (“reach out.”): transparent background · text #04090d · radius 0px · padding 0px · 400 20px ui-sans-serif
- **Card** (“"This is a great sceen saver I love all ”): background #ffffff · text #000000 · radius 30px · padding 30px · 400 12px ui-sans-serif

## Do

- Use #eef0f2 as the primary canvas.
- Set prominent headings in centered near-black sans-serif.
- Give product media generous space and rounded framing.
- Use aqua accents selectively for app and product details.
- Keep the header simple, with identity left and purchase action right.
- Separate sections with generous vertical breathing room.

## Don't

- Do not turn the aqua accents into full-page color blocks.
- Do not use a dense dashboard grid or crowded navigation.
- Do not add saturated colors absent from the measured palette.
- Do not let testimonial cards overpower product imagery.
- Do not apply heavy shadows to every surface.
- Do not use all-caps display typography or loose headline tracking.

## Agent prompt

Build a new product page in the Bauhaus Clock visual style. Use Gallery Mist (#eef0f2) as the broad canvas, Midnight Ink (#04080d) for typography, and Clean Porcelain (#ffffff) for occasional cards or a distinct section band. Reserve Lagoon Glass (#a1e5e4) and Frosted Aqua (#d5efef) for small announcements and product accents; Dial Green (#00753e) should remain rare. Use a clean system sans-serif, with large tightly tracked centered headlines and plain, readable supporting copy. Compose a restrained header with identity on the left and a dark pill action on the right. Organize content as spacious centered bands with large rounded lifestyle media, product-focused galleries, and simple review cards. Favor flat surfaces and subtle hairlines over strong shadows. Keep the overall interface calm, premium, and product-led.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered headline and app announcement beneath a compact horizontal header. | Purchase link in header, Mobile app announcement | Clock identity mark, Dark pill CTA, Centered large headline |
| 2 | video | Full-width media band with a single dominant rounded video. | Lifestyle product demonstration | Large rounded media, Minimal surrounding interface |
| 3 | logo-cloud | Wide multi-column grouping of press quotes, marks, and related media. | Third-party validation, Quote-led proof | Small press visuals, Multi-column arrangement |
| 4 | feature-split | Centered pair of heading and supporting statement on the page canvas. | Product positioning | Centered typography, Open negative space |
| 5 | product-showcase | Centered heading above a broad multi-column display of dial imagery and options. | Explore dial variations | Product image gallery, Color-option labels |
| 6 | comparison | Centered white section band with product visuals and a concise heading. | Compare display modes | White section surface, Paired product imagery |
| 7 | testimonials | Multi-column section combining press features, video, and review cards. | Press validation, Customer testimonials | Quote cards, Press media, Rounded white cards |
| 8 | cta | Centered closing pitch with supporting benefits, product image, and action link. | Emphasize lifetime ownership, Purchase action | Centered headline, Short benefit points |
| 9 | footer | Simple closing row of brand attribution and legal links. | Legal navigation | Compact text links, Minimal decoration |

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