Typography
scale ratio 1.152- Untitled Serif Fontcss: UntitledSerifFontdisplay40060%
- Untitled Sans Fontcss: UntitledSansFontbody400 50026%
- Inter Fontcss: InterFontother400 500 600 70014%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Untitled Serif Font | 66px | 400 | 1 | -0.03em |
| headline | Untitled Serif Font | 54px | 400 | 1.1 | -0.02em |
| title | Untitled Serif Font | 36px | 400 | 1.22 | -0.03em |
| body | Untitled Sans Font | 16px | 400 | 1.4 | -0.02em |
| body-sm | Inter Font | 15px | 400 | 1.4 | -0.11em |
| label | Untitled Sans Font | 14px | 400 | 1.5 | 0em |
Type scale
Aa12Aa13Aa14Aa15Aa16Aa18Aa20Aa24Aa30Aa32Aa36Aa46Aa54Aa56Aa66
- Body size
- 16px / 1.4
- Display size
- 66px
- Display tracking
- -0.03em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 19.68:1
- Muted on bg
- 9.80:1
- Accent on bg
- 1.57:1
- Dark mode
- none
Declared accent tokens
- --accent#427E8Anot on page
Space, shape & depth
Spacing scale (base 4px)
- 2
- 3
- 4
- 5
- 6
- 8
- 10
- 12
- 16
- 20
- 24
- 32
- 40
- 48
Corner radii
481214162432pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 180px
Components
exact computed valuesbutton-primary
Try Craft Free
- backgroundColor
- #030302
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 8px 14px
- height
- 36px
- fontFamily
- Untitled Sans Font
- fontSize
- 16px
- fontWeight
- 500
- shadow
- rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0
card
- rounded
- 24px
- padding
- 0px
- shadow
- rgba(0, 0, 0, 0.01) 0px 50px 40px 0px, rgba(0, 0, 0, 0.02) 0px 50px 40px 0px, rgba(0, 0, 0, 0.05) 0px 20px 40px 0px, rgb
Layout & motion
- Container
- 1080px
- Grid columns
- 2
- Hero
- split
- Navigation
- none-detected
- Page height
- 11,057px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 500ms
- Transitions
- 121
- Keyframes
- 0
- Stack
- next.js, tailwind, radix-ui, shadcn/ui, posthog, cloudflare
Page sections (11)
section labels are heuristic
01heroYour space for notes, tasks, and big ideas
02logosCraft isn’t just for one thing, it’s for things.
03testimonialsHow people use Craft
04logosImagine the possibilities when everything's connected to Craft
05feature detail?Planning that doesn't feel like work
06feature detail?Structure That Adapts to Your Thinking
07features?Make it unmistakably yours
08feature detail?Stay in the loop
09pricingYour pace, your plan
10feature detail?Let’s get started
11footer
How Craft compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 66px: larger than 66% of indexed sites (median 60px).
- Type scale
- 1.15×: flatter than 96% of indexed sites (median 1.28×).
- Container
- 1080px: narrower than 78% of indexed sites (median 1242px).
- Text contrast
- 19.7:1: higher than 72% of indexed sites (median 17.6:1).
- Page length
- 11,057px: longer than 76% of indexed sites (median 8,217px).
- Corner radius
- Mostly 24px, shared by 7 of 274 indexed sites (3%).
- Untitled Serif Font
- The only site in the index that loads Untitled Serif Font.
- Untitled Sans Font
- The only site in the index that loads Untitled Sans Font.
- 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 Craft use?
Craft uses Untitled Serif Font (loaded as "UntitledSerifFont") for headings. Untitled Sans Font (loaded as "UntitledSansFont") is used for body text. Inter Font (loaded as "InterFont") is used for other.
What are Craft's brand colors?
Craft's website uses a light scheme: background #FCF9F7, surface #E4E4E7, text #030302, muted text #030302BF and borders #03030217.
How is Craft's website laid out?
The most common corner radius is 24px, body text is 16px with 1.4 line height, and the page container is 1080px wide.
