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

Typography

scale ratio 1.201
stylefamilysizeweightlinetracking
displayGT Planar48px4001.15-0.04em
headlineGT Planar36px400-0.04em
titleGT Planar24px400-0.02em
bodyGT Planar16px3001.70em
body-smInter13px4001.50em
labelGT Planar14px3001.40em
monoBerkeley Mono3.25px4001.10em
Type scale
Aa3.5Aa10Aa11Aa12Aa12.5Aa13Aa14Aa15Aa16Aa18Aa20Aa24Aa32Aa36Aa48
Body size
16px / 1.7
Display size
48px
Display tracking
-0.04em
Case
sentence

Color

light scheme
Palette by painted area
Text on bg
15.25:1
Muted on bg
4.43:1
Accent on bg
4.40:1
Dark mode
follows system
Declared accent tokens
  • --brand#008700painted
  • --brand-human#0D74CEpainted
  • --brand-elevenlabs#D15A15not on page

Space, shape & depth

Spacing scale
  • 2
  • 4
  • 6
  • 8
  • 10
  • 12
  • 14
  • 16
  • 20
  • 24
  • 32
  • 40
  • 48
Corner radii
45681014182432pill
Shadows (5)
Borders
hairline, 1px
Section padding
112px

Components

exact computed values
button-primary
Book a demo
backgroundColor
#171717
textColor
#FAFAFA
rounded
10px
padding
0px 10px
height
32px
fontFamily
GT Planar
fontSize
14px
fontWeight
500
button-secondary
Try it
backgroundColor
#4D7E5C
textColor
#FFFFFF
rounded
8px
padding
6px 12px
height
30px
fontFamily
Inter
fontSize
12px
fontWeight
600
card
rounded
32px
padding
8px
backgroundColor
#FCFCFD4D
border
1px solid #D9D9E066
input
rounded
10px
height
32px
padding
4px 12px
border
1px solid #E5E5E5

Layout & motion

Container
1376px
Grid columns
6
Hero
left-aligned
Navigation
none-detected
Page height
10,124px
Easing
ease
Durations
70ms 150ms 180ms 300ms
Transitions
769
Keyframes
8
Stack
next.js, radix-ui, shadcn/ui, posthog, google-tag-manager, vercel, cloudflare

Page sections (15)

section labels are heuristic
  1. Buildwithfern hero section
    01heroUpgrade your developer and agent experience
  2. Buildwithfern feature-detail section
    02feature detail?Create Agent
  3. Buildwithfern content section
    03content?
  4. Buildwithfern feature-detail section
    04feature detail?h t u r t f o e c r u o s e n o m o r f I L C d n a , s K D S , s c o D
  5. Buildwithfern features section
    05features?CLI
  6. Buildwithfern code-sample section
    06code sample?a r e I A e h t r o f d e n g i s e D
  7. Buildwithfern feature-detail section
    07feature detail?m r o f t a l p e s i r p r e t n e e h t o t e t a r g i M
  8. Buildwithfern features section
    08features?t l u a f e d y b y d a e r - e s i r p r e t n E
  9. Buildwithfern gallery section
    09gallery?Native Postman support
  10. Buildwithfern feature-detail section
    10feature detail?s r e m o t s u c r u o m o r f t i r a e H
  11. Buildwithfern testimonials section
    11testimonials
  12. Buildwithfern features section
    12features?m a e t n r e F e h t m o r f s e t o n d l e i F
  13. Buildwithfern logos section
    13logose c n e i r e p x e r e p o l e v e d r u o y e t a v e l E
  14. Buildwithfern footer section
    14footer
  15. Buildwithfern content section
    15content?

How Buildwithfern compares

Body text
16px, the same as 40% of indexed sites (median 16px).
Largest heading
48px: smaller than 68% of indexed sites (median 60px).
Type scale
1.20×: flatter than 80% of indexed sites (median 1.28×).
Container
1376px: wider than 96% of indexed sites (median 1242px).
Text contrast
15.3:1: lower than 73% of indexed sites (median 17.6:1).
Page length
10,124px: longer than 66% of indexed sites (median 8,217px).
Corner radius
Mostly 10px, shared by 9 of 274 indexed sites (3%).
GT Planar
One of 3 indexed sites that load GT Planar (1%).
Berkeley Mono
One of 4 indexed sites that load Berkeley 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 Buildwithfern use?

Buildwithfern uses GT Planar (loaded as "gtPlanar") for headings and body text. Berkeley Mono (loaded as "berkeleyMono") is used for code. Inter is used for other.

What are Buildwithfern's brand colors?

Buildwithfern's website uses a light scheme: background #F7F7F7, surface #FFFFFF, text #202020, muted text #737373 and borders #E4E4E4.

How is Buildwithfern's website laid out?

The most common corner radius is 10px, body text is 16px with 1.7 line height, and the page container is 1376px wide.

Similar to Buildwithfern

Upstash homepage
Inter / Inter Tight / JetBrains Mono#F5F5F5
Upstashupstash.com
Attio homepage
Inter / Inter Display / Tiempos Text#FFFFFF
Attioattio.com
Pipedream homepage
Inter / JetBrains Mono / Departure Mono#FFFFFF
Pipedreampipedream.com
Pinecone homepage
GT Planar / JetBrains Mono#FBFBFC
Pineconepinecone.io
Capacities homepage
SF Pro (system-ui) / Inter / JetBrains Mono#FFFFFF
Capacitiescapacities.io