Pattern language & motif library
All graphic decoration descends from the logo’s own geometry. This gives the brand a signature no template can reproduce, and a geometric order that reads as precision in any market. The language is a library of six motifs: the Interlock remains the system default, and five further directions cover immersive, print and storytelling surfaces. Coherence rule: never more than two motifs on one surface, one ambient plus one punctuation.
1 · The triangular lattice
A hairline 60-degree triangular grid, used as an ambient background on Night surfaces at very low contrast. Strokes are mist at 6 to 8% opacity; occasional single triangles fill with orange at 8% or take a brighter outline, as if one cell of the network has come alive. Fade the lattice out with a mask before it reaches text. Maximum one lattice region per viewport.
2 · The triangle cue
A small solid triangle is the system’s only ornamental glyph. Pointing up before eyebrows and labels, pointing right inside buttons and links as the direction of travel. It replaces chevrons, arrows and icon soup, and it is always a single colour, usually orange.
3 · The motif library
Six motifs, one source. Each entry below records its status, its sanctioned surfaces and its limits.
| Motif | Status | Sanctioned surfaces | Limits |
|---|---|---|---|
| Interlock Triangular lattice | System default | Ambient backgrounds on Night sections, masked away from text | Max one lattice region per viewport |
| Strata Triangulated dune terrain | Approved · immersive hero motif (confirmed in the approved homepage exploration) | Campaign and launch heroes as a WebGL mesh (immersive tier only); on static surfaces, exclusively as Frozen Frame stills rendered from the true 3D model (see below). The flat ridgeline construction is retired. The everyday homepage hero runs the Interlock, not the terrain | One terrain per page; never behind body text; WebGL tier only where the brand is the experience (see Motion) |
| Threshold Concentric triangles receding to a vanishing point | Approved · ambient and story motif | Covers, section backdrops, dividers at any scale, the About story, loading states drawing inward | Strong focal pull: content sits beside it, never on it; one aperture per surface; the innermost triangle is the only orange element |
| Convergence Three strands become one line | Approved · storytelling and motion device | The homepage shift sequence (three strands draw with the three statements and merge on the resolution), About page hero, pitch-deck idents, loading-curtain stroke-draw | Never tiled or repeated as texture; it is an illustration of the name, not wallpaper |
| Survey Contour isolines with triangle benchmarks | Library · situational | Method and diagnostic pages, case study headers, data backdrops at very low contrast | Supporting cast only; never the homepage hero |
| Delta Index Ascending deltas; change, indexed | Library · situational | Results sections, KPI and report graphics, social charts, favicon animation | Every delta must carry a real number; a delta with no data is noise |
4 · The Strata static tier: Frozen Frame
On static surfaces Strata appears only as a Frozen Frame: an offline render of the true 3D terrain, with the same heightfield, camera and fog as the WebGL scene, full triangulation with the diagonal weighted a step lighter than the grid, and hidden-surface occlusion. The brochure is a photograph of the website. Flat 2D ridgeline imitations are retired; if it has no depth, it is not Strata.
| Parameter | Specification |
|---|---|
| Source | The heightfield and camera of the approved homepage exploration (eye 0, 5.4, 13.5; target 0, 0.4, 0; 42° field of view), rendered offline. Never redrawn by hand. |
| Triangulation | Full grid with a consistent diagonal per cell, drawn at roughly 58% of the grid line strength so the mesh reads triangulated without turning to noise. |
| Fog | Night: 16 to 46 units toward navy-950. Day: 22 to 52 units toward mist-25, wireframe in navy per the re-light rule. |
| Facets | Eight orange facets at fixed grid positions. Never random; every render of a master is identical. |
| Masters | Triway Studios, the group’s design division, supplies Night and Day masters at 1840px, 2x. Crops are permitted; regeneration only by Studios from the spec, which is parametric, so higher resolutions exist on request for large media. |
Using the Frozen Frame: bleed or blend, never float. The render has two kinds of edge and they are not equal. The fog horizon is a designed edge: on a matching surface it disappears and the terrain emerges from the page. The crop boundary is an accident of the rectangle: mesh lines cut mid-triangle at a visible straight edge read as a pasted image. The rules below exist to keep the first and kill the second.
| Rule | Standard |
|---|---|
| Surface matching | The Night master sits only on navy-950 and the Day master only on mist-25 or white, so the render’s own background merges with the surface. On any other tint, do not use it; there is no third master. |
| Sanctioned placements | Three. Full-bleed: the image runs off the trim or viewport and the medium does the cropping. Band: a full-width strip whose long edges dissolve via the fog or a fade mask. Emergence: anchored to one edge of the surface, usually the bottom, dissolving into the background above through the built-in fog. |
| Crop edges | Any crop edge that sits inside a layout must fade to the surface colour over at least 8% of the image dimension. A hard mesh edge is permitted only where it coincides with the physical edge of the medium. |
| Framing | No borders, shadows, or rounded containers when used as ambient decoration; the terrain is part of the surface, not a picture on it. Framed presentation is reserved for contexts that discuss the asset itself, such as this document. |
| Scale | Crop, never upscale. Maximum display size of a master crop is its native resolution at 2x; beyond that, Studios regenerates from the spec at the required size. |
| Content | Never behind body text. Headlines may sit over the fogged upper region only, where line density is near zero, and must pass the surface’s contrast requirements. |
5 · Threshold construction
Nine concentric triangles recede toward a vanishing point on an eased curve; the innermost solid orange triangle is the point of crossing and the surface’s only orange element. It argues the brand story on sight (“Triway exists to take you across that threshold”) and renders identically from a full-bleed cover to an 8px divider.
6 · Gradient policy
One gradient exists in this brand: navy depth, a subtle radial from navy-900 into navy-950, used to give Night heroes atmosphere. That is the whole list. No orange-to-pink, no blue-to-purple, no gradient text, no gradient borders. Flat colour is the brand’s confidence.
7 · Where decoration may appear
| Element | Allowed | Frequency |
|---|---|---|
| Interlock lattice | Night sections only, masked away from text | Max one per viewport |
| Strata terrain | Immersive heroes (WebGL); Frozen Frame stills on static surfaces | One per page |
| Threshold aperture | Covers, backdrops, dividers, story moments | One per surface; content beside, never on it |
| Convergence strands | Story moments, idents, loading states | Once per surface, never tiled |
| Survey contours / Delta Index | Data and results contexts | Low contrast; deltas carry real numbers |
| Triangle cue | Eyebrows, buttons, links, list markers | Freely, one colour |
| Navy depth gradient | Night hero and CTA backgrounds | Sparingly |
| Anything else | Nothing else. No orbs, particles, glassmorphism, code rain, skylines | Never |