№ tonal-com

Tonal

Cool, stark geometry: deep charcoal grid, precise sans-serif, a focused, intensely functional feel.

Photographicminimalism brutalism monochrome swiss health consumer techlight

A striking, full-bleed image dominates the viewport, establishing a sense of focused intensity. The typography is clean and assertive, prioritizing clarity and impact over ornamentation. The overall feel is stark and purposeful. · fitness tech, strength training, home gym, minimalist design, dark website, modern fitness, tonal product, workout system, digital fitness

Hero - desktop 1440 × 900 · mobile 375

See history ↻Visit source ↗

The whole page, top to bottom - desktop & mobile

Palette

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

Reads as: monochrome · muted · high-contrast

SwatchHexOKLCHSuggested roleCopy

Hex#14d5be
OKLCHoklch(78.4% 0.139 181)
RoleDominant
find sites →
Hex#5f2c24
OKLCHoklch(36.1% 0.076 30)
RoleSurface
find sites →
Hex#85f3e6
OKLCHoklch(89.5% 0.104 186)
RoleInk
find sites →
Hex#966c54
OKLCHoklch(56.8% 0.064 51)
RoleAccent
find sites →
Hex#cfccc9
OKLCHoklch(84.7% 0.005 68)
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	Sample
h1	GT Expanded	48px	900	0.9	Aa Bb Cc
h2	GT Expanded	40px	900	0.9	Aa Bb Cc
h3	GT Expanded	32px	900	0.9	Aa Bb Cc
body	GT America	16px	400	1.2	Aa Bb Cc
caption	GT America	14px	400	1.43	Aa Bb Cc
button	GT America	16px	500	1.5	Aa Bb Cc

Spacing scale

16px

32px

40px

80px

96px

120px

Radius scale

0px

8px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #14d5be;
  --color-surface: #5f2c24;
  --color-ink: #85f3e6;
  --color-accent: #966c54;
  --color-detail: #cfccc9;
}

/* CSS variables exposed by source */
:root {
  --font-size-heading-xl: 3rem;
  --font-size-body-md: 16px;
  --font-size-caption: 0.6875rem;
  --font-size-heading-lg: 2.5rem;
  --font-size-heading-md: 1.5rem;
  --font-size-eyebrow: 1.125rem;
  --color-scrim-dark-strong: rgba(0, 0, 0, 0.6);
  --font-size-heading-xs: 1rem;
  --font-size-body-xl: 24px;
  --color-scrim-dark-light: rgba(0, 0, 0, 0.2);
  --color-scrim-light-medium: rgba(224, 224, 224, 0.45);
  --font-size-heading-sm: 1.125rem;
  --font-size-body-lg: 20px;
  --font-size-body2: 0.875rem;
  --color-scrim-light-strong: rgba(224, 224, 224, 0.75);
  --font-size-heading-ml: 2rem;
  --font-size-hero: 4rem;
  --color-scrim-default: rgba(0, 0, 0, 0.2);
  --font-size-body-sm: 14px;
  --tw-ring-shadow: 0 0 rgba(0,0,0,0);
  --header-bg-sticky: rgb(244, 244, 244);
  --header-cta-text: rgb(28,28,26);
  --tw-border-spacing-x: 0;
  --tw-ring-color: rgba(59, 130, 246, .5);
  --swiper-theme-color: #007aff;
  --tw-rotate: 0;
  --tw-ring-offset-color: #fff;
  --tw-ring-offset-width: 0px;
  --nav-height: 73px;
  --tw-scroll-snap-strictness: proximity;
  --tw-shadow-colored: 0 0 rgba(0,0,0,0);
  --header-text: rgb(28,28,26);
  --tw-skew-y: 0;
  --flyout-top-position: calc(73px + 48.796875px);
  --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0);
  --header-text-light: rgb(255, 255, 255);
  --fides-overlay-font-color: #000000;
  --tw-scale-y: 1;
  --icon-size: 1.5rem;
  --tw-translate-y: 0;
  --announcement-bar-height: 48.796875px;
  --header-cta-bg: rgb(68, 221, 196);
  --icon-size-lg: 2rem;
  --header-border-light: rgb(235,235,235);
  --touch-target-size: 44px;
  --tw-skew-x: 0;
  --header-bg-transparent: rgba(0,0,0,0);
  --header-bg: rgb(255, 255, 255);
  --swiper-navigation-size: 44px;
  --sticky-atc-top: calc(48.796875px + 73px);
  --tw-shadow: 0 0 rgba(0,0,0,0);
  --tw-translate-x: 0;
  --sticky-atc-bar-height: 73px;
  --tw-scale-x: 1;
  --icon-size-md: 1.75rem;
  --tw-border-spacing-y: 0;
  --header-text-sticky: rgb(28,28,26);
  --icon-size-sm: 1rem;
}

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 Tonal.
Reference design system (extracted from the live site):
- Palette: #14d5be, #5f2c24, #85f3e6, #966c54, #cfccc9
- Typefaces: GT Expanded, GT America
- Macrostructure: Photographic
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/tonal-com

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

GT Expanded

48px

900

0.9

Aa Bb Cc

GT Expanded

40px

900

0.9

Aa Bb Cc

GT Expanded

32px

900

0.9

Aa Bb Cc

body

GT America

16px

400

1.2

Aa Bb Cc

caption

GT America

14px

400

1.43

Aa Bb Cc

button

GT America

16px

500

1.5

Aa Bb Cc

:root { --color-dominant: #14d5be; --color-surface: #5f2c24; --color-ink: #85f3e6; --color-accent: #966c54; --color-detail: #cfccc9; } /* CSS variables exposed by source */ :root { --font-size-heading-xl: 3rem; --font-size-body-md: 16px; --font-size-caption: 0.6875rem; --font-size-heading-lg: 2.5rem; --font-size-heading-md: 1.5rem; --font-size-eyebrow: 1.125rem; --color-scrim-dark-strong: rgba(0, 0, 0, 0.6); --font-size-heading-xs: 1rem; --font-size-body-xl: 24px; --color-scrim-dark-light: rgba(0, 0, 0, 0.2); --color-scrim-light-medium: rgba(224, 224, 224, 0.45); --font-size-heading-sm: 1.125rem; --font-size-body-lg: 20px; --font-size-body2: 0.875rem; --color-scrim-light-strong: rgba(224, 224, 224, 0.75); --font-size-heading-ml: 2rem; --font-size-hero: 4rem; --color-scrim-default: rgba(0, 0, 0, 0.2); --font-size-body-sm: 14px; --tw-ring-shadow: 0 0 rgba(0,0,0,0); --header-bg-sticky: rgb(244, 244, 244); --header-cta-text: rgb(28,28,26); --tw-border-spacing-x: 0; --tw-ring-color: rgba(59, 130, 246, .5); --swiper-theme-color: #007aff; --tw-rotate: 0; --tw-ring-offset-color: #fff; --tw-ring-offset-width: 0px; --nav-height: 73px; --tw-scroll-snap-strictness: proximity; --tw-shadow-colored: 0 0 rgba(0,0,0,0); --header-text: rgb(28,28,26); --tw-skew-y: 0; --flyout-top-position: calc(73px + 48.796875px); --tw-ring-offset-shadow: 0 0 rgba(0,0,0,0); --header-text-light: rgb(255, 255, 255); --fides-overlay-font-color: #000000; --tw-scale-y: 1; --icon-size: 1.5rem; --tw-translate-y: 0; --announcement-bar-height: 48.796875px; --header-cta-bg: rgb(68, 221, 196); --icon-size-lg: 2rem; --header-border-light: rgb(235,235,235); --touch-target-size: 44px; --tw-skew-x: 0; --header-bg-transparent: rgba(0,0,0,0); --header-bg: rgb(255, 255, 255); --swiper-navigation-size: 44px; --sticky-atc-top: calc(48.796875px + 73px); --tw-shadow: 0 0 rgba(0,0,0,0); --tw-translate-x: 0; --sticky-atc-bar-height: 73px; --tw-scale-x: 1; --icon-size-md: 1.75rem; --tw-border-spacing-y: 0; --header-text-sticky: rgb(28,28,26); --icon-size-sm: 1rem; }

Build a landing page in the visual style of Tonal. Reference design system (extracted from the live site): - Palette: #14d5be, #5f2c24, #85f3e6, #966c54, #cfccc9 - Typefaces: GT Expanded, GT America - Macrostructure: Photographic 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/tonal-com