One sigil. Two decades. Built for the next twenty.

A dark, atmospheric core with three sharp signal accents. Built for cinematic surfaces and high-contrast text. Every colour shipped to users is one of these — no ad-hoc hex.

Three families, one rhythm. A display face for emotion, a body face for reading, a mono face for signal. Loaded self-hosted via Nextnext/font— no third-party requests.

ABCDEFGHIJKLMNOPQR
abcdefghijklmnopqrs
0123456789 — / ()

ABCDEFGHIJKLMNOPQR
abcdefghijklmnopqrs
0123456789 — / ()

ABCDEFGHIJKLMNOPQR
abcdefghijklmnopqrs
0123456789 — / ()

A 4-pixel base, an 8-point rhythm. Twelve curated steps, six breakpoints, three container widths. No ad-hoc numbers — every margin we ship comes from the scale.

A single icon language across the brand. Outlined glyphs on a 24-grid, five sanctioned stroke weights, one currentColor pipeline. Built so a 16-pixel info badge and a 96-pixel hero pictogram share the same DNA.

• 01

  Stroke, not fill.

  All UI icons are outlined geometry. One stroke weight per family. We don't mix outlined and filled glyphs at the same hierarchy level.

• 02

  Drawn on a 24-grid.

  Default viewBox is 24 × 24. Construction lines sit on whole pixels — no half-step diagonals that smear at small sizes.

• 03

  Round caps, round joins.

  Every stroke endpoint and corner is rounded. It gives the system a precise but humane feel — never aggressive, never robotic.

• 04

  currentColor only.

  Strokes inherit from the surrounding text colour. One icon tints to every context: cyan in eyebrows, white in titles, muted in labels.

<svg
  viewBox="0 0 24 24"
  fill="none"
  stroke="currentColor"
  strokeWidth={1.7}
  strokeLinecap="round"
  strokeLinejoin="round"
  aria-hidden
>
  <path d="…" />
</svg>

The kit. Buttons, inputs, panels, pills — the four primitives every screen composes from. Live components below, in the exact styles they ship on the homepage. Class names visible, no Photoshop tricks.

• 01

  Composable atoms.

  Every UI surface is made from a small kit of primitives — button, input, panel, pill. Nothing bespoke unless we measure why.

• 02

  Every component has five states.

  Default, hover, focus, active, disabled. Loading where async. If a state is missing, the component is shipping incomplete.

• 03

  44 minimum on touch.

  Tap targets clear 44 px on phone-class viewports. Visual size can be smaller; hit area cannot.

• 04

  Class names sing.

  .btn-primary, .btn-secondary, .panel, .tag — short, semantic, in globals.css. Tailwind utilities compose around them, never replace them.

The three states that decide whether a product feels alive or dead. Below are the sanctioned full-page patterns — exact composition, exact copy template, exact recovery action. Build new screens against these, not from scratch.

• 01

  Every screen has all three.

  Loading, empty, error. If you only ship the happy path, you don't ship a product — you ship a demo.

• 02

  Copy carries the weight.

  Visuals frame the moment. The words define what happened and what to do next. A great empty state is mostly text.

• 03

  Recovery is a button, not a hope.

  Every error and empty state ships with a clear primary action — retry, go home, create, refine — never just an apology.

• 04

  Skeleton over spinner.

  Show shape, not just motion. A skeleton mirrors what's coming. A spinner only tells the user we don't know how long it'll take.

Motion is a language. We use it to clarify relationships, not to decorate them. Five duration tiers, two easing families, one accessibility rule.

• 01

  Motion has a job.

  Every animation expresses cause and effect — a state change, a relationship, a spatial transition. Decorative motion is no motion.

• 02

  Restraint over flair.

  Short, contained durations. We move things less, and only as far as needed. Long animations feel slow long before they look slow.

• 03

  Spatial continuity.

  Things enter from where they came from and exit toward where they go. Page transitions, sheets and modals trace their source.

• 04

  Reduced motion is the default.

  Every animation collapses to instant under prefers-reduced-motion: reduce. Brand polish never costs accessibility.

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important; }
}

We sound like an operator who has shipped things and still loves the internet. Confident, nostalgic, modern, ambitious. Never corporate. Never childish. Never buzzword-heavy.

• 01

  Speak like a human.

  First-person plural, contractions, real verbs. We never write like a press release.

• 02

  Concrete over abstract.

  Long seasons, not extended engagement. Browsergame, not gamified platform. Show the thing.

• 03

  Confidence without bragging.

  State what we built, not how we revolutionised. Facts carry weight on their own.

• 04

  Short over long.

  One sharp sentence beats three soft ones. Cut adverbs. Cut hedges. Cut throat-clearing.

• 05

  Nostalgia, not sentiment.

  We refer to the old internet as fact, never as myth. The era was real, the lessons are real.

• 06

  No buzzwords.

  If a word could appear in any tech company's homepage this year, it doesn't belong on ours.

What we put on the page matters as much as what we write. Our visual surface is dark, intentional, and made of geometry, light and treated atmosphere — not stock photography.

• 01

  Atmosphere over stock.

  Dark, cinematic, intentional. Never the bright-corporate-handshake palette. If it could sit on any SaaS homepage, it doesn't sit on ours.

• 02

  Geometry over crowds.

  Grids, lines, light, vectors, architectural form. We don't fill our pages with stock people in glass meeting rooms.

• 03

  Suggest, don't illustrate.

  AI is networks, structure, focus — not brains-in-jars and robot hands. Football is tactics, not screaming fans.

• 04

  Treatment is part of the brand.

  Every image is colour-graded into the palette: dark midtones, cyan or purple highlight, a touch of grain, a quiet vignette.