Typography
scale ratio 1.193- Haskoybody400 500 70066%
- Generalsanscss: Generalsans Webfontdisplay400 50032%
- Jet Brains Monocss: JetBrainsMonomono4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Haskoy | 54px | 500 | 1.2 | 0em |
| headline | Generalsans | 38.7px | 500 | 1.2 | 0em |
| title | Generalsans | 28.08px | 500 | 1.25 | 0em |
| body | Haskoy | 18px | 400 | 1.5 | 0em |
| body-sm | Haskoy | 16px | 400 | 1.4 | 0em |
| mono | Jet Brains Mono | 14.4px | 400 | 1.7 | 0em |
Type scale
Aa12.5Aa13Aa14Aa14.5Aa15Aa16Aa17Aa18Aa18.5Aa20Aa23.5Aa28Aa38.5Aa52
- Body size
- 18px / 1.5
- Display size
- 54px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 17.85:1
- Muted on bg
- 7.23:1
- Accent on bg
- 1.65:1
- Dark mode
- none
Declared accent tokens
- --accent#84F6B1not on page
- --yellow-accent#FFFA84not on page
Space, shape & depth
Spacing scale
- 7
- 8
- 9
- 9.5
- 10
- 10.5
- 12
- 12.5
- 14
- 16
- 17
- 18
- 18.5
- 23.5
Corner radii
6.589.510.514.515.5161718.527pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 130px
Components
exact computed valuesbutton-primary
Book a demo
- backgroundColor
- #0A0B0B
- textColor
- #FFFFFF
- rounded
- 8px
- padding
- 8px 30px
- height
- 35.6px
- fontFamily
- Haskoy
- fontSize
- 14px
- fontWeight
- 500
button-secondary
Try for free
- backgroundColor
- #CEB4FA
- textColor
- #0A0B0B
- rounded
- 8px
- padding
- 8px 30px
- height
- 35.6px
- fontFamily
- Haskoy
- fontSize
- 14px
- fontWeight
- 500
card
- rounded
- 15.3px
- padding
- 18.7px
- backgroundColor
- #FFFFFF
- border
- 1px solid #94949466
- shadow
- rgba(192, 143, 238, 0.2) 0px 2px 20px 0px
Layout & motion
- Container
- 960px
- Grid columns
- 2
- Hero
- split
- Navigation
- top-sticky
- Page height
- 11,246px
- Easing
- ease
- Durations
- 200ms 300ms 350ms 400ms
- Transitions
- 96
- Keyframes
- 0
- Stack
- webflow, gsap, jquery, hubspot, posthog, intercom, google-tag-manager, fastly
Page sections (11)
section labels are heuristic
01nav
02heroIntroducing Puzzle 2.0: AI-native accounting software + Puzzle accounting servic
03features?One platform underneath. Pick how much you do yourself.
04pricingAsk anything. Puzzle prepares the work. You approve it.
05features?Your books. Your way. With an expert when you need one.
06features?How much help do you want?
07feature detail?50% faster month-end close — or your money back.
08feature detail?What would you do with more time?
09features?Leave legacy accounting & manual processes behind. Keep everything that matters.
10faqAccurate Books. AI Speed. Starting Now.
11footer
How Puzzle compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 54px: smaller than 60% of indexed sites (median 60px).
- Type scale
- 1.19×: flatter than 84% of indexed sites (median 1.28×).
- Container
- 960px: narrower than 85% of indexed sites (median 1242px).
- Text contrast
- 17.9:1: higher than 53% of indexed sites (median 17.6:1).
- Page length
- 11,246px: longer than 77% of indexed sites (median 8,217px).
- Corner radius
- Mostly 16px, shared by 11 of 274 indexed sites (4%).
- Haskoy
- The only site in the index that loads Haskoy.
- Generalsans
- The only site in the index that loads Generalsans.
- 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 Puzzle use?
Puzzle uses Haskoy for body text. Generalsans (loaded as "Generalsans Webfont") is used for headings. Jet Brains Mono (loaded as "JetBrainsMono") is used for code.
What are Puzzle's brand colors?
Puzzle's website uses a light scheme: background #F3F4F1, surface #FFFFFF, text #0A0B0B, muted text #0A0B0BB3 and borders #0A0B0B33.
How is Puzzle's website laid out?
The most common corner radius is 16px, body text is 18px with 1.5 line height, and the page container is 960px wide.
