Stylepack

Czcionki

Czcionki, których używa supabase.com

supabase.com składa nagłówki w czcionce Manrope, a tekst w czcionce Inter. Manrope to licencjonowana czcionka, którą strona serwuje sama. Najbliższy darmowy zamiennik z Google Fonts: Manrope, Inter.

Zmierzono na supabase.com 4 dni temu.

Otwórz pełny pakiet designuPobierz pakiet

Rodziny czcionek

Czcionki: 2
Manrope
Użycie
h1, h2, h3
Źródło
Własny hosting
Darmowy zamiennik
Manrope
Inter
Użycie
body, label, button
Źródło
Własny hosting
Darmowy zamiennik
Inter

CSS do odtworzenia

Zmienne czcionek z darmowym zamiennikiem w stosie, więc ten sam CSS działa z licencjonowaną czcionką i bez niej.

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

Jak składany jest tekst

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
Używane rozmiary czcionek
12131415163446

Dla agentów AI

Pakiet to zwykły tekst, bez klucza: pobierz DESIGN.md albo przekaż cały pakiet do Claude Code, Cursor lub Copilot przez serwer MCP.

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

Pytania

Jakiej czcionki używa supabase.com?

supabase.com używa Manrope, Inter. Nagłówki są złożone w czcionce Manrope, a tekst w czcionce Inter; zmierzono to na stronie tak, jak się renderuje, a nie odczytano z jej arkusza stylów.

Czy czcionka supabase.com jest darmowa?

Nie. Manrope to licencjonowana czcionka, którą supabase.com serwuje sam. Najbliższy darmowy zamiennik to Manrope, Inter, dostępny w Google Fonts. CSS na tej stronie wstawia go do stosu czcionek jako zastępstwo.

Jak uzyskać w projekcie taką samą typografię jak supabase.com?

Pobierz pakiet designu supabase.com ze Stylepack: zawiera stos czcionek, skalę typograficzną, każdy styl tekstu i zrzuty ekranu w formie, z której agent AI do kodowania, taki jak Claude Code czy Cursor, może budować.