Typography
scale ratio 1.134- DM Sansdisplay + body400 500 600 700100%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | DM Sans | 56px | 600 | 1.16 | -0.01em |
| body | DM Sans | 14px | 500 | 1.2 | -0.01em |
| body-sm | DM Sans | 12px | 400 | 1.5 | -0.01em |
| label | DM Sans | 18px | 400 | 1.48 | -0.01em |
Type scale
Aa12Aa14Aa15Aa16Aa17.5Aa18Aa20Aa24Aa40Aa44Aa48Aa51Aa56
- Body size
- 14px / 1.46
- Display size
- 56px
- Display tracking
- -0.01em
- Case
- mixed
Color
light schemePalette by painted area
- Text on bg
- 15.90:1
- Muted on bg
- 8.20:1
- Accent on bg
- 2.37:1
- Dark mode
- none
Space, shape & depth
Spacing scale (base 4px)
- 4
- 6
- 8
- 10
- 12
- 13
- 16
- 20
- 22
- 28
- 32
- 40
- 96
Corner radii
1014162024pill
Shadows (2)
- Borders
- hairline, 1px
- Section padding
- 113px
Components
exact computed valuesbutton-primary
Start for Free
- backgroundColor
- #FF891C
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 10px 22px
- height
- 44px
- fontFamily
- DM Sans
- fontSize
- 16px
- fontWeight
- 500
card
- rounded
- 10px
- padding
- 32px
- backgroundColor
- #FAFAFA
- border
- 1px solid #F2F2F2
input
- rounded
- 20px
- height
- 38px
- padding
- 8px 12px
Layout & motion
- Container
- 720px
- Grid columns
- n/a
- Hero
- split
- Navigation
- top-static+transparent
- Page height
- 12,067px
- Easing
- ease
- Durations
- 200ms
- Transitions
- 10
- Keyframes
- 0
- Stack
- webflow, jquery, google-tag-manager, cloudflare
Page sections (6)
section labels are heuristic
01nav
05logos
06footer
How Sunsama compares
- Body text
- 14px: smaller than 82% of indexed sites (median 16px).
- Largest heading
- 56px: smaller than 53% of indexed sites (median 60px).
- Type scale
- 1.13×: flatter than 99% of indexed sites (median 1.28×).
- Container
- 720px: narrower than 93% of indexed sites (median 1242px).
- Text contrast
- 15.9:1: lower than 68% of indexed sites (median 17.6:1).
- Page length
- 12,067px: longer than 82% of indexed sites (median 8,217px).
- Corner radius
- Mostly 10px, shared by 9 of 274 indexed sites (3%).
- DM Sans
- The only site in the index that loads DM Sans.
- 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 Sunsama use?
Sunsama uses DM Sans for headings and body text.
What are Sunsama's brand colors?
Sunsama's website uses a light scheme: background #FFFFFF, surface #F8F8F8, text #202228, muted text #4C4F56 and borders #F2F2F2.
How is Sunsama's website laid out?
The most common corner radius is 10px, body text is 14px with 1.46 line height, and the page container is 720px wide.
