Changelog

3.4.0 · 2026-11-10

• Secondary button (Button): .sys-btn--secondary, a newsprint block with black type that turns black on hover. It pairs with the black button on white; the ghost stays the choice on newsprint or a color. It comes from jonesco.com’s hero, which already used it.

3.3.1 · 2026-11-08

• Back to top: the title it focuses no longer shows a focus ring. Safari outlined the heading after the jump; anything with tabindex="-1" now takes focus without one.

3.3.0 · 2026-11-08

• Back to top (new page): .sys-to-top, a floating black pill with a white stroke, an up arrow and “Top”. It appears once the opening block scrolls away and returns to the top of the page. First used on the style specimens page.

3.2.0 · 2026-11-08

• Accent tag (Tag): .sys-tag--accent, a magenta pill with white type for what’s new or featured. One per group, never a status. It started as the New tag on the style specimens page.

3.1.0 · 2026-11-08

• Card hairline (Card): a 1px white line (--paper) now separates the art from the newsprint body. It started on the style specimens page and is on jonesco.com’s work cards too. Sites pinned to 3.0.0 or earlier are unaffected.

3.0.0 · 2026-11-08

• Tags are pills with no border (Tag). Three kinds: dark (.sys-tag, black with yellow type), light (.sys-tag--light, newsprint with black type) and white (.sys-tag--white, for newsprint or a color behind it). Two sizes: small, 24px, the default; medium (.sys-tag--md), 32px. Warning stays a thin outline, now a pill. .sys-tag--plain still works as the light tag.
• Major: tags change shape and size everywhere. Tags and the toggle are the only exceptions to square corners. Sites pinned to 2.x are unaffected.
• Card (new page): .sys-card is art on top and the words below on newsprint, with no border. Optional id, sentence-case title, text, and a foot with a tag and a “View” label pinned to the bottom. .sys-card--sm for dense grids. It comes from jonesco.com’s work cards and is now used on a second page.
• Switch is now Content switcher. .sys-content-switcher and .sys-content-switcher--tabs (renamed page). .sys-switch keeps working as a deprecated alias, so nothing changes on sites that use it.
• Icon only button: .sys-btn--icon makes any button size a square with one glyph (24, 20 or 16px), always with a tooltip and an aria-label.
• Button sizes: today’s button is large (64px) and stays the default. New medium (.sys-btn--md, 40px) and small (.sys-btn--sm, 32px) match the medium and small content switchers.
• Content switcher sizes: small stays the default; medium (.sys-content-switcher--md) is 40px tall to match a text field beside it.
• Toggle (new page): .sys-toggle, one setting on or off. A round knob in a pill track with a thin black border that fills black when on; the label names the setting, never its state. The knob slides with a slight overshoot and stretches while pressed. Works on black.
• Text input (new page): .sys-input in a .sys-field with a caps label, help and error text. Text fields are newsprint with no border, 40px tall to line up with a medium content switcher; focus draws a thin black border, errors draw a magenta rule around the field with the message in magenta under it. Works for textareas, and a search box (type="search") leads with a magnifying glass.
• Tooltip (new page): .sys-tooltip with data-tip, a black label with white type (white with black type on black) on hover and keyboard focus, with a tail whose tip sits 4px from the control. Below, above, left or right; above or below can line up at the start, middle or end. Icon button tooltips change from yellow to the same black.
• Docs: content switcher and toggle examples respond to clicks.
• Resources in the docs menu: Style specimens, a reference page of illustration and motion drawn in code. It uses the system and its cards; it isn’t part of the system.
• Docs on phones: the sidebar is a menu, previous and next links close every page, and nothing scrolls sideways.

2.1.0 · 2026-11-06

• Table (new page): .sys-table is a newsprint panel with padding around a data table. Caps headers on the thick rule, rows on thin rules, an optional bold total under a thick rule, every column left-aligned with tabular digits. Inside it the Working tag is white so it stays visible.
• Financial Dashboard example rebuilt: its savings accounts and top stocks and funds are tables.
• Docs: the docs’ own reference tables are styled only as direct children of the page, so they no longer reach into examples.

2.0.0 · 2026-10-24

• Body type is Trade Gothic. --font-body is Trade Gothic regular, with its oblique and bold, in place of Libre Franklin. Jonesco now uses only Trade Gothic. Four trimmed WOFF2 cuts join fonts/, with the same cap-centering fix as the display cuts. See Typography.
• Display and label fallbacks are Trade Gothic, then the system sans. Sites no longer need the Google Fonts link for Libre Franklin; remove it when upgrading.
• Major: body copy looks different everywhere. Sites pinned to earlier versions are unaffected.

1.6.1 · 2026-10-08

• Working tag (.sys-tag--plain) is a newsprint block with black type and no border, instead of muted text with no background, so all three status levels read as tags. Described on the Tag page.
• Financial Dashboard example rebuilt to match.

1.6.0 · 2026-10-08

• Inline notification is full width: .sys-note drops its 46em cap and spans the container it refers to (the section for a section-wide alert, the card for a note about one card), so it lines up with that content. New stipulation on the Inline notification page.
• Changes how an existing component looks; sites pinned to earlier versions are unaffected.

1.5.1 · 2026-10-08

• Color: cyan (--data, #1192e8) joins the main swatches on the Color page, marked as the data color.
• Logo: the three versions stack in one left-aligned column. Docs and jonesco.com icons use the Mark logo at 70% of the square.

1.5.0 · 2026-10-08

• Logo (new page): JONES© in three versions, Full, Short (JNS©) and Mark (J©), each in black and white in logos/, with use, clear space and minimum sizes.
• Docs icons: the Mark logo (J©) on magenta as the favicon, Apple touch icon and Android icons, 70% of the square wide; jonesco.com uses the same icon on black.

1.4.0 · 2026-10-08

• Inline notification (new page): .sys-note for context (yellow rule on pale yellow) and .sys-note--alert for things that need action: the same container, led by a status tag (Critical is the black box with yellow type).
• New token --highlight-soft: #fffbe0, the pale yellow behind a note.
• Missing data is yellow (Data & charts): a month not recorded is a --highlight bar instead of the gray track.

1.3.1 · 2026-10-08

• Newsprint can block in a section: besides sitting behind artwork, it can fill or contain a section. Still never the whole page.
• Docs: the sidebar keeps its scroll position from page to page.
• Ghost buttons are outline only: .sys-btn--ghost has no fill, a black border, and fills black on hover. Newsprint is for artwork, not buttons.

1.3.0 · 2026-10-08

• Newsprint replaces cream. --newsprint: #edebe6, a warm light gray that reads as paper against white (17.6:1 with black type) and sits a step darker than the --gray track. It’s the “paper” behind artwork and the ghost button.
• --cream stays as a deprecated alias that now points at --newsprint; sites should switch to the new name.
• .sys-paper and .sys-btn--ghost use newsprint. Principles and docs say newsprint throughout.

1.2.1 · 2026-10-08

• Financial Dashboard demo: a public demo of the dashboard with a made-up household, linked from its site page. Built from the real dashboard’s code, so its structure stays in step.
• The site is now called Financial Dashboard throughout the docs.
• Docs only, plus a comment in patterns.css; no visual change.

1.2.0 · 2026-10-08

• Data color (Data & charts): --data, --data-300, --data-200, --data-100 in system.css. Cyan by default; the main step is the darkest. Rules for one hue, missing data, hover, targets and the accent.
• patterns.css, from the Financial Dashboard: block title, stat and .sys-mark, meter and split bar, switch (toggle and tabs), label and icon buttons, section nav with .sys-section, and tag status levels (.sys-tag--outline, .sys-tag--plain).
• Additions only: nothing existing changes, so sites pinned to 1.1.x look the same.
• New site page: Financial Dashboard.

1.1.1 · 2026-10-06

• Sites: two sites now, jonescoartdept.com and jonesco.com. The portfolio site became jonesco.com, so its variations moved to the jonesco.com page.
• Docs only; system.css and patterns.css are unchanged.

1.1.0 · 2026-10-04

• Case rule (Typography · Case): caps for the one hero per page, sentence case for titles you read in groups, caps for short labels.
• patterns.css: new .sys-title helper; .sys-tile__title is now sentence case in Bold No. 2.

1.0.0 · 2026-10-04

• First release, extracted from jonescoartdept.com and the portfolio site that is now jonesco.com.
• system.css: color, type, rule, layout, header and motion tokens; Trade Gothic with the cap-centering fix; base and yellow selection.
• patterns.css: header (compact, grow), footer, section heading, tag, button (+ ghost), tile, spec list, paper, band (+ next).
• Docs site.