Typography
scale ratio 1.231- Intercss: __Inter_582115body400 450 500 600 70074%
- Instrument Sanscss: __instrumentSans_c1b0f9display50019%
- 蘋方-簡css: __Inter_582115other4004%
- Hiragino Sanscss: __Inter_582115other4002%
- Menlocss: ui-monospacemono4000%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Instrument Sans | 48px | 500 | 1.3 | -0.033em |
| headline | Instrument Sans | 44px | 500 | 1.4 | -0.033em |
| title | Inter | 16px | 600 | 1.5 | 0em |
| body | Inter | 17px | 400 | 1.5 | 0em |
| body-sm | Inter | 14px | 400 | 1.429 | 0em |
| mono | Menlo | 11px | 400 | 1.455 | 0em |
Type scale
Aa12Aa14Aa16Aa17Aa18Aa32Aa36Aa44Aa48
- Body size
- 17px / 1.5
- Display size
- 48px
- Display tracking
- -0.033em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 13.58:1
- Muted on bg
- 9.23:1
- Accent on bg
- 3.86:1
- Dark mode
- none
Space, shape & depth
Spacing scale
- 2
- 3
- 4
- 6
- 7
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 48
Corner radii
46812pill
Shadows (5)
- Borders
- heavy, 3px
- Section padding
- 100px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #2E2E2E
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 8px 16px
- height
- 36px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 500
button-secondary
Readwise
- textColor
- #000000B8
- rounded
- 9999px
- padding
- 3px 12px
- height
- 28px
- fontFamily
- Inter
- fontSize
- 14px
- fontWeight
- 500
- border
- 1px solid #00000014
card
- rounded
- 12px
- padding
- 24px
- backgroundColor
- #FFFFFF
- border
- 1px solid #00000014
Layout & motion
- Container
- 1300px
- Grid columns
- 5
- Hero
- centered+media-below
- Navigation
- top-sticky
- Page height
- 9,008px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 500ms
- Transitions
- 105
- Keyframes
- 2
- Stack
- next.js, tailwind, posthog, vercel
Page sections (11)
section labels are heuristic
01nav
02heroHeptabase
03feature detail?AI gives you answers. Heptabase builds your worldview.
04logosDeeply understand your sources with .
05features?XII. Of the academical or sceptical Philosophy, Part III — Proper Objects of Sci
06feature detail?Forge your worldview with nested .
07features?. divided and re-united without loss , and can be keep Metals won because they
08gallery?Designed with the best methods for learning.
09features?Loved by users worldwide.
10features?Explore what people are making
11footerHeptabase
How Heptabase compares
- Body text
- 17px: larger than 65% of indexed sites (median 16px).
- Largest heading
- 48px: smaller than 68% of indexed sites (median 60px).
- Type scale
- 1.23×: flatter than 69% of indexed sites (median 1.28×).
- Container
- 1300px: wider than 70% of indexed sites (median 1242px).
- Text contrast
- 13.6:1: lower than 83% of indexed sites (median 17.6:1).
- Page length
- 9,008px: longer than 59% of indexed sites (median 8,217px).
- Corner radius
- Mostly 6px, shared by 14 of 274 indexed sites (5%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Instrument Sans
- One of 4 indexed sites that load Instrument Sans (1%).
- Color scheme
- Light by default, like 75% of indexed sites. Like 82% of sites, it doesn't switch with the system dark mode setting.
In short
What font does Heptabase use?
Heptabase uses Inter (loaded as "__Inter_582115") for body text. Instrument Sans (loaded as "__instrumentSans_c1b0f9") is used for headings.
What are Heptabase's brand colors?
Heptabase's website uses a light scheme: background #FFFFFF, surface #EEEDED, text #2E2E2E, muted text #000000B8 and borders #00000014.
How is Heptabase's website laid out?
The most common corner radius is 6px, body text is 17px with 1.5 line height, and the page container is 1300px wide.
