Typography
scale ratio 1.150- Writercss: writerbody40072%
- Menlocss: ui-monospacemono40024%
- Plex Serifcss: plexSerifdisplay390 400 4105%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Plex Serif | 25.6px | 390 | 1.25 | 0em |
| headline | Plex Serif | 16px | 400 | 1.5 | 0em |
| body | Writer | 11px | 400 | 1.5 | 0em |
| label | Writer | 12px | 400 | 1.333 | 0em |
| mono | Menlo | 11px | 400 | 1.818 | 0em |
Type scale
Aa10Aa11Aa12Aa13Aa14Aa16Aa18.5Aa25.5
- Body size
- 11px / 1.5
- Display size
- 25.6px
- Display tracking
- 0em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 14.67:1
- Muted on bg
- 7.47:1
- Accent on bg
- 6.71:1
- Dark mode
- follows system
Declared accent tokens
- --color-accent-blue#1348DCpainted
Space, shape & depth
Spacing scale (base 4px)
- 2
- 4
- 6
- 8
- 16
Corner radii
2346pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- n/a
Components
exact computed valuesbutton-primary
Download
- backgroundColor
- #1348DC
- textColor
- #FFFFFF
- rounded
- 4px
- padding
- 6px 4px
- height
- 33.5px
- fontFamily
- Writer
- fontSize
- 13px
- fontWeight
- 400
- border
- 1px solid #2B7FFF66
- shadow
- rgb(5, 55, 148) 0px -2px 0px 0px inset, rgb(230, 239, 254) 0px 1px 3px 0px
button-secondary
Download
- backgroundColor
- #BF3C27
- textColor
- #FFFFFF
- rounded
- 4px
- padding
- 6px 4px
- height
- 33.5px
- fontFamily
- Writer
- fontSize
- 13px
- fontWeight
- 400
- border
- 1px solid #BE3B2799
- shadow
- rgb(127, 39, 26) 0px -2px 0px 0px inset, rgb(251, 236, 234) 0px 1px 3px 0px
card
- rounded
- 4px
- padding
- 0px
- backgroundColor
- #F5F5F5
- border
- 1px solid #DFDFE0
- 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
Layout & motion
- Container
- 1022px
- Grid columns
- 2
- Hero
- left-aligned+media-below
- Navigation
- none-detected
- Page height
- 900px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 400ms
- Transitions
- 7
- Keyframes
- 1
- Stack
- next.js, tailwind, google-tag-manager, cloudflare
Page sections (1)
01heroZed Industries
How Zed compares
- Body text
- 11px: smaller than 100% of indexed sites (median 16px).
- Largest heading
- 25.6px: smaller than 91% of indexed sites (median 60px).
- Type scale
- 1.15×: flatter than 96% of indexed sites (median 1.28×).
- Container
- 1022px: narrower than 83% of indexed sites (median 1242px).
- Text contrast
- 14.7:1: lower than 79% of indexed sites (median 17.6:1).
- Page length
- 900px: shorter than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly 0px, shared by 84 of 274 indexed sites (31%).
- Writer
- The only site in the index that loads Writer.
- Plex Serif
- The only site in the index that loads Plex Serif.
- Color scheme
- Light by default, like 75% of indexed sites. It is one of 49 sites (18%) that switch with the system dark mode setting.
In short
What font does Zed use?
Zed uses Writer (loaded as "writer") for body text. Menlo (loaded as "ui-monospace") is used for code. Plex Serif (loaded as "plexSerif") is used for headings.
What are Zed's brand colors?
Zed's website uses a light scheme: background #FAFAFA, surface #EBEBEC, text #242529, muted text #525252.
How is Zed's website laid out?
The most common corner radius is 0px, body text is 11px with 1.5 line height, and the page container is 1022px wide.
