Skip to content
Stackyard

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”
  • Both pages carry both themes. Display Mode sets the theme on <html>, and the dashboard, the Settings pages and every widget follow it.
  • 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.
Section titled “Logo”

Use the files as they are. Do not recolour, stretch or redraw them.

Icons

Section titled “Icons”

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.

general
appearance
dashboard
app
folder
widget
small
medium
large
xlarge
backup
books
clock
connections
switcher
disk
dns
github
nowplaying
system
weather
edit
chevrons
back
up
hue-lo
hue-hi
sat-lo
sat-hi
bright-lo
bright-hi
external
docs
issue
info
heart
grip
eye
search
arrow-down
arrow-up

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 colour, and one part per icon takes the accent.

RuleValue
Grid24 by 24. Draw inside 2 to 22.
CoordinatesWhole numbers on every straight edge.
Stroke and gap2 and 2.
Corners4 for shapes 14 or larger, 3 medium, 2 small.
Bars and dotsBars 2 high, rows every 4. Dots radius 2, nodes radius 3.
AccentAt most one part: the thing the icon is about.

Adding an icon for a widget

Section titled “Adding an icon for a widget”

  1. Add an entry to ICONS in ui/js/icon-set.js. Draw what the widget shows, in as few shapes as read at 16 pixels.

    system: {
      shapes: [
        line('M3 16 7 12 11 15 16 8'),  // the graph
        dot(19, 6, 3, 'accent'),         // the latest reading
      ],
    },

  2. Map a glyph name to it in ui/js/widget-glyphs.js, and add the same name to VALID_GLYPHS in api/src/widgets.js.

  3. Set "glyph" in the widget’s widget.json. See List icon.

rect, circle and shape draw bodies. detail, dot and bar draw small parts. line and ring draw lines. A test rejects a glyph that points at no icon.