robonxt design system
The single source of truth for visual and interactive language across robonxt projects. This page is the spec and the working implementation — what you see is what you ship.
Foundations
Core philosophies and primitives. These never change with theme or color mode.
Voice & Tone
The Pragmatic Professional — confident, efficient, with a witty human touch.
Golden Rule: Clarity first, always.
Default tone is casual, clear, helpful. Use a clever aside in low-stakes moments — success states, empty states. Never use a joke if it costs clarity. Errors and critical info stay direct.
Peak Moments
Default to calm; earn your spikes. The system runs at a steady baseline so a single controlled jolt — a flagship hero, a launch frame — creates real contrast. Then return to baseline.
Example. A launch hero CTA may step one size above the type scale with a brief accent-color motion on first paint. Everything else stays at baseline.
Subordinate to Clarity first: if the jolt obscures the message, it's noise.
Typography
Spacing
4-point base, 8-point rhythm above xs
Radius
Elevation
Motion
Click to toggle
Iconography
Material Symbols, Rounded style, inherits currentColor.
Color
Brand colors are unified across light and dark modes; only surfaces and text adapt. Click any swatch to copy its hex value.
Brand & Semantic Roles
Surfaces & Text
These tokens flip with [data-color-scheme]
Logo Palette
Reserved for the robonxt logo and brand marks. Do not theme. Do not use for UI.
Components
Reusable building blocks. Each example is the actual component as it ships.
Buttons
Inputs
Alerts
Modal
Escapable by default. Click outside, press Esc, or use the close button.
Dropdown
Pill Selector
Selected: day
Switch
Slider
Progress
Card (interactive)
Hoverable card
Lifts 4px and elevates on hover. Acts as a clickable surface.
Tabs
Overview content. Quick summary of the thing.
Detailed breakdown of the thing.
Historical record of changes.