№ bauhausclock-com

Bauhaus Clock - Most Elegant Clock for Mac, iPhone and iPad

Cool, precise geometry: stark white space, crisp sans-serifs, a serene, technical minimalism.

Marquee Herominimalism swiss monochrome vintage saaslight

Bauhaus Clock - Most Elegant Clock for Mac, iPhone and iPad - mobile — Mobile · 375

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Bauhaus Clock - Most Elegant Clock for Mac, iPhone and iPad - full page scroll

Bauhaus Clock - Most Elegant Clock for Mac, iPhone and iPad - mobile full page

Palette

Click any value to copy. Roles are suggestions, not gospel.

SwatchHexOKLCHSuggested roleCopy

Hex#3cd4d6
OKLCHoklch(79.5% 0.122 196)
RoleDominant
find sites →
Hex#88e4ea
OKLCHoklch(86.4% 0.088 201)
RoleSurface
find sites →
Hex#080e11
OKLCHoklch(15.9% 0.012 229)
RoleInk
find sites →
Hex#747484
OKLCHoklch(56.5% 0.024 286)
RoleAccent
find sites →
Hex#b8b9bb
OKLCHoklch(78.6% 0.003 265)
RoleDetail
find sites →

How to build one like this

Read off the live site. Treat it as reference, not a recipe.

Download .md View raw ↗

Type ramp

Role	Family	Size	Weight	Leading	Tracking	Sample
h1	ui-sans-serif	96px	600	1	-1.2px	Aa Bb Cc
h2	ui-sans-serif	60px	600	1.07	-1px	Aa Bb Cc
h3	ui-sans-serif	32px	400	1.3	0.2px	Aa Bb Cc
body	ui-sans-serif	12px	400	1.4	0	Aa Bb Cc

Spacing scale

10px

Container

Max content width 1390px

Export

:root {
  --color-dominant: #3cd4d6;
  --color-surface: #88e4ea;
  --color-ink: #080e11;
  --color-accent: #747484;
  --color-detail: #b8b9bb;
}

/* CSS variables exposed by source */
:root {
  --one-if-corner-shape-supported: 1;
}

For your coding agent

Drop-in prompt

Paste this into Claude Code, Cursor, or any chat-based agent. Pairs the captured tokens with a short brief so the model has both the style and the goal in one block.

Build a landing page in the visual style of Bauhaus Clock - Most Elegant Clock for Mac, iPhone and iPad.
Reference design system (extracted from the live site):
- Palette: #3cd4d6, #88e4ea, #080e11, #747484, #b8b9bb
- Typefaces: ui-sans-serif
- Macrostructure: Marquee Hero
Use the dominant colour for surfaces, the accent sparingly,
and lean on type weight + scale rather than colour for hierarchy.
Full DESIGN.md: https://inspomcp.dev/api/design/bauhausclock-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

ui-sans-serif

96px

600

-1.2px

Aa Bb Cc

ui-sans-serif

60px

600

1.07

-1px

Aa Bb Cc

ui-sans-serif

32px

400

1.3

0.2px

Aa Bb Cc

body

ui-sans-serif

12px

400

1.4

Aa Bb Cc

:root { --color-dominant: #3cd4d6; --color-surface: #88e4ea; --color-ink: #080e11; --color-accent: #747484; --color-detail: #b8b9bb; } /* CSS variables exposed by source */ :root { --one-if-corner-shape-supported: 1; }

Build a landing page in the visual style of Bauhaus Clock - Most Elegant Clock for Mac, iPhone and iPad. Reference design system (extracted from the live site): - Palette: #3cd4d6, #88e4ea, #080e11, #747484, #b8b9bb - Typefaces: ui-sans-serif - Macrostructure: Marquee Hero Use the dominant colour for surfaces, the accent sparingly, and lean on type weight + scale rather than colour for hierarchy. Full DESIGN.md: https://inspomcp.dev/api/design/bauhausclock-com