Zum Inhalt springen
UI Kit
Accent

Theming

Tokens, die Light und Dark Mode tragen

Ein Satz Namen, zwei Sätze Werte. Components lesen nur Tokens, deshalb kommen Light Mode, Dark Mode und jeder Accent von selbst mit.

Accents

primary ist der Accent eines Projekts. Elektrisches Blau ist Standard, sechs weitere bringt das Kit mit, Neutral eingeschlossen. Wählen, und die ganze Seite stellt um.

  • BlauStandard
    Speichern6,6 : 1
    SpeichernLight4,9 : 1
    data-accent="blue"
  • Violett
    Speichern7,0 : 1
    SpeichernLight5,5 : 1
    data-accent="violet"
  • Cyan
    Speichern10,0 : 1
    SpeichernLight5,1 : 1
    data-accent="cyan"
  • Smaragd
    Speichern10,3 : 1
    SpeichernLight5,0 : 1
    data-accent="green"
  • Sunset
    Speichern8,9 : 1
    SpeichernLight4,8 : 1
    data-accent="orange"
  • Rosé
    Speichern7,0 : 1
    SpeichernLight4,9 : 1
    data-accent="rose"
  • Neutral
    Speichern17,0 : 1
    SpeichernLight17,3 : 1
    data-accent="neutral"

Dunkel als Standard, hell auf Wunsch

Das Kit startet dunkel. Die Klasse dark am html-Element ist der Schalter, deshalb gehen alle installierten Components ohne jede Änderung mit. Soll dein Projekt dunkel starten, schreib die Klasse ins Markup.

DarkStandard

Northwind Studio

Fließtext mit 15 Pixeln liest sich auf jedem Bildschirm ruhig und hält die Zeilen bei 60 bis 75 Zeichen.

NeuAnleitung lesen
<html class="dark">
Light

Northwind Studio

Fließtext mit 15 Pixeln liest sich auf jedem Bildschirm ruhig und hält die Zeilen bei 60 bis 75 Zeichen.

NeuAnleitung lesen
<html>
<html lang="de" class="dark" data-accent="blue">

Colors

Derselbe Token-Name in beiden Modes. Im Code steht immer die Klasse aus der letzten Spalte, nie eine feste Farbe.

  • --backgroundLightoklch(1 0 none)Darkoklch(0.145 0.011 264)bg-background
  • --foregroundLightoklch(0.18 0.014 264)Darkoklch(0.968 0.004 264)text-foreground
  • --surfaceLightoklch(0.984 0.003 264)Darkoklch(0.168 0.012 264)bg-surface
  • --surface-2Lightoklch(0.966 0.005 264)Darkoklch(0.198 0.013 264)bg-surface-2
  • --cardLightoklch(1 0 none)Darkoklch(0.172 0.012 264)bg-card
  • --popoverLightoklch(1 0 none)Darkoklch(0.2 0.013 264)bg-popover
  • --mutedLightoklch(0.962 0.006 264)Darkoklch(0.215 0.013 264)bg-muted
  • --accentLightoklch(0.952 0.008 264)Darkoklch(0.235 0.014 264)bg-accent
  • --muted-foregroundLightoklch(0.49 0.018 264)Darkoklch(0.74 0.013 264)text-muted-foreground
  • --subtle-foregroundLightoklch(0.6 0.014 264)Darkoklch(0.6 0.013 264)text-subtle-foreground
  • --borderLightoklch(0.918 0.007 264)Darkoklch(0.92 0.02 264 / 0.09)border-border
  • --border-strongLightoklch(0.862 0.01 264)Darkoklch(0.92 0.02 264 / 0.16)border-border-strong
  • --inputLightoklch(0.89 0.009 264)Darkoklch(0.92 0.02 264 / 0.13)border-input
  • --primaryLightoklch(0.55 0.235 263)Darkoklch(0.68 0.17 258)bg-primary
  • --primary-foregroundLightoklch(0.985 0 none)Darkoklch(0.17 0.05 264)text-primary-foreground
  • --successLightoklch(0.62 0.15 158)Darkoklch(0.76 0.16 158)text-success
  • --warningLightoklch(0.76 0.16 72)Darkoklch(0.82 0.15 78)bg-warning
  • --infoLightoklch(0.6 0.16 252)Darkoklch(0.74 0.14 250)text-info
  • --destructiveLightoklch(0.575 0.22 25)Darkoklch(0.68 0.2 22)text-destructive
  • --bezelLightoklch(0.19 0.012 264)Darkoklch(0.1 0.01 264)bg-bezel

Eigener Accent

Einmal --primary und --primary-foreground für Light, einmal für Dark. Schieber bewegen, Preview und CSS gehen mit.

200
0.17
0.56
Kontrast der Schrift auf dem Accent4.5 : 1
Preview mit deinem Accent · Light

Northwind Studio

Neu
Anleitung lesen
Preview mit deinem Accent · Dark

Northwind Studio

Neu
Anleitung lesen
src/styles/accent.css
/* Nach kit.css. Erst hell, dann dunkel. */
[data-accent="brand"] {
  --primary: oklch(0.56 0.17 200);
  --primary-foreground: oklch(0.985 0 0);
}
.dark[data-accent="brand"], .dark [data-accent="brand"] {
  --primary: oklch(0.69 0.14 200);
  --primary-foreground: oklch(0.18 0.03 200);
}

Eine Schrift für alles

SF Pro Display setzt Überschriften, Text, Code und Zahlen. Apple-Geräte bringen sie mit, überall sonst springt Inter ein. Code nutzt bewusst dieselbe Familie, Zahlen stehen tabellarisch, damit Spalten bündig sind.

SF Pro Display--font-sans: "SF Pro Display", -apple-system, BlinkMacSystemFont, "Inter Variable", "Inter", sans-serif--font-mono: var(--font-sans)
Text

Components für ein besseres Web

Fließtext mit 15 Pixeln liest sich auf jedem Bildschirm ruhig und hält die Zeilen bei 60 bis 75 Zeichen.

Code und Befehle$ aiw add hero<Hero variant="centered" />
Tabellarische Zahlen
Januar
48.210 €
Februar
51.904 €
März
117.336 €
  • text-displayclamp(2.75rem, 1.6rem + 4.6vw, 5.25rem)line-height 1 · -0.026em

    Components für ein besseres Web

  • text-h1clamp(2.375rem, 1.6rem + 3vw, 4rem)line-height 1.04 · -0.024em

    Components für ein besseres Web

  • text-h2clamp(1.875rem, 1.35rem + 2.1vw, 3rem)line-height 1.08 · -0.02em

    Components für ein besseres Web

  • text-h31.1875remline-height 1.35 · -0.012em

    Components für ein besseres Web

  • text-leadclamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)line-height 1.6 ·

    Fließtext mit 15 Pixeln liest sich auf jedem Bildschirm ruhig und hält die Zeilen bei 60 bis 75 Zeichen.

  • text-[15px]body

    Fließtext mit 15 Pixeln liest sich auf jedem Bildschirm ruhig und hält die Zeilen bei 60 bis 75 Zeichen.

Radius

Ein Wert, --radius, steuert fünf Stufen. Ändern, und jede Karte und jeder Knopf geht mit. --radius: 0.75rem

  • rounded-sm8 px
  • rounded-md10 px
  • rounded-lg12 px
  • rounded-xl16 px
  • rounded-2xl20 px

Shadows

Drei Tiefen und eine Lichtkante für erhabene Flächen. Im Dark Mode werden sie tiefer, nicht heller.

  • --shadow-sm
  • --shadow-md
  • --shadow-lg
  • --highlight

Utilities

Kleine Helfer für Licht, Tiefe und Bewegung. Sparsam einsetzen, ein Lichtstrahl je Seite reicht.

  • Aa Bb

    kit-gradient-text

    Große Überschrift mit weichem Licht von oben.

  • Northwind

    kit-accent-text

    Der Accent läuft in seinen Nachbarn auf dem Farbkreis.

  • kit-glow

    kit-glow

    Weiches Licht von oben, seitlich abgeschnitten.

  • kit-dots

    Punktmuster, das zu den Rändern ausläuft.

  • kit-grid

    Linienraster, das zu den Rändern ausläuft.

  • kit-beam

    kit-beam

    Ein Licht, das um die eine wichtigste Fläche läuft.

  • Mit der Maus darüber

    kit-spotlight

    Lichtkegel unter dem Zeiger, zusammen mit useSpotlight().

  • kit-shine

    Ein Glanz fährt beim Darüberfahren über die Fläche.

  • kit-rise

    Auftritt beim Laden, gestaffelt mit --kit-delay.

  • NorthwindAtlasLumenKanzlei BergerCafé MiraHarbor

    kit-fade-x

    Blendet beide Seiten aus, für Laufbänder und Scrollreihen.

  • NorthwindAtlasLumenKanzlei BergerCafé Mira

    kit-fade-start

    Blendet den Anfang einer Reihe aus, deren Inhalt rechts endet.

  • NorthwindAtlasLumenKanzlei BergerCafé Mira

    kit-fade-end

    Blendet das Ende einer Reihe aus, die rechts weiterläuft.

  • kit-fade-y

    Blendet Ober- und Unterkante aus, für Listen, die scrollen.

  • kit-fade-b

    Blendet die Unterkante aus, für auslaufende Bilder.

  • kit-no-scrollbar

    Scrollreihen ohne sichtbaren Scrollbalken.

  • kit-scrollbar

    Dünner, ruhiger Scrollbalken für Flächen, die scrollen müssen.

  • kit-highlight

    kit-highlight

    Die innere Lichtkante erhabener Flächen.

  • kit-card

    Kartenfläche mit Rand, Radius, Lichtkante und weichem Schatten.

  • 1200 px

    kit-container

    Inhaltsbreite mit Seitenrand, in jeder Component gleich.

  • kit-flow

    Ein Strich, der an einer SVG-Linie entlangläuft, für Abläufe und Verbindungen.

  • kit-scroll-scale

    Wächst beim Hereinscrollen auf volle Größe, mit useScrollProgress().

  • kit-scroll-fade

    Kommt beim Hereinscrollen ins volle Licht, mit useScrollProgress().

Light, Dark und Accent

Die Klasse dark am html-Element schaltet den Dark Mode, data-accent wählt den Accent. Beides vor dem ersten Bild setzen, dann blitzt nichts auf.

<html class="dark" data-accent="brand">

Oft gesucht

Direkt zu

In die Zwischenablage kopiert