Stylepack

Fonts

The fonts supabase.com uses

supabase.com sets its headlines in Manrope and its body text in Inter. Manrope is a licensed font the site serves itself. The closest free match on Google Fonts: Manrope, Inter.

Measured from supabase.com 4 days ago.

Open the full design packDownload the pack

Font families

2 families
Manrope
Used for
h1, h2, h3
Source
Self-hosted
Free alternative
Manrope
Inter
Used for
body, label, button
Source
Self-hosted
Free alternative
Inter

CSS to reproduce it

Font variables with the free stand-in in the stack, so the same CSS works with or without the licensed font.

:root {
  --font-heading: "Manrope", "Manrope", sans-serif; /* Manrope stands in for Manrope */
  --font-body: "Inter", "Inter", sans-serif; /* Inter stands in for Inter */
  --font-size-base: 15px;
}

How the type is set

headline-displayQuick brown foxManrope / 46px / 500 / lh 46px
headline-lgQuick brown foxManrope / 16px / 600 / lh 24px
headline-mdQuick brown foxManrope / 34px / 600 / lh 37.7778px
body-mdThe quick brown fox jumps over the lazy dogInter / 15px / 450 / lh 22.5px
label-mdThe quick brown fox jumps over the lazy dogInter / 12px / 500 / lh 1.33
buttonThe quick brown fox jumps over the lazy dogInter / 14px / 450 / lh 20px
Font sizes in use
12131415163446

For AI agents

The pack is plain text, no key: fetch DESIGN.md, or hand the whole pack to Claude Code, Cursor or Copilot with the MCP server.

curl -s https://stylepack.ai/packs/supabase.com/DESIGN.md

Questions

What font does supabase.com use?

supabase.com uses Manrope, Inter. Headlines are set in Manrope and body text in Inter, measured from the site as it renders, not read from its stylesheet.

Is the supabase.com font free to use?

No. Manrope is a licensed font that supabase.com serves itself. The closest free match is Manrope, Inter, available on Google Fonts. The CSS on this page puts it in the font stack as the stand-in.

How do I get the same typography as supabase.com in my project?

Download the supabase.com design pack from Stylepack: it holds the font stack, the type scale, every text style and the screenshots, in a form an AI coding agent such as Claude Code or Cursor can build from.