@metreeca/skin

Design system

Essential design tokens and styles

A typed token contract and the stylesheet giving it values. Every sample on this page is painted by the tokens themselves, so what you see is what an app gets by importing @metreeca/skin/index.css and nothing else.

    Click any token to copy its var() reference. Colour samples follow the scheme on show, except the anchors, split between the light scheme on the left and the dark one on the right.

    Foundations

    Colours

    Eight anchors carry literal values; every other colour derives from them, so retuning an anchor carries the whole interface along.

    Anchors

    The page pair, the brand accents and the four steps of the meaning scale.

    Meaning scale

    Every meaning a widget carries lands on one of four steps. A notice is marked by the step, tinted by its fill and titled in its stroke; its body keeps the page ink.

    Text and marks

    Live contrast against the page and the table stripe, in the scheme on show. Text holds 4.5:1, marks and the focus ring 3:1; disabled and placeholder ink are deliberately below budget.

    Fills

    Grounds for editing, striping and interaction states, and the tints of the meaning scale.

    Foundations

    Palettes

    Colours a chart, a coding or a map reads. They say where a value sits or which thing it belongs to, and never stand in for a role.

    Scales

    Ten steps each, numbered by the share of the anchor they carry. Gray, subtle and strong follow the anchors; heat codes bands by hue and always needs a legend in text.

    Series

    Nine slots telling one thing from another, ordered so neighbours stay apart under colour vision deficiency. On scatters and maps, where every pair is compared, only the first three hold.

    Areas

    Four classes filling shapes, as two light and dark pairs. A map keeps its boundaries drawn and names its classes in a legend; a fifth class is a second map.

    Foundations

    Typography

    The variable Roboto family, bundled with the stylesheet and fetched only once text set in a face is painted.

    Faces

    Sizes and weights

    Foundations

    Spacing

    Two ladders measured in em, so both follow the text they sit in: spacings set a thing apart from its neighbour, scalings size a thing against the text.

    Spacings

    Scalings

    Foundations

    Shape

    The line, the radii, and the marks for focus and invalid input.

    Foundations

    Elevation

    Surfaces lifted off the page or sunk into it, the shadows pairing with them, the glass gathering floating controls and the blanket dimming what a modal covers.

    Shadows

    Foundations

    Motion

    How long a change takes and the curve it follows. Durations collapse to zero for readers asking for reduced motion.

    Foundations

    Layers

    The stacking order two overlapping things are settled by, and how far a thing present but unavailable is faded.

    Stacking

    Opacities

    Foundations

    Context

    Answers an area hands down to everything it holds, read by rules through style queries. Resize the window to watch the viewport flags switch.

    Markup

    Text

    Plain document markup, styled by the base rules with no class attached.

    Heading 1

    Heading 2

    Heading 3

    Body text with strong, emphasised, inline code, Ctrl + K, marked, small and linked runs, set on the base line height so a paragraph reads comfortably at the measure the page allows.

    A quotation, set apart from the running text around it.

    // Greets the reader, highlighted as highlight.js classes it.
const greeting = "Hello, world!";
const times = 3;

for (let i = 0; i < times; i++) {
    console.log(greeting, true);
}

    Markup

    Lists

    Unordered

    • An unordered item
    • Another item
      • A nested item
      • Another nested item
        • A third level
    • A closing item

    Ordered

    1. An ordered item
    2. Another item
      1. A numbered sub-item
      2. Another sub-item
        1. A third level
    3. A closing item

    Mixed

    1. A numbered step
      • A bulleted note
      • Another note
    2. The next step
    • A bulleted point
      1. A numbered detail
      2. Another detail
    • The next point

    Definitions

    Term
    The definition of the term.
    Another term
    Its definition.

    Markup

    Tables

    Plain

    Name Role Count
    Alpha First entry 12
    Beta Second entry 345
    Gamma Third entry 6,789
    Delta Fourth entry, with inline code and a link 10,112
    Epsilon Fifth entry 13,435
    Zeta Sixth entry 16,758

    Striped, with data-striped

    Name Role Count
    Alpha First entry 12
    Beta Second entry 345
    Gamma Third entry 6,789
    Delta Fourth entry, with inline code and a link 10,112
    Epsilon Fifth entry 13,435
    Zeta Sixth entry 16,758

    Markup

    Forms

    Fields
    Options

    Markup

    Alerts

    GitHub alerts, as Markdown renders > [!NOTE] and its siblings: notes on the subtle accent, every other kind on a step of the meaning scale.

    Note

    Useful information a reader should know, even when skimming, marked by the subtle accent.

    Important

    Key information a reader needs to succeed.

    Tip

    Advice for doing things better or more easily.

    Warning

    Urgent information that needs immediate attention to avoid problems.

    Caution

    Advice about the risks or negative outcomes of certain actions.

    Adoption

    Theming

    An app adopts a brand by restating the accent anchors once on :root, as an ordinary unlayered rule; the override follows both schemes and every pinned subtree.

    Pinned subtrees

    A data-theme attribute pins one scheme for everything below it.

    Light

    Pinned to the light scheme, with a link and a field.

    Dark

    Pinned to the dark scheme, with a link and a field.