OCTO brand standards
One token driven system for interfaces, data, marketing and real time 3D. Start with a task, or browse the kit.
Start with a task
The six jobs people come here for, each linked to the exact section that answers it. For the full system, see Foundations.
-
Use the colour tokensSurfaces, signals and the energy gradient. Read semantic tokens, never raw hex.
--surface-2 · --accent -
Set type and spacingSpace Grotesk for display, Inter for UI, a 1.25 scale on a 4 point grid.
--t-4 · --s-5 -
Build a dashboard cardGlass depth, edge light and KPI anatomy, pulled apart piece by piece.
--e-2 · --glass-tint -
Chart a metricThirteen chart panels on one ordered palette with one motion rule.
--viz-1 to --viz-6 -
Light a 3D sceneCool key, violet fill, cyan rim. Five materials and a phone sized budget.
--3d-key · --3d-rim -
Ship a launch pageThe marketing page in the same cosmic language, ready to adapt.
--energy · --emit-md
Browse the kit
Eight pages in three parts. Every page reads the same tokens, so a change at the root travels everywhere.
System
FoundationsThree tier tokens for colour, glass, glow, type, space, motion and the 3D bridge. ComponentsGlass controls, cards, tables and states built only from semantic tokens. Data vizHolographic charts, gauges and rings with one palette and one motion rule.
Templates
Command centerA full operations dashboard: agents, throughput, alerts and a live core. MobileA soft glow personal dashboard at 390 pixels with a working focus timer. Launch pageThe page that sells the system, in the same violet cosmic language.Real time 3D
ScenesRobot platform, city, shield core and globe. Built to grow into game worlds. 3D standardFive materials, the light rig, bloom, world scale, GLB pipeline and budgets.Downloads
Released masters stay immutable. Fonts are bundled Space Grotesk and Inter under the OFL.