Stylepack

Schriften

Die Schriften von supabase.com

supabase.com setzt Überschriften in Manrope und Fließtext in Inter. Manrope ist eine lizenzierte Schrift, die die Seite selbst ausliefert. Die nächste freie Alternative auf Google Fonts: Manrope, Inter.

vor 4 Tagen auf supabase.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Schriftfamilien

2 Schriftfamilien
Manrope
Verwendet für
h1, h2, h3
Quelle
Selbst gehostet
Freie Alternative
Manrope
Inter
Verwendet für
body, label, button
Quelle
Selbst gehostet
Freie Alternative
Inter

CSS zum Nachbauen

Schrift-Variablen mit der freien Alternative im Font-Stack, damit dasselbe CSS mit und ohne die lizenzierte Schrift funktioniert.

: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;
}

So ist der Text gesetzt

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
Verwendete Schriftgrößen
12131415163446

Für KI-Agenten

Das Paket ist reiner Text, ohne Key: hol dir DESIGN.md oder gib das ganze Paket per MCP-Server an Claude Code, Cursor oder Copilot.

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

Fragen

Welche Schrift benutzt supabase.com?

supabase.com nutzt Manrope, Inter. Überschriften sind in Manrope gesetzt, Fließtext in Inter, gemessen an der gerenderten Seite, nicht aus dem Stylesheet gelesen.

Ist die Schrift von supabase.com frei nutzbar?

Nein. Manrope ist eine lizenzierte Schrift, die supabase.com selbst ausliefert. Die nächste freie Alternative ist Manrope, Inter, verfügbar auf Google Fonts. Das CSS auf dieser Seite setzt sie als Ersatz in den Font-Stack.

Wie bekomme ich dieselbe Typografie wie supabase.com in mein Projekt?

Lade das Designpaket von supabase.com bei Stylepack herunter: Es enthält den Font-Stack, die Schriftskala, jeden Textstil und die Screenshots, in einer Form, aus der ein KI-Coding-Agent wie Claude Code oder Cursor bauen kann.