SWSHD
Explore SWSHD, the internal design system owned by swsh.design. Foundations and guidance for SWSH on iOS, Android, and web.
Start with the foundations
The core decisions behind every SWSH interface.
The SWSH palette, from brand orange to the neutrals and status colors.
Two font families. One type scale for display, body, and the details.
A shared rhythm for layouts, padding, and the space between elements.
The SWSH glyph set, drawn on one grid and sized for every platform.
Built in layers
Foundations
The tokens: colors, typography, spacing, radius, and motion. Primitive values describe what something is; semantic roles describe what it is for.
Primitives
Cross-platform building blocks, including Text, Icon, and Touchable. Primitives read from foundations and turn tokens into rendered UI.
Components
Product-ready pieces composed from primitives. Colors come through semantic roles and component token maps. Product UI composes components and primitives.
The principles behind it
Tokens are the source of truth
Docs, primitives, and components derive their values from the same token maps. Reference the token so every surface moves together when it changes.
Semantic before literal
Choose a variant, a spacing step, or a radius step before a raw number, and a token path before a hex value.
Two families, two weights
Gerstner Programm for display, headings, and body; ABC Diatype Mono, always uppercase, for labels and meta. Gerstner uses Regular and Bold; mono has one face.