This is the single reference for the Trio brand on screen. It pairs the official corporate brand foundation, the logo and its color system, with the digital design language approved on live pages, so print, social, and web finally speak the same language.
The three-hexagon mark and the "trio Workforce Solutions" wordmark are the corporate signature. Use the supplied artwork exactly, never recreate, recolor, or redraw it.
Keep a clear zone around the logo, free of type, imagery, and the edge, at least the height of the hex mark. Minimum size: 1.25″ wide for the primary lockup, 0.55″ for the wide/short form. Retain proportions; never stretch.
Two layers, reconciled. The brand foundation is the official corporate palette that governs the logo and print. The digital system is the slightly refined, screen-tuned version the client approved on live pages, brighter contrast, softer neutrals, built for interfaces. Use the digital tokens for the website; treat the foundation as the anchor.
Accent rhythm is teal → green → orange, cycled in that order across numbered items, signal dots, and hex glyphs. The logo always uses its own official colors above, never the digital tokens.
One family does the whole system: Inter (fallbacks Avenir Next, Helvetica Neue, Arial). Headlines run heavy with strongly negative letter-spacing; body stays comfortable and readable. The only exception is a decorative Georgia quote glyph.
National averages mask local reality. Market Intelligence puts your own placement averages next to the live market.
Trio connects the workforce decisions that usually happen separately into one system, in real time. This is the default reading size across the site, set the floor here so nothing dips below comfortable.
Everything actionable is a pill. Content sits on soft white cards with large radii and deep, gentle shadows. The hexagon from the logo is the recurring motif; data reads through colored signal dots and gradient meters.
Pill radius 999px · Inter 800 · sizes: default, .btn-lg, .btn-xl. One primary action per view.
Pointy-top, logo-accurate (0.866 width:height). Icon frames, floating accents, gradient backdrops.
10px dot + soft ring glow. Status and category throughout.
Track #e8f1f5, teal→green fill. Rate spreads, scores, capacity.
Teal→green is the through-line, CTA bands, meters, eyebrow bars.
Optional oversized index at low alpha for wayfinding. Use consistently or not at all.
The brand earns attention with restrained, purposeful motion, never decoration for its own sake. Every effect illustrates something real, and all of it yields to prefers-reduced-motion so it's accessible by default.
Sections rise and fade in as they enter view, quiet, quick, one-time.
Key stats animate from zero when scrolled into view, so the number lands.
The Market Intelligence panel ticks and re-prices on a gentle random walk, a real, interactive moment.
Traveling signal pulses along the orchestration lines; a soft cursor spotlight on interactive cards.
The logo and foundation colors are fixed. Tighten to them.
Big type, generous whitespace, one clear action. Modern SaaS, not stodgy staffing.
Purposeful motion and the hex-and-gradient system give it flair, extend it wherever it earns its place.
Every page, homepage, Market Intelligence, Digital Workers, now runs on this one shared system. Change a token here, and the whole site moves with it.