Typography
scale ratio 1.334- ITC Garamond Condenseddisplay400 50068%
- GT Alpina Typewritermono400 50031%
- Apercubody4000%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | ITC Garamond Condensed | 120px | 400 | 1 | -0.03em |
| headline | GT Alpina Typewriter | 18px | 400 | 1.25 | 0em |
| title | GT Alpina Typewriter | 16px | 400 | 1.2 | 0em |
| body | GT Alpina Typewriter | 16px | 400 | 1.5 | 0em |
| body-sm | Apercu | 13px | 400 | 1 | 0em |
| label | GT Alpina Typewriter | 16px | 500 | 1.5 | 0em |
Type scale
Aa12Aa13Aa16Aa18Aa20Aa46Aa48Aa72Aa102Aa120
- Body size
- 16px / 1.5
- Display size
- 120px
- Display tracking
- -0.03em
- Case
- title
Color
light schemePalette by painted area
- Text on bg
- 7.17:1
- Muted on bg
- undefined:1
- Dark mode
- none
Declared accent tokens
- --color-accent#9EEF80painted
- --color-brand#D1E030painted
Space, shape & depth
Spacing scale
- 4
- 8
- 10
- 12
- 16
- 20
- 22
- 24
- 30
- 32
- 35
- 36
- 40
- 48
Corner radii
81020pill
Shadows (0)
none
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
SHOP NOW
- backgroundColor
- #D1E030
- textColor
- #3C422E
- rounded
- 0px
- padding
- 0px 0px
- height
- 34px
- fontFamily
- GT Alpina Typewriter
- fontSize
- 16px
- fontWeight
- 500
button-secondary
Cart
- textColor
- #3C422E
- rounded
- 9999px
- padding
- 0px 0px
- height
- 36px
- fontFamily
- GT Alpina Typewriter
- fontSize
- 16px
- fontWeight
- 500
- border
- 1px solid #3C422E
card
- rounded
- 20px
- padding
- 0px
- border
- 1px solid #3C422E
input
- rounded
- 8px
- height
- 58px
- padding
- 16px 16px
- border
- 1px solid #3C422E
Layout & motion
- Container
- 1092px
- Grid columns
- 12
- Hero
- left-over-media
- Navigation
- top-static+transparent
- Page height
- 8,664px
- Easing
- ease-in-out
- Durations
- 250ms 300ms
- Transitions
- 58
- Keyframes
- 5
- Stack
- shopify, vue, tailwind, google-tag-manager, cloudflare
Page sections (2)
01nav
How GRAZA compares
- Body text
- 16px, the same as 40% of indexed sites (median 16px).
- Largest heading
- 120px: larger than 95% of indexed sites (median 60px).
- Type scale
- 1.33×: steeper than 65% of indexed sites (median 1.28×).
- Container
- 1092px: narrower than 76% of indexed sites (median 1242px).
- Text contrast
- 7.2:1: lower than 96% of indexed sites (median 17.6:1).
- Page length
- 8,664px: longer than 53% of indexed sites (median 8,217px).
- Corner radius
- Mostly 10px, shared by 9 of 274 indexed sites (3%).
- ITC Garamond Condensed
- The only site in the index that loads ITC Garamond Condensed.
- GT Alpina Typewriter
- The only site in the index that loads GT Alpina Typewriter.
- 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 GRAZA use?
GRAZA uses ITC Garamond Condensed for headings. GT Alpina Typewriter is used for code. Apercu is used for body text.
What are GRAZA's brand colors?
GRAZA's website uses a light scheme: background #D1E030, surface #F6E6D9, text #3C422E and borders #3C422E.
How is GRAZA's website laid out?
The most common corner radius is 10px, body text is 16px with 1.5 line height, and the page container is 1092px wide.
