The load-bearing rule

Green is Digital. Purple is Creative.

Everywhere, without exception: icons, tags, list rails, chevrons, footer columns, hover states, chart series. When both tracks are meant together, run green into purple as a gradient rather than picking one.

Colour

Surfaces

Progressively lighter as elements stack toward the viewer.

Brand accents

Text

Colour

Brand gradient

The one earned green-to-purple, held solid at each end so the blend is a narrow band in the middle. Green-lift at 0 and 35%, base purple at 65 and 100%, left to right. The token is --gradient-brand, applied to text through .text-gradient-brand. Display headings only: the purple end sits at the AA large-text floor, so it never carries body-size text.

Everything working in Synrgy.

Typography

Type scale

One family, Poppins. Named by role, not size.

The one named exception

--font-mono is the one place a second family is allowed: a drawing that is literally a terminal takes the reader's own system monospace stack rather than Poppins, which is the most honest face for one. Nothing is downloaded for it.

Typography

Measures

Line length is tokenised in ch so it tracks the type it holds, generating the max-w-measure-* utilities. The rule on the right marks where each measure caps the line.

Typography

Weights

Tracking

Typography

Headings

h1 to h6 carry the scale as base element styles in global.css, so Markdown and un-classed prose render right without a utility class.

Punctuation in coloured prose

Punctuation takes the colour of the word before it: a mark after an accented word sits inside the span and carries the accent; after an uncoloured word it stays the main text colour.

We run both, then merge them.

Spacing and layout

Spacing scale

Named tokens carry meaning across the site; the gap ladder is Tailwind's numeric scale, one step per role. Ties round padding up, margins and gaps down.

Named tokens

Gap ladder

Shape

Corner cuts

Everything is angular. The cut is one 45° angle at a tokenised set of lengths by role. Reference a token, never a raw pixel.

Two tools, one angle

.chamfer is square-only, since its percentage cut holds 45° only when width equals height. For anything non-square, the length-based .cut-corners holds the same angle at any aspect ratio. Between them, every shape on the site is covered.

Rounded radii

The one place the site rounds rather than cuts, held to Tailwind's own scale on purpose, since redefining a radius token silently changes every rounded-* on the site. Only the first two are in real use; rounding survives only at nav-control scale.

Shadows

Two neutral shadow pairs, tokenised. Accent glows are drop-shadow filters carrying a track colour at the call site, so the light follows the chamfered silhouette.

Motion

Durations

House easing is --ease-out-expo, cubic-bezier(.16, 1, .3, 1). Hover a card to feel the speed.

Motion

Motion patterns

The house moves beyond simple hovers. All rest in their final state under reduced motion.

Reveal stagger

01

02

03

04

Sibling cards land 70ms apart via a transition-delay step (the values grid, the flight-path steps).

Replay ↺

Count-up readout

Demo figure

0+

Figures count up over 1.8s with an exponential ease-out on first view, replay after a bfcache return, and jump straight to target under reduced motion (the hero console).

Replay ↺

Stroke draw

pathLength normalises the path so one dash covers it, and the offset draws the line along its length on reveal (the two-track merge curves).

Replay ↺

Clip-path wipe

An already-dashed stroke reveals with a clip-path sweep instead, so two dash systems never fight (the flight-path trajectory).

Replay ↺

Beacon float

The console mark bobs 7px on a gentle 5s loop, resting via an explicit animation: none under reduced motion (the hero and identity consoles).

Glow pulse

Station

An accent drop-shadow breathing on a 4.5s loop, recoloured with --glow-accent. A filter, so the light follows the cut silhouette. Rests at its low value under reduced motion. Carries no information and moves no content, so it files with the beacon float and owes no pause control (the service pages' station).

Components

Buttons

The console key

.key: not a .btn variant, a control of its own for a destination that belongs to both tracks at once rather than to either one. No lift, no glow, no sheen, just the cut-corners fill and the gradient chevron, with the Brand Identity glint recoloured to the brand gradient and swept on hover or focus.

Form fields

.field-input: the console's input, a bare hairline rectangle on the ink surface. Square corners are the site's own angular language at this scale; the border does the feedback (line at rest, line-lit on hover and focus) and the global focus ring sits on top. Labels are .telemetry, with optional fields marked in the label rather than required ones starred.

Chevron

The brand indicator, replacing the round dot. Every tone.

Panels and cards

Surface signatures

Spec rail

A rail of what is actually inside the thing you just opened. Quieter than the two-track list rail, which is a list of subjects with icon plates, and it drops the numerals RailNav keeps, because these are contents rather than an order. The line and the ticks are pseudo-elements, so any list sits on the rail without extra markup, and every direct child gets a tick whether the list is a ul or a dl. Recolour with --rail-accent.

Checks panel

A short list of assurances read as a console readout rather than as bullets: a labelled header strip, then one row per line separated by the panel's own hairlines. It sits beside the spec rail on a service page, so the two read as contents on one side and standards on the other, and it is deliberately the quieter of the pair. The marker is the chevron in its list-marker role, not a tick: nothing on this site draws a tick, and a check does not earn a glyph of its own.

Payload card

The home page's accent cards, each the whole face of a link to its track hub. One anchor and one target, so nothing needs the two-target split below. The affordance is the route-out row at the foot: a short rule, the destination named in full, and the chevron in its navigates role, deliberately not the drawer pull, which means opens-in-place. Hover is the button's language at card scale: a lift, a bloom of the card's own accent, the rule stretching and the chevron nudging onward. The glow sits on the unclipped .payload-lift wrapper between the anchor and the cut card, since a filter on the card itself would be trimmed by its own silhouette.

Two-target card

A card that both navigates and opens. The whole face is a link to the thing itself, which is what most people want, and the pull underneath opens it in place for a look first. That split is why the face is an anchor sitting outside the details, with the summary reduced to the pull strip. Sits in a grid on items-start, so opening one card grows that card rather than stretching every card beside it.

Sticky context strip

The real ServiceSpine.astro, rendered here rather than copied, so it cannot drift from what ships. On its own page it sticks after the hero and lights whichever track you are reading; here there is nothing to observe, so it shows its resting state with neither lit, which is also what a failed script leaves behind. Both entries are plain anchors either way, pointed at the services page so they reach the sections they name rather than scrolling nowhere.

Components

Chips and the reset

The button's quieter cousin: same chamfer at --cut-button-sm, no glow, no lift, no sheen. A filter or a choice, never an action, so it must not look like the control that starts a project. These are live, and they are the real class.

Each chip is a <label> with its radio inside it. A radio parked elsewhere on the page gets focused when its label is clicked and the browser scrolls it into view, throwing the viewport, and there is nowhere to draw a focus ring the reader can see. Tab into these and the ring lands on the chip, not on something invisible.

The reset is deliberately not a chip. The chips are the choices; this is the way back from having made one, so the same housing would file it in the set it exists to leave. It goes fully inert while it is the one selected, since there is nothing to reset to, and it has to exist at all because a radio group has no empty state.

Disclosure card

A <details> whose summary is the whole card face. No JavaScript, keyboard reachable for free. The affordance is the drawer pull along the bottom edge, sitting on the hairline the panel opens along, so the card carries its own edge whether open or shut. A chevron alone in the top corner is not enough and is actively misleading: that position means navigates everywhere else on the site. Open it and the label changes with it. Sits in a grid on items-start, like every other card that opens, so opening one grows that card rather than stretching every card beside it.

Inline link

For prose the site sets rather than builds: the legal pages, and anywhere a sentence has to carry a route out. At rest it is an underlined phrase in the hairline colour. On hover the word and its rule both take the accent, so the phrase lights rather than only the line under it. Never a substitute for a button, which is what starts something.

--link-accent defaults to green, which is already what a link hover looks like here: the nav underlines in green on every page, whatever that page is about. It is the interaction colour rather than a track claim, and it recolours per surface the way --rail-accent does.

Shape

Ring treatments

A .panel-cut paints its ring as the element's own background rather than a border. That is why the ring follows the cut corners, and it is also what makes the ring paintable: give the element a background-image and the gradient becomes the border. These three are the only treatments in use.

Track-lit, and lit on the outer edge

The pair lights on the outer edge of the row, so the two open towards the middle rather than both pointing the same way. The rule is the position, not the colour.

Corners only

The fade has to reach transparent, never the line colour. Fading to --color-line repaints the middle of the ring and gives an ordinary bordered panel with tinted corners, which is a different thing.

Corners only, recoloured to one track

Same idea as --rail-accent and --link-accent: the stops live in one place and the call site says which accent it wants. This one is [--ring-end:var(--color-green)], the treatment the service pages' spec panel takes.

A full-bleed child covers the ring on the diagonal unless it is cut too. A panel whose content runs edge to edge (a gap-px divider grid held off the ring by p-px, say) is a plain rectangle: on the straight edges that 1px leaves the ring showing, but at each 45 degree corner the child's square edge runs right up to the cut and the panel's own clip-path trims both flush, so the straight edges draw the ring and the angled ones draw the child. Give the child the same cut. It bites hardest here, where the diagonal is the treatment.

Seams

A seam is a 1px rule that says two things meet here. It takes --gradient-brand itself rather than restating the stops, and fades out at both ends through a single mask rather than two composited layers.

Join, between two stacked panels

A negative margin of half the container gap pulls the seam back into the space the column already had, so drawing the line costs no height.

Horizon, with a punch-out

Mirrored pairs

When two panels are a facing pair, the second is the first mirrored: rail, ticks, plates, headings and copy all run to the opposite edge, and the chevron rotates to point back at its own heading rather than off the panel. A mirror only holds where the pair does. Below the breakpoint that puts the two side by side they stack into one column, and a lone right-aligned panel has nothing to read against, so gate every mirrored class on that breakpoint and let the track colour carry the distinction below it.

The corner cut does not mirror. Every panel, plate and button on the site cuts top-left and bottom-right, so flipping the cut in one column of a pair makes it the odd one out rather than the matching half.

Icons

Service icon set

Animated Lottie icons, recoloured onto the palette. One icon, one meaning: green for Digital, purple for Creative, and an icon never stands for two things.

Digital

Creative

Capability cards, one per track

Static and brand marks

The Synrgy mark

The Synrgy logo

Full icon register

Every icon and mark in use, read off docs/design/icon-register.md row for row. Most rows below live inside a single other component rather than standing on their own, so they are listed here rather than drawn a second time.

Pattern

Two-track list rail

Items hang off a vertical gradient rail on short connector ticks, each on a chamfer icon plate. Hover recolours the connector and label to the track. The two are one template with a mirror flag, so Creative runs back towards the middle from md up and stacks left-aligned below it, where there is no facing pair for the flip to read against.

Pattern

Trusted-by marquee

An infinite scroller with a checkbox-driven pause: keyboard reachable and working with no JavaScript, which prefers-reduced-motion alone does not satisfy (WCAG 2.2.2).

Trusted by

DestressoDCIRevolutePTMQui RacingSystem 5DestressoDCIRevolutePTMQui RacingSystem 5

Behaviour

Site behaviours

Live on this page rather than mocked: the nav above, the contents rail alongside and the skip link are the real components, so their behaviour can be tried right here.

Accessibility

Focus and selection

Focus is a 2px purple-lift outline at 3px offset on everything interactive, and text selection carries a purple wash. Both are set once in global.css, so the whole site agrees.

Page shape

Hero and closer

The real ServiceHero.astro and ServiceCloser.astro, rendered here with Development's own content rather than redrawn, so they cannot drift from what ships. Every Digital page takes this same shape with its own headline, hero field and neighbours on the cycle; Development stands in for all six rather than repeating the shape five more times.

Hero fields

The six Digital fields

One canvas field per Digital page, green only, each a different answer to the same pointer contract: nothing under reduced motion, gone below 40rem, gated before init. What differs is the subject, which is each page's own claim about itself drawn rather than described. Move the pointer over a tile to feel it; the caption underneath names the field and its response without needing the motion to make the point.