@trybe/design-tokens

Ein Token,jede Plattform.

Das Design-System hinter der Ruhe der Suite: eine Quelle für Farben, Schriften und Formen — und zwei Umsetzungen, die sich nicht gegenseitig nachahmen müssen.

--color-primaryoklch(0.6 0.179 319.54)

oklch(0.6 0.179 319.54)

Eine Quelle

WebCSS-Variable

Jetzt sichernBeikost-Set · 24,90 €

NativeStyle-Objekt

Jetzt sichernBeikost-Set · 24,90 €

Ein Wert, zwei Umsetzungen — und keine, die die andere nachahmt.

Jede Plattform erfindet die Farbe neu.

Im Web ein Hex, in der App ein anderer, im Deck ein dritter. Und wenn eine Marke dazukommt, malt jemand eine Palette in einem Design-Tool und hofft, dass der Kontrast reicht.

Dieselbe Marken-Farbe

Web#a851bdKontrast auf Weiß 4,6:1
App#aa52beKontrast auf Weiß 4,5:1
Deck#ae57c3Kontrast auf Weiß 4,2:1 · durchgefallen

Drei Orte, drei Hex-Werte — und einer, der die Prüfung nie gesehen hat.

01Drei Umsetzungen, drei Abweichungen.
02Kontrast wird geschätzt, nicht gerechnet.
03Eine neue Marke heißt eine Woche Farbe suchen.

01 / 03 · Aus einer Quelle bauen

Eine Quelle, zwei Implementierungen.

Die Tokens liegen im offenen W3C-Format und sind die Wahrheit. Web und Native setzen sie mit ihren eigenen Mitteln um — kein geteilter Kompromiss-Code, aber dieselben Werte.

–Token-Quelle im W3C-Format.
–Getrennte Umsetzungen für Web und Native.
–Schriften, Radien und Schatten liegen als Einträge daneben.

tokens.jsonW3C-Format

1{
2  "$description": "trybe Brand Identity — happyhug",
3  "color": {
4    "primary": { "500": { "$value": "#ad56c2", "$type": "color" } },
5    "background": { "$value": "#ffffff", "$type": "color" },
6    "foreground": { "$value": "#0a0a0a", "$type": "color" }
7  },
8  "radius": { "md": { "$value": "8px", "$type": "dimension" } },
9  "shadow": { "sm": { "$value": "0 1px 2px 0 rgb(0 0 0 / .05)", "$type": "shadow" } }
10}

Ausgaben

CSS-Variablen
SCSS
Tailwind-Konfiguration
W3C-JSON

SchriftenFamilie, Skala, Stile
Radienals Maß, nicht als Klasse
Schattenein Wert, kein Gefühl

Nicht überschreibbar

Rahmenstärke
Schatten
Deckkraft
Fokus-Ring

Sie tragen die Ruhe des Systems — deshalb gehören sie nicht der Marke.

Eine Datei ist die Wahrheit, alles andere ist Ausgabe.

02 / 03 · Marke einfärben

Ein Hex, ein System.

Du gibst eine Marken-Farbe an. Das System rechnet die volle Skala und die passende Schriftfarbe dazu — und prüft den Kontrast, bevor irgendetwas davon ausgeliefert wird.

–Skala und Vordergrund werden aus einem Hex gerechnet.
–Rechnung in einem Farbraum, der gleichmäßig hell bleibt.
–Kontrast wird gegen die Zugänglichkeits-Regeln geprüft.

Marken-Farbe#ad56c2

Skala

Aa50
Aa100
Aa200
Aa300
Aa400
Aa500
Aa600
Aa700
Aa800
Aa900
Aa950

Schriftfarbe

Bis 500 dunkel, ab 600 weiß — gewählt hat das der Kontrast.

Prüfung

5004,58:1AA
6006,06:1AA

Ein Hex rein — elf Stufen und die Schriftfarbe raus, gerechnet statt geraten.

03 / 03 · Dichte umschalten

Dichte ist eine Eigenschaft.

Kompakt für die Tabelle, luftig für die Landingpage: Dichte ist eine Eigenschaft der Komponente, kein zweites Theme. Und Flächen tragen ihre Schriftfarbe immer als Paar mit sich.

–Drei Dichten als Eigenschaft, nicht als eigenes Theme.
–Fläche und Schriftfarbe sind ein Paar.
–Dieselbe Komponente in jeder Dichte lesbar.

Dieselbe Liste

kompakt12 px
- Beikost-Set24,90 €
- Nachfüllpack14,90 €
normal16 px
- Beikost-Set24,90 €
- Nachfüllpack14,90 €
luftig20 px
- Beikost-Set24,90 €
- Nachfüllpack14,90 €

Paar-Token

Fläche+Schrift darauf

Jede Fläche bringt ihre Schriftfarbe mit — nie einzeln zu haben.

Dichte ist eine Eigenschaft der Komponente, kein zweites Theme.

Herkunft

Das System hinter der Ruhe.

Die Marken-Tokens leben nicht in der Bibliothek, sondern im Brain — die Bibliothek verteilt sie nur. Deshalb sieht jedes Werkzeug, jede Landingpage und jedes gerenderte Bild nach derselben Marke aus.

Liest aus dem Brain

Design-Tokens
Marken-Farben
Schriften

Gibt zurück

Einheitliche Oberflächen in jedem Werkzeug

Kontrast wird geprüft, nicht gehofft.

Die ganze Suite läuft auf diesem System — jede Marke, die dazukommt, bekommt ihre Skala gerechnet statt gemalt.

1
Token-Quelle im W3C-Format: 2
Umsetzungen: Web und Native: 3
Dichten als Eigenschaft

–Aus einem Marken-Hex entsteht die volle Skala.
–Jede Fläche bringt ihre Schriftfarbe als Paar mit.
–Kontrast-Prüfung läuft, bevor ein Wert ausgeliefert wird.

Ruhe, die sich überträgt.

Trag dich ein und gib deiner Marke ein System statt einer Palette.

Teil der trybe suiteNachschlagewerk lesen →