Components
Everything below is rendered live with the production CSS in this file. Each component is shown on the surface(s) it will actually live on. Lift the markup and styles directly, or map them to Tailwind utilities using the token sheet.
Buttons
One primary per view. The primary pairs orange-500 with a navy-950 label: higher contrast than white-on-orange and unmistakably Triway. Hover lifts 1px and lightens; focus shows the 2px orange ring; disabled goes neutral.
Section header pattern
Every marketing section opens the same way: triangle eyebrow, heading, one lead paragraph. This rhythm is what makes the site feel like one hand designed it.
Strategy that ends in shipped software. Software that ends in a capability you own. Three offers, one accountable team.
Service card
AI & Automation
Agents, copilots and RPA shipped into live workflows, wired to your core systems and measured on outcomes.
Explore the practiceSoftware Solutions
Web, mobile and API engineering with clean architecture, built to be maintained by your team, not just by ours.
Explore the practiceCybersecurity
Threat detection, identity and compliance aligned to UAE and KSA frameworks, treated as part of every build.
Explore the practiceStat block
Maximum four per row, and only verifiable numbers. The orange rule is the accent; the number is navy, never orange.
Testimonial
Static grid of at most three, never an auto-playing carousel. Each quote appears once, trimmed to its strongest two sentences, with name, role and organisation.
"Triway modernised our core banking operations end to end. We achieved full regulatory compliance and materially improved our customer experience."
Forms
Badges & tags
Alerts
Navigation bar
Breadcrumbs
For any page two or more levels deep: service pages, case studies, insights. Plex Mono at label size, the right-pointing triangle cue as the separator (never slashes or chevrons), the current page in ink and unlinked. Sits directly below the header with a 20px gap to the page eyebrow.
| Rule | Standard |
|---|---|
| Type | IBM Plex Mono 11px, uppercase, 0.18em tracking. Links mist-600, hover navy-700; current page navy-950, never a link. |
| Separator | The 7px right-pointing triangle cue in mist-300. No slashes, chevrons or arrows. |
| Depth | Maximum three ancestors plus the current page. On viewports under 720px, collapse middle levels to an ellipsis linking to the parent. |
| Night variant | Campaign subpages only: links navy-300, current page mist-0, separators navy-700. |
| Accessibility | Wrap in nav with aria-label="Breadcrumb"; mark the current page with aria-current="page"; separators are aria-hidden. |
| Never | On the homepage, in the footer, or duplicating the page title as the final crumb’s link. |
Putting it together: a campaign hero (Night)
The campaign-register opening assembled from the pieces above: navy depth, masked lattice, eyebrow, display type, one primary action. The default homepage runs this same composition on Day surfaces with navy linework; no skyline, no terminal, no chips on either.