HyperSuit homePre-order

Conceptual

The direction behind it

HyperSuit is a design concept, not a shipping product. This is the creative direction it was built from: the idea, the colour and type systems, the motion language, the section-by-section map, and the audit of the original render. Ten sheets, kept as reference rather than thrown away once the build started.

Every figure on this site renders a marker until it has a real source behind it. That is deliberate, and the markers stay until the numbers are confirmed.

00Sheet index

Ten sheets

  1. Sheet 00

    The concept

    One idea, held without exception.

    • AMPLIFIED: a dark, instrument-grade site where light is the only ornament, every surface is measured, and every interaction gives back more than you put in.
    • Law 1. Light is the only ornament. One 1px line is the entire decoration budget.
    • Law 2. Everything is measured. Nothing floats without a coordinate.
    • Law 3. Amplify the input. Small input, large assisted output, precise settle.

  2. Sheet 01

    The anti-brief

    What this build refuses to do.

    • No blurred colour glow blobs, the loudest generated-design tell of 2026.
    • No glassmorphism, no floating particle fields, no infinite logo marquee.
    • No stock photography of people, which would undo everything above it.
    • No scroll-jacking. The scroll is assisted, never taken away.

  3. Sheet 02

    Colour

    Ninety-two per cent black.

    • Every value sampled from the concept render, not invented.
    • Target ratio per screen: 92% ink, 6% white family, 2% blue.
    • Blue marks state: live, active, in view, measured, focused. Never a fill.
    • Every pairing contrast-checked against WCAG 2.2 before it shipped.

  4. Sheet 03

    Typography

    Three families, three jobs, no overlap.

    • Display for headlines and numerals, body for prose, mono for measurement.
    • Sizes derived from the render: a 32px cap height at a 1536px layout.
    • Leading and tracking are baked into every size token, so a display size cannot be used with the wrong leading.
    • Self-hosted. No third-party font request, which is a performance decision and a privacy one.

  5. Sheet 04

    Motion language

    Four curves. Nothing else.

    • Actuate to enter, servo to settle, load to exit, lock for section seams.
    • Nothing bounces. Overshoot is capped at 1.5% and only ever on scale.
    • Travel stays between 16px and 24px. Long travel reads as cheap.
    • Reduced motion is a complete second system, not a stripped fallback.

  6. Sheet 05

    The hero

    The first two thousand milliseconds.

    • The image arrives before the words, because the product is the argument.
    • The headline resolves before the call to action, because nobody decides before they understand.
    • The stat bar lands last, because proof lands hardest after the claim.
    • ELEVATE ignites: the gradient floods the letterforms the way current reaches an electroluminescent strip.

  7. Sheet 06

    Experience map

    One continuous descent.

    • From a person, to a machine, to a system, to a decision.
    • The hairline that closes one section is the hairline that opens the next.
    • Mobile is not the desktop scaled down. It becomes a fast, quiet document.
    • Every section states its message, layout, hierarchy, animation and transition.

  8. Sheet 07

    Conversion

    Three audiences, one dominant path.

    • Reserve is the only element permitted to use the light fill. That hierarchy is the funnel made visible.
    • The fleet pilot request is the B2B path, and it takes the outline style.
    • Cookieless analytics, so no consent banner lands over the opening four seconds.

  9. Sheet 08

    Audit findings

    Thirteen findings in the concept render.

    • The icon set mixed filled and outline styles in one row of five. Redrawn to a single 24 grid at 1.25 stroke.
    • The call-to-action glow was a symmetrical halo. Replaced with directional light matching the render key.
    • The diagram leaders terminated in mid air. Re-anchored, one shared elbow angle.
    • The badge read a year already in the past. Now COMING 2030 AND BEYOND.

  10. Sheet 09

    Build sequence

    Sixteen stages, in order.

    • Next.js 15 App Router, React 19, TypeScript strict, Tailwind, motion, lenis.
    • Every stage has a verifiable end state, so a regression is caught in the stage that caused it.
    • Four standing guardrails: inspect before editing, preserve what works, verify in the browser, check reduced motion.
Back to the X1