Das Kashew-
Designsystem.

Das Zeichen

Das Kashew-Zeichen ist ein abstraktes K aus zwei blattartigen Strichen — ein leiser Hinweis auf Wachstum. Es ist die primäre Identität: selbstbewusst für sich allein, nie überladen.

Zeichen auf Neutral · auf Ink · auf Gold. Das App-Icon kombiniert das goldene Zeichen auf dem Ink-Hintergrund (oder umgekehrt).

Schutzraum & Größen

Wortmarke

Der geschriebene Name „Kashew“ wird in Bricolage Grotesque gesetzt — reserviert für Marketingflächen, Landing-Header und den Splash. Er wird nicht für UI-Text in der App verwendet.

Überwiegend grau, bewusst gold

Kashew ist ein Graustufensystem mit einem einzigen warmen Akzent. Grautöne tragen Struktur und Hierarchie; Gold erscheint nur dort, wo Aufmerksamkeit verdient ist — eine primäre Aktion, ein ausgewählter Zustand, ein positiver Moment. Farbe ist nie Dekoration.

Markenkern

Neutrale Skala

Eine nahezu neutrale, leicht warme Grauskala. grey-900 ist das Marken-Ink; alles in der UI ist aus diesen elf Stufen gebaut.

Semantische Tokens

Auf Apples Rollen abgebildet (systemBackground, label, separator, fill …). Verweise im Code immer auf das semantische Token — nie auf die rohe Skala.

Die Gold-Regel

Funktionale Akzente (sparsam eingesetzt)

Farbe ist Verstärkung, nie das einzige Signal — kombiniere sie mit einem Icon, Vorzeichen oder Label, damit die Bedeutung auch bei Farbenblindheit und in Graustufen erhalten bleibt.

Zwei Stimmen: Wörter & Zahlen

Drei Schriften, drei Aufgaben. Bricolage Grotesque spricht die Marke. SF Pro trägt jedes Wort im Produkt. Eine Monospace-Schrift gehört den Zahlen, damit Geld immer bündig steht.

Die Kandidaten im Vergleich

Text — eine Schrift für die gesamte Produkt-UI.

Zahlen — eine Schrift für Geldbeträge (alle drei unterstützen Tabellenziffern).

SF Pro und SF Mono sind Apple-Systemschriften — sie werden auf Apple-Hardware originalgetreu dargestellt und greifen anderswo auf eine Systemschrift zurück. Inter, Geist Mono und JetBrains Mono werden als Webfonts geladen und sehen daher auf jedem Gerät identisch aus.

Warum eine eigene Zahlenschrift

Typo-Skala → SwiftUI-Textstile

Die Größen folgen Apples Standard-Dynamic-Type (Large). Verwende immer den benannten Textstil, damit die App die Barrierefreiheitsgröße der Nutzer respektiert — vermeide fest codierte Punktgrößen für Text.

Raum, Radius, Tiefe

Ein 8-Punkt-Raster mit 4-Punkt-Halbschritten. Großzügige Ränder. Weiche, kontinuierliche Ecken. Tiefe entsteht durch geschichtete Flächen und Materialien — nicht durch schwere Schatten.

Abstandsskala (4 / 8 Raster)

Standard-Bildschirmrand: 16pt (kompakt) / 20pt. Inhaltszeilenhöhe ≥ 44pt für Tap-Ziele.

Eckenradius — kontinuierlich

Immer das iOS-„Squircle“: RoundedRectangle(cornerRadius: 16, style: .continuous).

Erhöhung & Materialien

Bevorzuge .regularMaterial / .thinMaterial für Tab-Bars, Sheets und Overlays. Im Dunkelmodus hebe Flächen mit helleren Grautönen an statt mit Schatten.

SF Symbols, gewichtsangepasst

Verwende durchgehend SF Symbols — sie skalieren mit dem Text, unterstützen Dynamic Type und bieten hierarchisches Rendering. Passe das Symbolgewicht an den benachbarten Text an. Färbe mit der Label-Farbe; reserviere Gold nur für das aktive oder ausgewählte Symbol.

Beispielhafte Glyphen gezeigt — in der App den echten SF-Symbols-Satz in Größe .medium, Gewicht .regular/.semibold verwenden.

Das System, zusammengesetzt

Tokens werden zu UI. Jedes Element ist ausschließlich aus den oben definierten Farben, der Typografie, den Abständen und Radien gebaut — hier ein Vorgeschmack auf die volle Bibliothek.

Eine einzige Quelle der Wahrheit

Token-Namen sind in Figma-Variablen und SwiftUI identisch, sodass ein einmal definierter Wert in beiden Welten gleich gelesen wird. Definiere Farben in einem Asset-Katalog mit Hell/Dunkel-Erscheinungen und referenziere sie semantisch.

SwiftUI — Farben & Theme

// Colors live in an Asset Catalog with Any/Dark appearances,
// named to match the design tokens exactly.
extension Color {
    static let bgPrimary     = Color("bg/primary")
    static let bgSecondary   = Color("bg/secondary")
    static let surface       = Color("surface")
    static let labelPrimary  = Color("label/primary")
    static let labelSecondary = Color("label/secondary")
    static let separator     = Color("separator")
    static let accent        = Color("accent")        // #FFD379
    static let onAccent      = Color("on-accent")     // #212021 ink
}

SwiftUI — Typo & Zahlen

extension Font {
    // Text uses the system face → free Dynamic Type
    static let bodyText = Font.system(.body)
    static let headline = Font.system(.headline)

    // Money: monospaced design + tabular digits
    static func amount(_ style: Font.TextStyle = .title) -> Font {
        .system(style, design: .monospaced).monospacedDigit()
    }
}

Text("€ 4,820.17")
    .font(.amount(.largeTitle))
    .foregroundStyle(.labelPrimary)

SwiftUI — Abstand & Radius

enum Space { static let x1=4.0, x2=8.0, x3=12.0, x4=16.0, x6=24.0, x8=32.0 }
enum Radius { static let sm=10.0, md=12.0, lg=16.0, xl=20.0 }

RoundedRectangle(cornerRadius: Radius.lg, style: .continuous)
    .fill(Color.surface)
    .padding(Space.x4)

Figma ↔ SwiftUI-Parität

Erstelle eine Figma-Variablensammlung mit zwei Modi (Hell, Dunkel). Benenne die Variablen identisch zu den Asset-Katalog-Farben. Textstile spiegeln Apples Textstile; Abstand & Radius sind Zahlenvariablen.