Design system
Back to the site
Design system
Back to the site
Tokens, type, controls and motion for eotak.com. Switch the theme in the nav and every swatch, ratio and specimen below re-reads itself.
Contrast is measured, not judged. Ratios are against --bg unless noted. Copper #8E654C is a light-background color: on dark it is legal for fills, rules and text at 24px or above, and small copper text uses the lightened --accent-txt instead.
Two faces. Inter carries display and body. Space Grotesk carries every eyebrow, label, caption and figure, the role a monospace used to hold. It is a proportional grotesque, so anywhere digits have to line up in a column (prices, stat rails, key/value pairs, the swatch ratios above) the rule is font-variant-numeric: tabular-nums, which is baked into .mono, .price, .kv .v and the rail labels rather than left to the author.
One filled copper action per viewport. Scarcity is what makes the accent read. Everything else is .btn2. Hover lifts 1px, active returns it. The focus ring is --focus at 2px with a 3px offset and is never removed.
EOTAK Servers are one plan on a graduated volume rate card, sold by the year, plus a flat compliance addon. The rate card table is the primitive that carries it: .rate-scroll wraps .rate so wide tables scroll inside their own box instead of widening the document, the row header is the seat threshold, and every figure is tabular. The middle column is the effective rate — the graduated total divided by the seat count — never a single band’s marginal rate.
| Seats | Effective rate | Annual total |
|---|---|---|
| 10 | $120.00 | $1,200.00 |
| 25 | $92.40 | $2,310.00 |
| 50 | $90.00 | $4,500.00 |
The pricing toggle is a display unit, not a discount: the same money shown two ways, with the monthly figure being the annual figure divided by twelve. It never carries a savings badge. No production page ships it at the moment, because EOTAK Servers are billed annually and there is no second way to show that money — it stays documented, and in core.css and site.js, for the next thing that is priced two ways. Markup: a wrapper with data-pricing, buttons with data-mode="month" / "year", and each figure in a <span data-m data-y> with its unit label in a [data-per-m][data-per-y]. This one is live. Press it.
A ten-step scale. Components use the steps; page rhythm uses clamp() between them so the vertical measure breathes with the viewport instead of stepping. Page gutter is --sp7, dropping to --sp5 below 1100px. Corner radius: --r-sm 10px, --r-md 14px, --r-lg 18px.
Enters are slower than exits, always. prefers-reduced-motion yields a fully static page: reveals resolve instantly, the contour field freezes on a fixed frame rather than disappearing, and the bar below stops. The field also pauses whenever it scrolls out of view, and device pixel ratio is capped at 1.6.