Heptabase — Design System

Name: Heptabase design system
Creator: Mozaika
Keywords: design system, design tokens, Heptabase, light, tailwind

light · modern · medium · tailwind · confidence 90% · deep decode

Heptabase keeps deep learning-work quiet: Instrument Sans at 36-48px/500 in soft charcoal #2E2E2E on paper #F7F7F7, Inter at 16px, and 8px-radius ghost buttons. Whiteboard canvases with hand-placed cards are the real protagonist — a thinking tool whose marketing page has the visual noise floor of a library reading room.

Open in Mozaika →

This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/ds/heptabase.

Tokens

Heptabase's decoded design system: background #F7F7F7, text #2E2E2E, accent #FF5F57, link #FEBC2E, primary #FF5F57; type scale h1 18px / h2 36px / body 18px; 4px spacing base; 6px base radius. The single interactive/action color is #2E2E2E — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.

Color roles

Role	Value
bg	`#F7F7F7`
surface	`#EAEAEA`
border	`#D8D8D8`
text	`#2E2E2E`
text_muted	`#7A7A7A`
primary	`#FF5F57`
accent	`#FF5F57`
link	`#FEBC2E`
secondary	`#207DFF`
button_bg	`#2E2E2E`
button_text	`#FFFFFF`

Using these colors

Action color #2E2E2E — the single interactive color; only on things you click or must notice, never large fills.
primary, accent are all #FF5F57 — one role, not several (the action color).
accent #FF5F57 — accent for emphasis — keep it rare on the page.
link #FEBC2E — fails contrast on the background (~1.6:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference).
secondary #207DFF — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.

Typography

Heading: Inter
Body: Inter
Mono: ui-monospace
h1: 18px
h2: 36px
body: 18px

Spacing

base unit: 4px
scale: 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 16px, 20px

Radii

base: 6px
button: 10px

Shadow

rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px 0px

Shadows (elevation)

card: rgba(0, 0, 0, 0.2) 0px 5.501px 17.289px 0px, rgba(0, 0, 0, 0.15) 0px 3.143px 3.143px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1.179px 0px

Motion

Micro-interactions run at 200ms (dominant) with cubic-bezier(0.4, 0, 0.2, 1).

durations: 200ms · 150ms · 500ms
easings: cubic-bezier(0.4, 0, 0.2, 1) · ease-out
animated properties: color, background-color, border-color, text-decoration-color

Native design tokens

Token	Value
`--background-primary`	`#f7f7f7`
`--background-secondary`	`#fff`
`--color-eggshell`	`#fdfcfb`
`--color-gravel`	`#777169`
`--whiteboard-background`	`#eeeded`
`--light-grey`	`rgba(0,0,0,.08)`
`--light-middle-grey`	`rgba(0,0,0,.13)`
`--middle-grey`	`rgba(0,0,0,.32)`
`--middle-hard-grey`	`rgba(0,0,0,.72)`
`--ultra-light-grey`	`rgba(0,0,0,.04)`

…and 110 more measured on the page.

Layout (measured)

container max-width: 1300px
nav: 72px sticky
common grid: 3 columns

Motion choreography (measured)

Load order: div.hero-segment-content → span.ml-0.5 → div.pointer-events-none → div.absolute

Scroll reveal: 3 elements rest at opacity 0, animate in over 0.5s cubic-bezier(0.4, 0, 0.2, 1).

Responsive (measured)

breakpoints: 600px · 640px · 768px · 800px · 840px · 916px
mobile (390px): hero 18px · nav hamburger

Per-section tokens (11)

Hero — light · bg #FEFCFB · text #666864 · 1 col · left
Logo Wall — light · bg #FEFCFB · text #616152 · 1 col · left
Feature — light · bg #FEFCFB · text #90877C · 1 col · left
Feature — light · bg #FEFCFB · text #A6927E · 1 col · left
Bento Grid — light · bg #FEFCFB · text #BFBEB4 · 1 col · left
Feature — light · bg #FEFCFB · text #D6D5D1 · 1 col · left
Feature — light · bg #FEFCFB · text #C4C1C7 · 1 col · left
Feature — light · bg #FDFDFD · text #B0AFBC · 1 col · left
Testimonial / Social Proof — light · bg #FFFFFF · text #9EA0A0 · 5 col · split
Gallery / Showcase — light · bg #FEFCFB · text #CFD0CF · 3 col · split
Footer — light · bg #FFFFFF · text #B7B7BA · 1 col · left

Export: DESIGN.md

# Heptabase — Design System

> light, modern, medium, tailwind — deep decode (measured live)

Heptabase keeps deep learning-work quiet: Instrument Sans at 36-48px/500 in soft charcoal #2E2E2E on paper #F7F7F7, Inter at 16px, and 8px-radius ghost buttons. Whiteboard canvases with hand-placed cards are the real protagonist — a thinking tool whose marketing page has the visual noise floor of a library reading room.

## Colors

| Role | Value |
|------|-------|
| bg | `#F7F7F7` |
| surface | `#EAEAEA` |
| border | `#D8D8D8` |
| text | `#2E2E2E` |
| text_muted | `#7A7A7A` |
| primary | `#FF5F57` |
| accent | `#FF5F57` |
| link | `#FEBC2E` |
| secondary | `#207DFF` |
| button_bg | `#2E2E2E` |
| button_text | `#FFFFFF` |

**Using these colors**

- **Action color** `#2E2E2E` — the single interactive color; it appears only on things you click or must notice (buttons, key highlights), never on large fills or backgrounds.
- `primary`, `accent` are all `#FF5F57` — one role, not several.
- **accent** `#FF5F57` — accent for emphasis — keep it rare on the page.
- **link** `#FEBC2E` — fails contrast on the background (~1.6:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference).
- **secondary** `#207DFF` — optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
- **Page coverage** (full-page screenshot pixels): `#FDFCFB` 82.7% · `#C8C2AF` 8.1% · `#81837A` 5.6% · `#DEEADE` 3.6%

## Typography

- Heading: **Inter**
- Body: **Inter**
- Mono: **ui-monospace** _(measured)_

| Role | Size / weight · line-height · tracking |
|------|------------------------------------------|
| hero | 48px / 500 · lh 62px · tracking -1.58px |
| h2 | 36px / 500 · lh 47px · tracking -0.54px |
| body | 17px / 400 · lh 26px |
| small | 16px / 400 · lh 20px |

- Weight ladder: 400 · 500 · 600 · 700 — use these exact measured weights, not the 400/600 defaults.

> **Fonts —** Inter — free, on Google.

## Spacing
- base unit: 4px (inferred from the measured scale)
- measured scale: 2px, 3px, 4px, 5px, 6px, 8px, 10px, 12px, 16px, 20px — snap all gaps/padding to these
- section rhythm: 40px top/bottom padding per section (measured)

## Radius
- base: 6px
- button: 10px
- card: 6px
- pill: 9999px
- sharp: 3px

## Buttons

| Button | Fill / text | Border | Radius | Padding | Font | Shadow |
|--------|-------------|--------|--------|---------|------|--------|
| primary | `#2E2E2E` / `#FFFFFF` | none | 9999px | 8px 16px 8px 16px | 500 16px | rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px 0px |
| secondary | `rgba(0, 0, 0, 0)` / `#2E2E2E` | none | 8px | 8px 12px 8px 12px | 400 16px | none |

**States (measured, not guessed)**

- transition: `all 0.2s cubic-bezier(0.4, 0, 0.2, 1)`

## Shadows (elevation)
- card: `rgba(0, 0, 0, 0.2) 0px 5.501px 17.289px 0px, rgba(0, 0, 0, 0.15) 0px 3.143px 3.143px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1.179px 0px`
- button: `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 15, 15, 0.1) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 2px 4px 0px`

## Motion
- durations: 200ms (dominant) · 150ms · 500ms
- easings: `cubic-bezier(0.4, 0, 0.2, 1)` (dominant) · `ease-out`
- animated properties: color, background-color, border-color, text-decoration-color

Micro-interactions use the dominant duration + easing; nothing on the page animates slower than the longest duration above — don't invent springier motion.

## Their own tokens (verbatim from :root)

| Token | Value |
|-------|-------|
| `--background-primary` | `#f7f7f7` |
| `--background-secondary` | `#fff` |
| `--color-eggshell` | `#fdfcfb` |
| `--color-gravel` | `#777169` |
| `--whiteboard-background` | `#eeeded` |
| `--light-grey` | `rgba(0,0,0,.08)` |
| `--light-middle-grey` | `rgba(0,0,0,.13)` |
| `--middle-grey` | `rgba(0,0,0,.32)` |
| `--middle-hard-grey` | `rgba(0,0,0,.72)` |
| `--ultra-light-grey` | `rgba(0,0,0,.04)` |
| `--hyper-light-grey` | `rgba(0,0,0,.02)` |
| `--border-grid` | `rgba(0,0,0,.14)` |

_…and 108 more measured on the page._

Prefer these names when extending their system — it's the brand's actual vocabulary.

## Layout (measured)
- container max 1300px · common grid: 3-col
- nav: 72px sticky · bg #FDFCFB

| Section (y) | Height | Cols | Gap | Pad y | Split |
|---|---|---|---|---|---|
| 184 | 1281 | 3 | — | 0/0 | 28/28/44 |
| 2672 | 949 | — | — | 0/0 | — |
| 3749 | 2202 | 24 | 12 | 0/0 | — |
| 4427 | 500 | — | — | 16/16 | — |

## Motion choreography (measured)
Load order: `div.hero-segment-content` @0ms → `span.ml-0.5` @1ms → `div.pointer-events-none` @322ms → `div.absolute` @322ms
- `div.hero-segment-content` — opacity 0→1 · transform translateY(4px)→translateY(0px) — 220ms ease-out
- `span.ml-0.5` — opacity 1→0 — 1200ms steps(1) · loops
- scroll reveal: 3 elements rest at opacity 0, animate in over 0.5s cubic-bezier(0.4, 0, 0.2, 1) (0 revealed during the drive).

Rebuild the timeline, not just the durations — order, delays and staggers above are the choreography.

## Components (measured)
- link: #FFFFFF · no underline

## Responsive (measured)
- breakpoints: 600px · 640px · 768px · 800px · 840px · 916px
- mobile (390px): hero 18px · body 16px · nav: hamburger

## How to apply
Paste the Tailwind `@theme` (or CSS variables) as your base, then build each
section to its spec — verify every color, radius, and font against these tokens.
Hover/focus states, shadows and motion timings above are measured from the live page — match them exactly, don't re-guess them.

---

> **Decoded with Mozaika** — measured live, not guessed. Full decoded design system + one-command install: mozaika.design/ds/heptabase

Export: Tailwind v4 (@theme)

@theme {
  /* action color #2E2E2E — the one interactive color; buttons/links/emphasis only, never large fills. */
  --color-bg: #F7F7F7;
  --color-surface: #EAEAEA;
  --color-border: #D8D8D8;
  --color-text: #2E2E2E;
  --color-text-muted: #7A7A7A;
  --color-primary: #FF5F57;  /* a brand color — but the call-to-action uses #2E2E2E, not this. */
  --color-accent: #FF5F57;  /* accent for emphasis — keep it rare on the page. */
  --color-link: #FEBC2E;  /* fails contrast on the background (~1.6:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference). */
  --color-secondary: #207DFF;  /* optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two. */
  --color-button-bg: #2E2E2E;  /* primary-button fill — the main call-to-action color. */
  --color-button-text: #FFFFFF;
  /* fonts: Inter — free, on Google. */
  --font-heading: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: "ui-monospace", ui-monospace, monospace;
  /* measured weights: 400, 500, 600, 700 — use these, not 400/600 */
  --text-hero: 48px; --font-weight-hero: 500; --leading-hero: 62px; --tracking-hero: -1.58px;
  --text-h2: 36px; --font-weight-h2: 500; --leading-h2: 47px; --tracking-h2: -0.54px;
  --text-body: 17px; --font-weight-body: 400; --leading-body: 26px;
  --text-small: 16px; --font-weight-small: 400; --leading-small: 20px;
  --radius-base: 6px;
  --radius-button: 10px;
  --radius-card: 6px;
  --radius-pill: 9999px;
  --radius-sharp: 3px;
  --shadow-card: rgba(0, 0, 0, 0.2) 0px 5.501px 17.289px 0px, rgba(0, 0, 0, 0.15) 0px 3.143px 3.143px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1.179px 0px;
  --ease-brand: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;  /* use: duration-[var(--duration-fast)] */
  --duration-base: 200ms;
  --duration-slow: 500ms;
  --section-y: 40px;  /* per-section vertical padding (measured) */
  --spacing: 4px;  /* measured base — drives the p-*/gap-* scale. steps seen on the page: 2, 3, 4, 5, 6, 8, 10, 12, 16, 20px */
}

Export: CSS variables

:root {
  /* action color #2E2E2E — the one interactive color; buttons/links/emphasis only, never large fills. */
  --bg: #F7F7F7;
  --surface: #EAEAEA;
  --border: #D8D8D8;
  --text: #2E2E2E;
  --text-muted: #7A7A7A;
  --primary: #FF5F57;  /* a brand color — but the call-to-action uses #2E2E2E, not this. */
  --accent: #FF5F57;  /* accent for emphasis — keep it rare on the page. */
  --link: #FEBC2E;  /* fails contrast on the background (~1.6:1) — this is a dark UI color, NOT a readable link; use the text or action color for links (verify against the reference). */
  --secondary: #207DFF;  /* optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two. */
  --button-bg: #2E2E2E;  /* primary-button fill — the main call-to-action color. */
  --button-text: #FFFFFF;
  --font-heading: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: "Inter", system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: "ui-monospace", ui-monospace, monospace;
  --text-hero: 48px; --weight-hero: 500; --leading-hero: 62px; --tracking-hero: -1.58px;
  --text-h2: 36px; --weight-h2: 500; --leading-h2: 47px; --tracking-h2: -0.54px;
  --text-body: 17px; --weight-body: 400; --leading-body: 26px;
  --text-small: 16px; --weight-small: 400; --leading-small: 20px;
  --radius: 6px;
  --radius-button: 10px;
  --radius-card: 6px;
  --radius-pill: 9999px;
  --radius-sharp: 3px;
  --shadow-card: rgba(0, 0, 0, 0.2) 0px 5.501px 17.289px 0px, rgba(0, 0, 0, 0.15) 0px 3.143px 3.143px 0px, rgba(0, 0, 0, 0.1) 0px 0px 1.179px 0px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 500ms;
  --section-y: 40px;
}

/* their own tokens, verbatim from the site's :root */
:root {
  --background-primary: #f7f7f7;
  --background-secondary: #fff;
  --color-eggshell: #fdfcfb;
  --color-gravel: #777169;
  --whiteboard-background: #eeeded;
  --light-grey: rgba(0,0,0,.08);
  --light-middle-grey: rgba(0,0,0,.13);
  --middle-grey: rgba(0,0,0,.32);
  --middle-hard-grey: rgba(0,0,0,.72);
  --ultra-light-grey: rgba(0,0,0,.04);
  --hyper-light-grey: rgba(0,0,0,.02);
  --border-grid: rgba(0,0,0,.14);
}
/* fonts: Inter — free, on Google. */