Stackyard design system
Stackyard follows Apple’s Human Interface Guidelines for type, spacing, controls and motion. This page covers only what is specific to Stackyard. Tokens live in ui/css/tokens.css.
Colour
Section titled “Colour”Teal is the brand accent. Rules name a role below, never a raw colour.
Dark theme
Accent#00D2E0
Success#30D158
Warning#FF9230
Danger#FF4245
Info#0091FF
Light theme
Accent#0071A4
Success#238539
Warning#C93400
Danger#D70015
Info#0040DD
The other hues and greys are Apple’s system colours.
What differs from the guidelines
Section titled “What differs from the guidelines”- The dashboard is always dark. Only the Settings page has a light theme.
- Text on cards uses
--sy-a11y-dim. Apple’s secondary label colours fail WCAG contrast on Stackyard’s cards. - Text on a user-picked tile colour is black or white, whichever contrasts more. It is measured, never fixed.
- Widgets cannot read tokens. A widget copies the values it needs from the palette.
Use the files as they are. Do not recolour, stretch or redraw them.
