Skip to content
Tetrifox

Expressions · Components

Built to repeat.

A component is a brand decision made reusable: one implementation carries its hierarchy, states, semantics, and motion constraints across every page that uses it.

New components are designed for three pages, not one.

Inside-out assemblyDecision → interface
  1. 01ActionButtonMake priority visible.
  2. 02SurfaceCardGive content a repeatable shape.
  3. 03ArgumentSectionHeaderSet the reading order.
  4. 04MotionRevealAssemble once, then settle.

Stage 01 · Action

Priority before proximity.

A component does not become primary because it sits first. Variant, semantics, and state make the next move legible before the label is read.

Realdocs/brand/components.md

Stage 01

Action

Choose the next move

One view. One priority.

The primary action starts a conversation. Supporting actions explain the model without competing for attention.

Primary opens tetrifox.com in a new tab. Tab through the actions to inspect the shared focus outline.

Stage 02 · Surface

Give the action a shape.

A Card holds a repeatable content decision without forcing every service, process step, or metric into the same anatomy.

ExtensionThe live source repeats service, process, and metric content shapes, but it does not define a shared visual Card component. The primitive shown here is a brand-book extension derived from those shapes, the semantic surface tokens, and the closed-grid rule.

Stage 02

Surface

01

Service

Software Development Teams

Consultancy, technical leadership, and engineering delivered as one accountable unit—from blueprint to production.

Homepage · Software Development Teams

Stage 03 · Argument

Structure before style.

The header turns a reusable surface into a section with a subject, a claim, and enough context to understand what follows.

Real

Stage 03

Argument

Software development teams

One accountable Mino.

Consultancy, technical leadership, and engineering delivered as one accountable unit—from blueprint to production.

01

Service

Software Development Teams

Consultancy, technical leadership, and engineering delivered as one accountable unit—from blueprint to production.

Homepage · Software Development Teams

Stage 04 · Motion

Assemble. Reveal. Settle.

The complete section arrives once, in reading order. Its borders never move, its information never waits, and its reduced-motion state is already complete.

RealRuntime presets · @/lib/motionExtensionReplayable teaching specimen

Software development teams

One accountable Mino.

Consultancy, technical leadership, and engineering delivered as one accountable unit—from blueprint to production.

01

Service

Software Development Teams

Consultancy, technical leadership, and engineering delivered as one accountable unit—from blueprint to production.

Anatomy
Header · content surface · action
Semantics
h2 · article · links
States
Rest · focus · disabled
Source
Real content · extended Card
Reduced
Visible and settled immediately

gridStagger · fadeUp

The component system is visible in its settled state.

The component system is visible in its settled state.

Resolved

One decision. Every use.

New components are designed for three pages, not one. Build the contract once, then let every composition inherit the same priority, semantics, state, and restraint.