SiP design system

Typography, tokens, and common patterns using sip-chrome.css (which imports tokens.css) plus this page’s demo.css.

Typography

Playfair Display — display

DM Sans body copy at 1rem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

DM MONO · LABEL / META STYLE

Colors

SiP red--sip-red

LEGO yellow--lego-yellow

Teal--teal

Ink--ink

Muted--muted

Canvas--canvas

Gallery--gallery

Rule--rule

Chrome bg--chrome-bg

Buttons & tags

Tag

Cards

Card meta

Eyebrow

Card title in Playfair

Supporting text uses muted body color and comfortable line height.

Inputs

Header & footer snippets

Static reference pages (not full documents for production). Open in a new tab or use the iframes below.

header.html · footer.html

Header

Footer