Four systems, one door each. They are not skins of one thing: they have different palettes, different type rules, and different jobs.
The medium picks the system, not the brand. Answer what you are building before you link a stylesheet, because a technically token-perfect artifact built on the wrong system looks deliberate.
What is the output, and who sees it?
| What you are building | System | What you link |
|---|---|---|
| Internal data dashboard, ops tool, staff report in a browser | Dashboards | design.greenvilletriumph.club/tokens.css |
| Member portal, account page, anything a fan logs into or browses | Screens, v3 | design.greenvilletriumph.club/screens/tokens.css |
| Flyer, one sheeter, deck, PDF, anything printed or handed over | Print and promo, v2 | design.greenvilletriumph.club/print/tokens.css |
| Sean's own site and personal dashboards | seantippen.com | design.seantippen.com/tokens.css |
Each one carries its own tokens, its own components, and its own build contract for an AI to follow.
Internal, dark canvas, data first
Staff-facing reports and ops tools that live in a browser. Scan rates, revenue, inventory, prospect boards.
Neutral graphite canvas with a surface ladder, Fabiola once as the hero, Inter for every working heading, JetBrains Mono on labels and numbers. KPI rows, data tables, Chart.js panels, and a left nav rail with scroll spy.
Member and public facing
Anything a member or a guest actually uses: the member portal, account pages, public web. Built out of the season ticket portal, so every rule in it is a rule something shipped on.
Two grounds only, navy and fog, with the weave running the page as one continuous field. Long lists are one surface. Colour lives in marks, never in type on light. A heading and one value on the page, everything else one tap away in a shared sheet.
Flyers, decks, PDFs, handouts
Anything printed, exported to PDF, or handed to a client, a sponsor, or a guest. Match flyers, one sheeters, proposal decks, menus.
The brand guide look: light Upstate Fog paper or a navy panel, the interlocking T weave, Fabiola Capitals at weight 400 for the hero and Inter for everything else. Graphic and typographic, no buttons, no dashboard chrome, no hero photography.
Personal, not Triumph
Sean's own site, personal dashboards, and side projects. Separate brand, separate palette, separate repo. It is listed here so nobody reaches for a Triumph sheet by accident.
Dark canvas with a cyan signal accent, self-hosted Inter, JetBrains Mono, and Big Shoulders Display, a left rail shell, and a clonable starter.
Roughly forty live projects link these exact URLs.
/tokens.css, /components.css, /fonts/, /vendor/chart.umd.min.js, /images/brand/, and the three starters stayed exactly where they were when this page became a hub. Only the root HTML changed role. The dashboard reference that used to sit here now lives at /dashboards, and /reference.html redirects there.
Changes to the dashboard sheets are additive only. Never rename a token, never remove a component class, and keep the compatibility alias block: a rename does not break this site, it breaks forty others that pull the file at load time.
The three faces load through @font-face inside each system's own tokens.css, so nothing needs a Google Fonts link. /fonts/ is served with an open CORS header and a one year immutable cache, and is consumed cross origin by every Triumph artifact.
Each system folder is self contained on purpose. You can copy /screens/ or /print/ wholesale into a project that has to self host, which is the rule for anything that renders behind office TLS inspection or gets exported to PDF.
