Typography
scale ratio 1.320- Interdisplay + body400 70070%
- Menlomono400 500 70024%
- Morangaother400 7004%
- Recursiveother4002%
| style | family | size | weight | line | tracking |
|---|---|---|---|---|---|
| display | Inter | 72px | 700 | 1.1 | -0.025em |
| title | Inter | 36px | 700 | 1.1 | -0.025em |
| body | Inter | 18px | 400 | 1.556 | 0em |
| body-sm | Inter | 12px | 400 | 1.333 | 0em |
| label | Inter | 14px | 400 | 1.429 | 0em |
| mono | Menlo | 20px | 500 | 1.4 | 0em |
Type scale
Aa12Aa13.5Aa14Aa15.5Aa16Aa18Aa20Aa28Aa36Aa44Aa72
- Body size
- 18px / 1.556
- Display size
- 72px
- Display tracking
- -0.025em
- Case
- sentence
Color
light schemePalette by painted area
- Text on bg
- 21.00:1
- Muted on bg
- 7.22:1
- Accent on bg
- 1.26:1
- Dark mode
- none
Declared accent tokens
- --color-accent-emphasis#0969DAnot on page
Space, shape & depth
Spacing scale (base 4px)
- 2
- 3
- 4
- 6
- 8
- 10
- 12
- 16
- 24
- 32
- 56
- 64
- 80
- 128
Corner radii
3468pill
Shadows (5)
- Borders
- hairline, 1px
- Section padding
- 144px
Components
exact computed valuesbutton-primary
Get started
- backgroundColor
- #25272B
- textColor
- #FFFFFF
- rounded
- 9999px
- padding
- 2px 2px
- height
- 60px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 400
button-secondary
Node & npm in Deno
- backgroundColor
- #70FFAF
- textColor
- #0B0D11
- rounded
- 9999px
- padding
- 2px 2px
- height
- 60px
- fontFamily
- Inter
- fontSize
- 16px
- fontWeight
- 400
card
- rounded
- 6px
- padding
- 32px
- backgroundColor
- #FFFFFF
- border
- 1px solid #E5EAEA
- 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
input
- rounded
- 8px
- height
- 34px
- padding
- 4px 4px
- border
- 1px solid #868789
Layout & motion
- Container
- 1280px
- Grid columns
- 2
- Hero
- left-over-media
- Navigation
- top-sticky
- Page height
- 15,533px
- Easing
- cubic-bezier(0.4, 0, 0.2, 1)
- Durations
- 150ms 200ms 300ms 600ms
- Transitions
- 104
- Keyframes
- 8
- Stack
- tailwind, gsap, posthog
Page sections (16)
section labels are heuristic
01banner?
02nav
03heroBetter, faster JavaScript
04feature detail?Or let your agent do it
05code sample?Everything just works
06logosYour Node project, without the Node problems
07code sample?Built-in everything
08code sample?On the cutting edge of JavaScript
09code sample?Granular security controls
10feature detail?Faster than you think
11feature detail?See anything, understand everything
12features?Deploy Deno anywhere
13feature detail?And now, the desktop
14feature detail?Loved by developers
15gallery?Better JavaScript
16footerCompany
How Deno compares
- Body text
- 18px: larger than 71% of indexed sites (median 16px).
- Largest heading
- 72px: larger than 70% of indexed sites (median 60px).
- Type scale
- 1.32×: steeper than 59% of indexed sites (median 1.28×).
- Container
- 1280px: wider than 55% of indexed sites (median 1242px).
- Text contrast
- 21.0:1: higher than 81% of indexed sites (median 17.6:1).
- Page length
- 15,533px: longer than 93% of indexed sites (median 8,217px).
- Corner radius
- Mostly fully rounded (pill), shared by 53 of 274 indexed sites (19%).
- Inter
- One of 58 indexed sites that load Inter (21%).
- Moranga
- The only site in the index that loads Moranga.
- 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 Deno use?
Deno uses Inter for headings and body text. Menlo is used for code. Moranga is used for other.
What are Deno's brand colors?
Deno's website uses a light scheme: background #FFFFFF, text #000000, muted text #56575A and borders #E5EAEA.
How is Deno's website laid out?
The most common corner radius is fully rounded (pill), body text is 18px with 1.556 line height, and the page container is 1280px wide.
