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

# Heptabase · Design System

> A calm canvas for learning, research, and connected thinking

**Theme:** light · **Industry:** productivity · **Source:** https://heptabase.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._

Heptabase presents a visual knowledge workspace through a quiet, editorial homepage built around generous whitespace and detailed product demonstrations. Restrained neutrals keep attention on the interface, while soft landscape imagery and colored knowledge cards add warmth and context.

## North star

Keep the page quiet and editorial so spacious typography and authentic product interfaces—not decorative UI—carry the story.

## Overview

The page uses a warm near-white canvas (#fdfcfb) throughout, with dark charcoal typography and pale neutral surfaces that keep the product demonstrations legible. The strongest color comes from the media itself: muted landscape imagery behind interface screenshots, and soft green, blue, yellow, and lilac note colors inside the product. Treat these as contextual product visuals rather than a saturated brand palette. Headlines use Instrument Sans with a measured negative tracking, while Inter carries navigation, body copy, and controls; small monospace labels are reserved for compact metadata. The hero is centered and open, followed by left-aligned feature explanations and large, carefully framed interface previews. Later sections move into feature grids, a centered AI Tutor showcase, compact benefits, testimonials, and community examples. Fine neutral borders and restrained shadows separate cards without making the page feel heavy.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Warm Canvas | `#fdfcfb` | `--color-warm-canvas` | brand | Dominant page background and the warm, nearly white field surrounding sections and product demonstrations. |
| Graphite Ink | `#2e2e2e` | `--color-graphite-ink` | brand | Primary headings, body emphasis, navigation, and dark primary calls to action. |
| Cloud Surface | `#f7f7f7` | `--color-cloud-surface` | surface | Pale neutral card and interface surfaces that give content subtle separation from the canvas. |
| Soft Divider | `#e9e8e7` | `--color-soft-divider` | neutral | Most visible measured border tone for cards, sections, and fine interface rules. |
| Muted Graphite | `#464646` | `--color-muted-graphite` | neutral | Secondary paragraph and supporting text, softer than the main charcoal headings. |
| Link Blue | `#207dff` | `--color-link-blue` | accent | Inline action and guide links; use sparingly as the clearest interface accent. |
| Sage Haze | `#d6e3d7` | `--color-sage-haze` | semantic | Soft green gradient and product-visual tone, not a dominant interface color. |
| Oat Mist | `#eee8dc` | `--color-oat-mist` | semantic | Warm tint in atmospheric gradient and illustrative product imagery. |
| Muted Sand | `#d9d1c1` | `--color-muted-sand` | semantic | Earthy gradient tone visible behind product mockups and within imagery. |
| Pale Stone | `#d3d3d3` | `--color-pale-stone` | surface | Secondary card surface and occasional low-contrast interface separation. |
| Brown Slate | `#5f564b` | `--color-brown-slate` | neutral | Low-frequency supporting text, likely tied to embedded product content rather than the page identity. |
| Weathered Gray | `#7d7d7a` | `--color-weathered-gray` | neutral | Subdued footer and supporting copy. |
| Violet Gray | `#6a6972` | `--color-violet-gray` | neutral | Occasional footer or link text, a minor supporting tone. |
| Leaf Green | `#5a8a5a` | `--color-leaf-green` | accent | Selective green emphasis inside text and knowledge-product visuals; not a primary CTA color. |
| Quiet Gray | `#adadad` | `--color-quiet-gray` | neutral | Low-emphasis text or interface details within product imagery. |
| Warm Charcoal | `#3d3832` | `--color-warm-charcoal` | neutral | Occasional dark text sampled from embedded content, not a core page color. |

### Semantic aliases

`--color-canvas` → `#fdfcfb` (Warm Canvas) · `--color-surface` → `#f7f7f7` (Cloud Surface) · `--color-surface-2` → `#e9e8e7` (Soft Divider) · `--color-surface-3` → `#d3d3d3` (Pale Stone) · `--color-text` → `#2e2e2e` (Graphite Ink) · `--color-text-muted` → `#464646` (Muted Graphite) · `--color-border` → `#e9e8e7` (Soft Divider) · `--color-accent` → `#207dff` (Link Blue) · `--color-accent-2` → `#5a8a5a` (Leaf Green)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#2e2e2e` | `#fdfcfb` | 13.25:1 | AAA |
| `#2e2e2e` | `#f7f7f7` | 12.68:1 | AAA |
| `#2e2e2e` | `#e9e8e7` | 11.1:1 | AAA |
| `#2e2e2e` | `#d3d3d3` | 9.07:1 | AAA |
| `#464646` | `#fdfcfb` | 9.21:1 | AAA |
| `#464646` | `#f7f7f7` | 8.81:1 | AAA |
| `#464646` | `#e9e8e7` | 7.71:1 | AAA |
| `#464646` | `#d3d3d3` | 6.3:1 | AA |
| `#207dff` | `#fdfcfb` | 3.77:1 | AA-large |
| `#207dff` | `#f7f7f7` | 3.6:1 | AA-large |

### Gradients

- `radial-gradient(110% 90% at 10% 10%, rgba(255, 255, 255, 0.3), rgba(0, 0, 0, 0) 52%), radial-gradient(95% 75% at 92% 8%, rgba(206, 222, 207, 0.82), rgba(0, 0, 0, 0) 56%), linear-gradient(rgb(238, 232, 220), rgb(217, 209,`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| __Inter_611a59 | `--font-body` | webfont | 400, 500, 600, 450, 700 | Main interface and reading face for body copy, navigation, buttons, and smaller headings. | Inter |
| ui-monospace | `--font-mono` | system | 400, 500 | Compact captions and code-like metadata. | Roboto Mono |
| __instrumentSans_c1b0f9 | `--font-display` | webfont | 500 | Display face for the main hero and section headlines. | Instrument Sans |

- **__Inter_611a59:** Measured weights span 400–700; use mostly regular body text and medium controls, with natural casing.
- **ui-monospace:** Restrict to small utility labels; retain a technical, unembellished monospace texture.
- **__instrumentSans_c1b0f9:** Medium weight, sentence case, and tight negative tracking make large headlines feel composed rather than loud.

### Type scale — Perfect Fourth (ratio ≈ 1.316, base 16px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 48px | 500 | 1.3 | -0.033em | — | __instrumentSans_c1b0f9 | Centered two-line hero statement above the lead product preview. |
| h2 | 44px | 500 | 1.4 | -0.033em | — | __instrumentSans_c1b0f9 | Major feature-section and testimonial headings. |
| h3 | 36px | 500 | 1.3 | -0.015em | — | __instrumentSans_c1b0f9 | Subsection headlines within feature and product content. |
| h4 | 20px | 500 | 1.5 | 0 | — | __Inter_611a59 | Compact feature-card and supporting content headings. |
| body | 16px | 400 | 1.5 | 0 | — | __Inter_611a59 | Explanatory paragraphs, testimonials, and descriptive card copy. |
| caption | 13px | 400 | 1.6 | 0 | — | ui-monospace | Small metadata, technical labels, and compact annotations. |
| button | 16px | 500 | 1.25 | 0 | — | __Inter_611a59 | Primary trial and AI Tutor action labels. |
| nav | 16px | 400 | 1.25 | 0 | — | __Inter_611a59 | Header navigation and footer navigation links. |
| link | 12px | 400 | 1.5 | 0 | — | __Inter_611a59 | Inline guide and lightweight supporting links. |
| code | 13px | 400 | 1.6 | 0 | — | ui-monospace | Code-like or technical snippets within product demonstrations. |

## Spacing & layout

- Base unit **4px**, density **comfortable**.
- Scale (most used values): 2, 3, 4, 5, 6, 7, 8, 10, 12, 16, 20, 24, 32, 48 px.
- Section rhythm 48px · element gap 8px · card padding 24px · max content width 1300px.

Build within a measured maximum content width of 1300px, with a comfortable density and recurring section spacing. The hero is centered, while feature sections alternate into left-aligned introductions, full-width product media, and a two-column feature grid. Use multi-column layouts for compact benefit cards, testimonials, and community examples. Keep generous open space around major headings and screenshots; product media should be large enough to read as the focus. Preserve clear transitions between sections without adding strong background bands.

## Shape & elevation

- Radius: button `6px` · card `12px` · media `50%` · nav `8px` · link `9999px` · xs `4px` · sm `5px` · md `6px` · lg `8px` · xl `9px` · 2xl `10px` · pill `9999px`
- Shadow `lg` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 0px 4px 0px, rgba(0, 0, 0, 0.04) 0px 4px 8px 0px, rgba(0, 0, 0, 0.05) 0px 16px 26px 0px`
- Shadow `xl` (card): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 14px 32px 0px, rgba(0, 0, 0, 0.14) 0px 28px 70px 0px`
- Shadow `hairline` (button, media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px`
- Shadow `sm` (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`
- Shadow `xl-2` (card): `rgba(0, 0, 0, 0.06) 0px 0px 0px 1px, rgba(0, 0, 0, 0.08) 0px 14px 32px 0px, rgba(0, 0, 0, 0.05) 0px 28px 70px 0px`
- Shadow `lg-2` (media): `rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(15, 15, 15, 0.05) 0px 0px 0px 1px, rgba(15, 15, 15, 0.1) 0px 3px 6px 0px, rgba(15, 15, 15, 0.2) 0px 9px 24px 0px`
- Motion: standard transition `0.15s cubic-bezier(0.4, 0, 0.2, 1)` on interactive elements.

Most of the page reads as flat and light, with fine neutral borders defining card edges. Reserve soft, layered shadows for prominent media and selected floating interface panels; avoid applying a deep shadow to every card. Interface screenshots sit above muted atmospheric backdrops, while simpler content cards remain restrained and clean.

## Imagery

Use authentic-looking product interface screenshots as the primary visual material, framed as wide, rounded media panels. The hero and feature demonstrations sit over soft, muted landscape imagery that adds sage and sandy warmth without overpowering the UI. Include whiteboards, notes, highlighted source documents, and AI panels as interface content. Testimonials use small user portraits; community cards use miniature workspace previews. Avoid decorative stock photography as the main story.

## Components

### Header navigation

A quiet horizontal header with a left-aligned mark, centered product links, and right-side login plus a dark pill-shaped Get started action.

### Hero and trial action

Centered two-line display headline, muted explanatory copy, a small segmented Home/AI Tutor control, and a dark trial CTA.

### Product media panel

Large, softly framed product screenshot over a muted landscape backdrop; interface content remains the visual focus.

### Feature showcase

Left-aligned section heading and wide interface image, sometimes preceded by compact source-type tabs such as PDF, YouTube, Note, and Journal.

### Feature card grid

Two-column capability previews and compact multi-column essentials cards, separated with pale surfaces and fine borders.

### AI Tutor showcase

Centered introduction, restrained text links and CTA, followed by a large two-pane tutor interface demonstration.

### Testimonial cards

A dense, multi-column collection of white user quote cards with small portraits, names, and subtle borders.

### Footer

Quiet multi-column link groups with brand mark, product and resource navigation, and subdued legal copy.

### Measured component styles

- **Primary button** (“Get started”): background #2e2e2e · text #ffffff · radius 9999px · padding 8px 16px · 500 16px __Inter_611a59
- **Secondary button** (“YouTube”): transparent background · text #2e2e2e · border 1px solid #dcdbdb · radius 6px · padding 8px 10px 8px 12px · 400 16px __Inter_611a59
- **Link** (“Read our guide”): transparent background · text #207dff · radius 0px · padding 0px · 500 16px __Inter_611a59
- **Card** (“James A. Hernández @LifespanDevelop Wow ”): background #ffffff · text #000000 · border 1px solid #e8e8e8 · radius 12px · padding 24px · 400 16px __Inter_611a59
- **Navigation item** (“AI Tutor”): transparent background · text #2e2e2e · radius 8px · padding 8px 12px · 400 16px __Inter_611a59

## Do

- Use Warm Canvas (#fdfcfb) as the dominant page background.
- Set display headlines in a restrained Instrument Sans-like face.
- Keep the hero centered and give section content room to breathe.
- Show detailed product interfaces as the main visual evidence.
- Use Graphite Ink (#2e2e2e) for primary text and dark CTAs.
- Reserve Link Blue (#207dff) for selective inline links.
- Keep borders pale and shadows soft, mainly around media.

## Don't

- Do not introduce saturated full-width color bands.
- Do not make the page feel like a dense dashboard.
- Do not treat screenshot-only illustration colors as core brand colors.
- Do not put heavy shadows on every card.
- Do not center every section; preserve left-aligned feature introductions.
- Do not use oversized decorative icons instead of product imagery.

## Agent prompt

Create a calm, product-led page in the Heptabase visual style. Use Warm Canvas (#fdfcfb) as the broad background, Graphite Ink (#2e2e2e) for headings and primary actions, Cloud Surface (#f7f7f7) for quiet panels, and Soft Divider (#e9e8e7) for fine borders. Add Link Blue (#207dff) sparingly for inline links. Set large headlines in an Instrument Sans-like display face with tight tracking; use Inter-like sans serif for navigation and body copy. Center the introductory hero, then alternate left-aligned feature copy with large, carefully framed workspace previews. Keep a comfortable rhythm, generous whitespace, restrained card styling, and soft shadows only where media needs depth. Any sage or sand tones should live mainly in illustrations or screenshot backdrops. Make the product interface the primary visual proof.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Centered hero with segmented selector, headline, short supporting text, CTA, and wide product media. | trial conversion, mode selector | centered headline, dark CTA, wide media preview |
| 2 | feature-split | Left-aligned explanatory heading, compact source tabs, and broad product interface preview. | source-type tabs, feature explanation | PDF and note tabs, large screenshot |
| 3 | product-showcase | Single-column introduction above a large whiteboard and linked-card preview. | visual thinking demonstration | wide media, connected cards |
| 4 | feature-grid | Introductory heading followed by a two-column collection of capability previews. | capability discovery, integration overview | feature tiles, embedded interface previews |
| 5 | product-showcase | Centered section title and copy, CTA, then a large two-column tutor interface. | watch demo, start learning | centered intro, dark CTA, large tutor preview |
| 6 | feature-grid | Centered heading over a compact four-column row of benefit cards. | at-a-glance benefits | compact grid, pale card surfaces |
| 7 | feature-grid | Centered headline above two wide learning-method previews. | learning-path discovery, guide links | two-column cards, media-led previews |
| 8 | testimonials | Centered section title above a dense, multi-column field of quote cards. | social proof, scan user experiences | portrait avatars, white quote cards |
| 9 | gallery | Centered heading above three community example cards and a small follow-up link. | browse examples, explore more | three-column gallery, preview thumbnails |
| 10 | footer | Brand and social links on the left, grouped product and resource links on the right. | site navigation, social links | multi-column link groups, subdued legal text |

## Source CSS custom properties (selected)

```css
--background-primary: #f7f7f7;
--background-secondary: #fff;
--color-eggshell: #fdfcfb;
--color-gravel: #777169;
--whiteboard-background: #eeeded;
--border-grid: rgba(0,0,0,.14);
--menu-texture-bg-hard: hsla(0,0%,97%,.9);
--text-selection-background: rgba(75,155,230,.3);
--scrim-color: rgba(0,0,0,.32);
--transparent-text: rgba(0,0,0,.12);
--info-color: #fff;
--menu-bg: #fff;
--text-color: #2e2e2e;
--tooltip-bg: rgba(0,0,0,.9);
--scrollbar-color: #d3d1cc;
--logo-color: #2e2e2e;
--media-toolbar-bg: hsla(0,0%,8%,.8);
--bg-yellow: #f5e090;
--bg-red: #f2c2c1;
--bg-blue: #bed5e3;
--bg-green: #c2d8cc;
--bg-black: #cacaca;
--bg-orange: #f8cfb2;
--bg-purple: #ccccde;
--bg-yellow-wb-hsl: 46,74%,88%;
--bg-red-wb-hsl: 356,60%,90%;
--bg-blue-wb-hsl: 197,47%,88%;
--bg-green-wb-hsl: 103,23%,86%;
--bg-black-wb-hsl: 0,0%,84%;
--bg-orange-wb-hsl: 31,64%,88%;
--bg-purple-wb-hsl: 264,26%,88%;
--bg-yellow-wb: hsl(46,74%,88%);
--bg-red-wb: hsl(356,60%,90%);
--bg-blue-wb: hsl(197,47%,88%);
--bg-green-wb: hsl(103,23%,86%);
--bg-black-wb: hsl(0,0%,84%);
--bg-orange-wb: hsl(31,64%,88%);
--bg-purple-wb: hsl(264,26%,88%);
--border-white-sect-hsl: 0,0%,68%;
--border-yellow-sect-hsl: 45,79%,57%;
```

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