FOUR SYSTEMS
Each of the four systems has its own tokens, components, and type rules. Link the one that matches what you are building.
/
A member or a guest using a screenScreens/screens/
A flyer, an ad, a poster, or one printed sheet, graphic-ledPrint/print/
A multi-page proposal, report, or guide read as a PDFDocuments/documents/
More than one page, a running head, or page numbers means Documents. One sheet built from type, colour blocks, and the weave means Print.
Dashboards
Internal staff dashboards read in a browser, such as scan rates, revenue, inventory, and prospect boards.
Graphite background, one Fabiola title, Inter headings, and mono type on every label and number.
Screens
Pages a member or a guest uses on a screen, such as the member portal, account pages, and public web pages.
Navy and fog backgrounds only, with one continuous weave pattern down the page.
/screens/tokens.css · /screens/components.css · /screens/field.js · /screens/screen.js · /screens/agents.md
A flyer, an ad, a poster, or one printed sheet, graphic-led and built from type, colour blocks, and the weave.
White paper with navy weave bands, one Fabiola title, and green as the accent colour.
/print/tokens.css · /print/pattern.css · /print/logos.css · /print/components.css · /print/hero-fit.js · /print/agents.md
Documents
A multi-page proposal, report, or guide read as a PDF, such as the 2027 Ticketing Proposal, the Audience Reach Report, and the Ticket Access Guide.
White paper with no weave, a crest header bar, a running head, and page numbers.
/documents/tokens.css · /documents/logos.css · /documents/document.css · /documents/agents.md
Root file URLs never change
/tokens.css, /components.css, /fonts/, /vendor/, /images/, and the two starters keep their URLs, because roughly forty live projects link them at load time. Changes are additive only: never rename a token, never remove a component class.
Self hosting a system
Each system folder is self contained, with its own fonts and images. Anything that renders behind office TLS inspection or gets exported to PDF has to self host, so copy the whole folder into the project instead of linking a stylesheet URL.
Sean's personal design system
Sean's own site uses a separate brand, palette, and repo at design.seantippen.com. Do not use a Triumph system on a personal page.