The Kashew
design system.

The mark

The Kashew glyph is an abstract K built from two leaf-like strokes — a quiet nod to growth. It is the primary identity: confident on its own, never crowded.

Mark on neutral · on ink · on gold. App icon pairs the gold mark on the ink background (or the reverse).

Clear space & sizing

Wordmark

The written name “Kashew” is set in Bricolage Grotesque — reserved for marketing surfaces, landing headers and the splash. It is not used for in-app UI text.

Mostly grey, deliberately gold

Kashew is a greyscale system with a single warm accent. Greys carry structure and hierarchy; gold appears only where attention is earned — a primary action, a selected state, a positive moment. Color is never decoration.

Brand core

Neutral ramp

A near-neutral, faintly-warm grey scale. grey-900 is the brand ink; everything in the UI is built from these eleven steps.

Semantic tokens

Mapped to Apple's roles (systemBackground, label, separator, fill …). Always reference the semantic token in code — never the raw ramp.

The gold rule

Functional accents (used sparingly)

Color is reinforcement, never the only signal — pair with an icon, sign, or label so the meaning survives color-blindness and grayscale.

Two voices: words & numbers

Three typefaces, three jobs. Bricolage Grotesque speaks the brand. SF Pro carries every word in the product. A monospaced face owns the numbers, so money always lines up.

Compare the candidates

Text — one face for all product UI.

Numbers — one face for monetary figures (all three support tabular figures).

SF Pro and SF Mono are Apple system fonts — they render true on Apple hardware and fall back to a system face elsewhere. Inter, Geist Mono and JetBrains Mono are loaded as webfonts, so they look identical on every device.

Why a separate number font

Type scale → SwiftUI text styles

Sizes follow Apple's default Dynamic Type (Large). Always use the named text style so the app respects the user's accessibility size — avoid hard-coded point sizes for text.

Space, radius, depth

An 8-point grid with 4-point half-steps. Generous margins. Soft, continuous corners. Depth comes from layered surfaces and materials — not heavy shadows.

Spacing scale (4 / 8 grid)

Default screen margin: 16pt (compact) / 20pt. Content row height ≥ 44pt for tap targets.

Corner radius — continuous

Always the iOS “squircle”: RoundedRectangle(cornerRadius: 16, style: .continuous).

Elevation & materials

Prefer .regularMaterial / .thinMaterial for tab bars, sheets and overlays. In dark mode, lift surfaces with lighter greys rather than shadow.

SF Symbols, weight-matched

Use SF Symbols throughout — they scale with text, support Dynamic Type, and offer hierarchical rendering. Match symbol weight to adjacent text. Tint with the label color; reserve gold for the active or selected symbol only.

Illustrative glyphs shown — in-app, use the real SF Symbols set at scale .medium, weight .regular/.semibold.

The system, assembled

Tokens become UI. Every element is built only from the colors, type, spacing and radii defined above — here is a taste of the full library.

One source of truth

Token names are identical across Figma Variables and SwiftUI, so a value defined once reads the same in both worlds. Define colors in an Asset Catalog with Light/Dark appearances and reference them semantically.

SwiftUI — colors & 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 — type & numbers

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 — spacing & 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 parity

Create one Figma Variable collection with two modes (Light, Dark). Name variables identically to the asset-catalog colors. Text styles mirror Apple's text styles; spacing & radius are number variables.