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.
Teal is the brand accent. Rules name a role below, never a raw color.
The other hues and grays are Apple’s system colors.
Text on cards uses --sy-a11y-dim. WCAG asks for 4.5:1.
--sy-a11y-dimText on a colored tile is black or white, whichever measures higher.
- Aa13.89:1
- Aa9.46:1
- Aa5.65:1
- Aa17.01:1
Display Mode sets the theme on <html>, for every page and widget. Widgets cannot read tokens. A widget copies the values it needs from the palette.
The interface draws one icon set, defined in ui/js/icon-set.js. This list is built from that file, so it always matches the app.
Each icon is a short list of shapes on a 24-unit grid. The file turns the list into an SVG sprite. Icons follow the text color, and one part per icon takes the accent. Select an icon to copy it as SVG.
Icon rules
Section titled “Icon rules”- Grid
- 24 by 24. Draw inside 2 to 22.
- Coordinates
- Whole numbers on every straight edge.
- Stroke and gap
- 2 and 2.
- Corners
- 4 for shapes 14 or larger, 3 medium, 2 small.
- Bars and dots
- Bars 2 high, rows every 4. Dots radius 2, nodes radius 3.
- Accent
- At most one part: the thing the icon is about.
Add an icon
Section titled “Add an icon”Add an entry to ICONS in ui/js/icon-set.js, in as few shapes as read at 16 pixels. Draw bodies with rect, circle or shape, a container with frame, small parts with detail, dot or bar, and lines with line or ring.
To use it as a widget’s list icon, see List icon.