Stylepack

Schriften

Die Schriften von sweetgreen.com

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

vor 32 Tagen auf sweetgreen.com gemessen.

Ganzes Designpaket öffnenPaket herunterladen

Schriftfamilien

2 Schriftfamilien
SweetSansText
Verwendet für
h1, h2, body, label, button
Quelle
Selbst gehostet
Freie Alternative
Inter
Grenette
Verwendet für
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: "SweetSansText", "Inter", sans-serif; /* Inter stands in for SweetSansText */
  --font-body: "SweetSansText", "Inter", sans-serif; /* Inter stands in for SweetSansText */
  --font-button: "Grenette", "Inter", sans-serif; /* Inter stands in for Grenette */
  --font-size-base: 18px;
}

So ist der Text gesetzt

headline-displayQuick brown foxSweetSansText / 16px / 400 / lh 1
headline-lgQuick brown foxSweetSansText / 24px / 400 / lh 28.8px / 0.72px
headline-mdQuick brown foxSweetSansText / 24px / 400 / lh 1.4
body-mdThe quick brown fox jumps over the lazy dogSweetSansText / 18px / 400 / lh 22.5px
label-mdThe quick brown fox jumps over the lazy dogSweetSansText / 24px / 400 / lh 28.8px
buttonThe quick brown fox jumps over the lazy dogGrenette / 48px / 200 / lh 48px / -2.25px
Verwendete Schriftgrößen
1618244870

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/sweetgreen.com/DESIGN.md

Fragen

Welche Schrift benutzt sweetgreen.com?

sweetgreen.com nutzt SweetSansText, Grenette. Überschriften sind in SweetSansText gesetzt, Fließtext in SweetSansText, gemessen an der gerenderten Seite, nicht aus dem Stylesheet gelesen.

Ist die Schrift von sweetgreen.com frei nutzbar?

Nein. SweetSansText ist eine lizenzierte Schrift, die sweetgreen.com selbst ausliefert. Die nächste freie Alternative ist 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 sweetgreen.com in mein Projekt?

Lade das Designpaket von sweetgreen.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.