Tensor
Hard-edged industrial UI in absolute black, clean white, and electric signal green.
Overview
Colors
Typography
Spacing
Screen
real estate is treated like GPU memory. The scale is dense from to because telemetry, tables, and model readouts are meant to be scanned, not strolled through.
The
jump is at the section boundary. Inside a panel the largest step is ; between sections it is . That gap is what separates one dark/light band from the next.
Bands
do the separating, not dividers. Alternating true-black and pure-white sections carry the scroll rhythm, so no horizontal rules are needed at section joins.
Border Radius
Full-bleed section bands, table cells, flush-joined segment groups, dividers
Inline spans, tiny status marks, the smallest inline chips
The system default — every button, search bar, card, input, chip, badge, tooltip, dropdown menu, tab, toggle rail, progress track, table frame and panel in the `components` block resolves to this
The ceiling for a rectangular container; used only where a large panel would look chipped at 2px — the modal is the one component that takes it
—
Circular tab indicators and status dots only — NOT avatars, which take `{rounded.sm}` like every other rectangular object
Components
Clickable actions: primary, secondary and ghost, with their states.
Surfaces that frame grouped content — padding, border and shadow.
Small markers that carry status or category at a glance.
Form controls — borders, labels, placeholders and focus rings.
The top bar — brand, links and the primary call to action.
Elevation & Depth
| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow | Page backgrounds, inline text |
| Subtle (Level 1) | rgba(0,0,0,0.3) 0px 0px 5px | Standard cards, modals |
| Green accent (Level 2) | 2px solid #7AC943 | Active elements, CTAs, selected items |
| Focus (Accessibility) | 2px solid #000000 outline | Keyboard focus ring |
Shadow philosophy: Tensor is shadowless by design. There is exactly one soft shadow in the system and it exists only so a modal can be told apart from the page behind it. Everything else gains presence from value contrast — black against white — and from the green outline at Level 2. Depth is *drawn*, not simulated: an active element is not lifted, it is ringed.
Guidelines
Do
- •Draw controls as outlines — a 2px `{colors.primary}` border marks the one primary action, 1px marks the rest
- •Keep every corner at `{rounded.sm}` (2px); rank comes from border weight, not radius
- •Use `{colors.true-black}` for dark bands and nav, with `{colors.near-black}` cards one step off the page
- •Set headings, buttons, links, and labels at Space Grotesk 700; nav links uppercase
Don't
- •Don't fill a large surface with `{colors.primary}` green — the badge and a `{colors.category-1}` data mark are the only sanctioned green fills
- •Don't round past `{rounded.md}` (4px) — pills and 8px+ corners contradict the machined grid
- •Don't shadow anything but the modal, and keep that one shadow neutral, never warm
- •Don't add decorative letter-spacing — Space Grotesk already carries the character
Spacing roles
Iconography
More Design Systems
View allAperture
Deep-navy UI with one violet accent — light, precise, quietly premium.
Odyssey
Sunlit coral UI — airy, photo-led, friendly.
Runway
Bold fuchsia UI — airy, punchy, high-energy.
Sienna
Warm cream editorial UI — serif headlines, coral actions, calm and literary.
Atlas
Warm, tactile UI in Carrara paper and Milano red — generously rounded and densely tiled.
1 components
Caret
Cream editorial UI with orange actions — calm, hairline-light, inspectable.
Ready to build faster?
Full access to AI Component Builder: 300+ production-ready components, all top-tier AI models with transparent per-use pricing. Every paid plan includes full Atheros Platform access with courses, tutorials, and challenges.
Starting at $15/month + VAT
