Introduction
The shared design language for Jonesco sites: jonescoartdept.com, jonesco.com and the Financial Dashboard. Black, white and newsprint; Trade Gothic; thick rules; square corners; one accent per site.
Three layers
| Layer | What it is | How strict |
|---|---|---|
| Principles | How it should feel: the vernacular. | Firm direction. Bend it with a written reason. |
Foundations · system.css | Tokens (color, type, rules, spacing, motion), the fonts and a minimal base. | Every site loads it. A site overrides only the tokens it needs. |
Components · patterns.css | Proven pieces: header, footer, tag, button, tile, card, band, and for data pages stat, table, meter, content switcher, toggle, text input, tooltip, section nav… | Opt in. Use what fits; restyle in the site. |
Sites
Each site documents how it departs from the defaults, and why, under Sites. When a variation shows up on two sites, it’s a candidate to become a component variant.
Adding to the system
- A new variation on one site: note it on that site’s page.
- A stipulation (a rule about when or how to use something): add it to the component’s page.
- A new component or token: add it to
patterns.cssorsystem.css, give it a page here, note it in the changelog, and release a new version.