№ tana-inc

Tana Inc

Deep charcoal expanse, clean geometric sans-serifs, spacious and quietly powerful.

Split Studiominimalism monochrome dark mode saas aidark

The page uses a stark black background with crisp white typography, creating a sense of clarity and focus. The layout is split, with a prominent hero section and a preview of features below. The overall impression is clean and functional. · dark saas landing, minimalist dark website, technical website design, split screen hero, black and white design, saas product page, developer tools website

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#e4bc6c
OKLCHoklch(81.4% 0.109 83)
RoleDominant
find sites →
Hex#56351c
OKLCHoklch(36.3% 0.061 57)
RoleSurface
find sites →
Hex#e2f1bb
OKLCHoklch(93.4% 0.072 120)
RoleInk
find sites →
Hex#8d7967
OKLCHoklch(59.0% 0.036 64)
RoleAccent
find sites →
Hex#b9b698
OKLCHoklch(77.1% 0.041 103)
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	Source Serif 4	72px	500	1.05	-3.24px	Aa Bb Cc
h2	Source Serif 4	48px	500	1.1	-2.16px	Aa Bb Cc
h3	Inter	17px	500	1.3	-0.0864px	Aa Bb Cc
body	Inter	16px	400	1.4	0	Aa Bb Cc
button	Inter	16px	400	1.5	0	Aa Bb Cc

Spacing scale

4px

8px

16px

24px

44px

56px

96px

152px

Radius scale

0px

8px

12px

16px

20px

32px

Container

Max content width 1440px

Export

:root {
  --color-dominant: #e4bc6c;
  --color-surface: #56351c;
  --color-ink: #e2f1bb;
  --color-accent: #8d7967;
  --color-detail: #b9b698;
}

/* CSS variables exposed by source */
:root {
  --font-family-body: "Inter","Inter Fallback";
  --space-7: 40px;
  --type-display-lg: 62.26px;
  --spacer-md: 3.5rem;
  --space-5: 24px;
  --font-size-8: 35px;
  --font-size-3: 16px;
  --color-ink: #0c0805;
  --font-size-7: 28px;
  --space-6: 32px;
  --font-family-heading: "Source Serif 4","Source Serif 4 Fallback";
  --color-border: #eeeeee;
  --space-4: 16px;
  --color-bg: #fbfbfb;
  --spacer-sm: 1.5rem;
  --color-border-faint: #f0f0f0;
  --type-body-xxs: 11px;
  --type-heading-xs: 500 1.5625rem /1.2 "Source Serif 4","Source Serif 4 Fallback";
  --accent-11: #cc4e00;
  --font-size-6: 24px;
  --font-family-signature: "Caveat","Caveat Fallback";
  --type-heading-sm: 500 2rem /1.15 "Source Serif 4","Source Serif 4 Fallback";
  --color-ink-soft: #3a3a3a;
  --type-eyebrow: 500 1.375rem /1.2 "Source Serif 4","Source Serif 4 Fallback";
  --radius-2: 4px;
  --spacer-lg: 6rem;
  --font-weight-medium: 600;
  --type-body-lg: 1.125rem/1.55 "Inter","Inter Fallback";
  --font-size-5: 20px;
  --spacer-xs: 1rem;
  --type-body-xl: 19.08px;
  --type-body-sm: 13px;
  --font-size-2: 14px;
  --font-weight-bold: 700;
  --space-3: 12px;
  --accent-3: #ffefd6;
  --space-1: 4px;
  --color-border-soft: #e5e5e5;
  --font-weight-heading: 500;
  --type-display-sm: 22px;
  --color-paper-mid: #dcdcdc;
  --spacer-xl: calc(6rem + 3.5rem);
  --type-heading-md: 500 3rem /1.1 "Source Serif 4","Source Serif 4 Fallback";
  --color-surface: #ffffff;
  --font-size-1: 12px;
  --font-size-4: 18px;
  --type-body-md: 15px;
  --space-9: 64px;
  --radius-3: 6px;
  --type-section-label: 400 2rem/1.15 "Source Serif 4","Source Serif 4 Fallback";
  --radius-1: 3px;
  --color-ink-muted: #6a6a6a;
  --type-body-xs: 12px;
  --color-ink-faint: #999999;
  --color-background: #fcfcfc;
  --accent-9: #f76b15;
  --color-ink-faintest: #cccccc;
  --type-display-md: 28px;
  --color-surface-dark: #0c0805;
  --type-heading-xl: 500 4.5rem /1.05 "Source Serif 4","Source Serif 4 Fallback";
}

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 Tana Inc.
Reference design system (extracted from the live site):
- Palette: #e4bc6c, #56351c, #e2f1bb, #8d7967, #b9b698
- Typefaces: Source Serif 4, Inter
- Macrostructure: Split Studio
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/tana-inc

Sites that feel similar

Same macrostructure, different voice.

Role

Family

Size

Weight

Leading

Tracking

Sample

Source Serif 4

72px

500

1.05

-3.24px

Aa Bb Cc

Source Serif 4

48px

500

1.1

-2.16px

Aa Bb Cc

Inter

17px

500

1.3

-0.0864px

Aa Bb Cc

body

Inter

16px

400

1.4

Aa Bb Cc

button

Inter

16px

400

1.5

Aa Bb Cc

:root { --color-dominant: #e4bc6c; --color-surface: #56351c; --color-ink: #e2f1bb; --color-accent: #8d7967; --color-detail: #b9b698; } /* CSS variables exposed by source */ :root { --font-family-body: "Inter","Inter Fallback"; --space-7: 40px; --type-display-lg: 62.26px; --spacer-md: 3.5rem; --space-5: 24px; --font-size-8: 35px; --font-size-3: 16px; --color-ink: #0c0805; --font-size-7: 28px; --space-6: 32px; --font-family-heading: "Source Serif 4","Source Serif 4 Fallback"; --color-border: #eeeeee; --space-4: 16px; --color-bg: #fbfbfb; --spacer-sm: 1.5rem; --color-border-faint: #f0f0f0; --type-body-xxs: 11px; --type-heading-xs: 500 1.5625rem /1.2 "Source Serif 4","Source Serif 4 Fallback"; --accent-11: #cc4e00; --font-size-6: 24px; --font-family-signature: "Caveat","Caveat Fallback"; --type-heading-sm: 500 2rem /1.15 "Source Serif 4","Source Serif 4 Fallback"; --color-ink-soft: #3a3a3a; --type-eyebrow: 500 1.375rem /1.2 "Source Serif 4","Source Serif 4 Fallback"; --radius-2: 4px; --spacer-lg: 6rem; --font-weight-medium: 600; --type-body-lg: 1.125rem/1.55 "Inter","Inter Fallback"; --font-size-5: 20px; --spacer-xs: 1rem; --type-body-xl: 19.08px; --type-body-sm: 13px; --font-size-2: 14px; --font-weight-bold: 700; --space-3: 12px; --accent-3: #ffefd6; --space-1: 4px; --color-border-soft: #e5e5e5; --font-weight-heading: 500; --type-display-sm: 22px; --color-paper-mid: #dcdcdc; --spacer-xl: calc(6rem + 3.5rem); --type-heading-md: 500 3rem /1.1 "Source Serif 4","Source Serif 4 Fallback"; --color-surface: #ffffff; --font-size-1: 12px; --font-size-4: 18px; --type-body-md: 15px; --space-9: 64px; --radius-3: 6px; --type-section-label: 400 2rem/1.15 "Source Serif 4","Source Serif 4 Fallback"; --radius-1: 3px; --color-ink-muted: #6a6a6a; --type-body-xs: 12px; --color-ink-faint: #999999; --color-background: #fcfcfc; --accent-9: #f76b15; --color-ink-faintest: #cccccc; --type-display-md: 28px; --color-surface-dark: #0c0805; --type-heading-xl: 500 4.5rem /1.05 "Source Serif 4","Source Serif 4 Fallback"; }

Build a landing page in the visual style of Tana Inc. Reference design system (extracted from the live site): - Palette: #e4bc6c, #56351c, #e2f1bb, #8d7967, #b9b698 - Typefaces: Source Serif 4, Inter - Macrostructure: Split Studio 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/tana-inc