Emblematic
Bun homepage, desktop
Bun homepage in dark mode
Dark mode (follows system setting)
Bun homepage, mobile
Mobile, 390px

Typography

scale ratio 1.235
  • Archivodisplay800 90043%
  • SF Pro (system-ui)css: ui-sans-serifbody400 500 600 70043%
  • Martian Monomono400 500 70013%
stylefamilysizeweightlinetracking
displayArchivo68px8000.92-0.02em
headlineArchivo76px8000.92-0.02em
titleSF Pro (system-ui)20.48px6001.375-0.015em
bodySF Pro (system-ui)17.28px4001.6250em
body-smSF Pro (system-ui)14.5px4001.6250em
monoMartian Mono11px4001.50em
Type scale
Aa11Aa11.5Aa12Aa12.5Aa13Aa13.5Aa14Aa14.5Aa15Aa16Aa16.5Aa17Aa17.5Aa18Aa19Aa20.5Aa32Aa37Aa43Aa68Aa76Aa117
Body size
17.5px / 1.55
Display size
68px
Display tracking
-0.02em
Case
sentence

Color

light scheme
Palette by painted area
Text on bg
19.80:1
Muted on bg
7.81:1
Accent on bg
3.45:1
Dark mode
follows system
Declared accent tokens
  • --docsearch-primary-color#FF1F8Fpainted

Space, shape & depth

Spacing scale (base 4px)
  • 2
  • 4
  • 6
  • 8
  • 10
  • 12
  • 14
  • 16
  • 20
  • 24
  • 40
  • 112
Corner radii
34pill
Shadows (0)
none
Borders
hairline, 1px
Section padding
113px

Components

exact computed values
button-primary
Install
backgroundColor
#0A0A0A
textColor
#FFFFFF
rounded
0px
padding
0px 14px
height
36px
fontFamily
SF Pro (system-ui)
fontSize
13.5px
fontWeight
600
button-secondary
bun install
backgroundColor
#0C0C0C
textColor
#FFFFFF
rounded
0px
padding
12px 10px
height
44.5px
fontFamily
SF Pro (system-ui)
fontSize
13px
fontWeight
600
border
1px solid #181818

Layout & motion

Container
1216px
Grid columns
2
Hero
left-aligned
Navigation
top-sticky
Page height
11,578px
Easing
cubic-bezier(0.22, 1, 0.36, 1)
Durations
150ms 200ms 300ms 600ms
Transitions
155
Keyframes
3
Stack
react, tailwind, google-tag-manager, vercel, cloudflare

Page sections (13)

section labels are heuristic
  1. Bun nav section
    01nav
  2. Bun hero section
    02heroBun is a JavaScript runtime toolkit. All in one.
  3. Bun code-sample section
    03code sample?Four tools, designed together.
  4. Bun code-sample section
    04code sample?One binary for the whole workflow.
  5. Bun code-sample section
    05code sample?bun fmt: a Prettier-compatible formatter built into Bun.
  6. Bun code-sample section
    06code sample?Bun in production
  7. Bun feature-detail section
    07feature detail?The fastest install in every situation you actually hit.
  8. Bun testimonials section
    08testimonialsEverything built in.
  9. Bun code-sample section
    09code sample?The APIs you need, baked in.
  10. Bun code-sample section
    10code sample?Full speed, full‑stack
  11. Bun code-sample section
    11code sample?Bun is a complete toolkit.
  12. Bun code-sample section
    12code sample?Try it on the repo you have
  13. Bun footer section
    13footer

How Bun compares

Body text
17.5px: larger than 70% of indexed sites (median 16px).
Largest heading
68px: larger than 67% of indexed sites (median 60px).
Type scale
1.24×: flatter than 68% of indexed sites (median 1.28×).
Container
1216px: narrower than 56% of indexed sites (median 1242px).
Text contrast
19.8:1: higher than 74% of indexed sites (median 17.6:1).
Page length
11,578px: longer than 79% of indexed sites (median 8,217px).
Corner radius
Mostly 0px, shared by 84 of 274 indexed sites (31%).
Archivo
The only site in the index that loads Archivo.
Martian Mono
One of 2 indexed sites that load Martian Mono (1%).
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 Bun use?

Bun uses Archivo for headings. SF Pro (system-ui) (loaded as "ui-sans-serif") is used for body text. Martian Mono is used for code.

What are Bun's brand colors?

Bun's website uses a light scheme: background #FFFFFF, surface #F6F6F699, text #0A0A0A, muted text #525252 and borders #E2E2E2.

How is Bun's website laid out?

The most common corner radius is 0px, body text is 17.5px with 1.55 line height, and the page container is 1216px wide.

Similar to Bun