Orbital Design System

A token-driven design system with accessible components and flexible theming.
Designed for scalable products. Open source.

---

Token Architecture

Orbital uses a three-tier token architecture that separates raw values from meaning from usage:

Core (primitives)          Semantic (theme)              Component (usage)
───────────────────        ─────────────────────         ─────────────────────
Color.SpaceGray.800   -->  General.Color.Background.base
Color.StemGreen.600   -->  General.Color.Accent.base     -->  Button.Primary.Default.backgroundColor
Color.Red.500         -->  General.Color.Destructive.base -->  Button.Destructive.Default.backgroundColor
Spacing.x2            -->  General.Spacing.Padding.md    -->  Button.Common.paddingY.medium
BorderRadius.xs       -->  General.BorderRadius.sm        -->  Button.Common.borderRadius

Layer	File	Purpose
Core	tokens/Core.json	Raw values: colors, spacing, sizing, typography primitives, border radii, opacity
Semantic	tokens/Orbital_Dark.json	Theme mapping: backgrounds, text, borders, accent, status colors, typography scales
Component	tokens/Orbital_Dark.json	Component-specific tokens: buttons, cards, inputs, modals, badges, tags

Color Palette

Brand Colors

Scale	50	100	200	300	400	500	600	700	800	900
SpaceGray
StemGreen

Status Colors

Scale	50	100	200	300	400	500	600	700	800	900
Red
Yellow
Green
Blue
Orange

Semantic Color Mapping (Dark Theme)

Background.base         SpaceGray.800  #0d0f10   ████  Deep dark base
Background.intense      SpaceGray.700  #131619   ████  Elevated surfaces
Background.extraIntense SpaceGray.600  #1a1d21   ████  Cards, popovers
Background.muted        SpaceGray.900  #060708   ████  Recessed areas

Text.extraIntense       SpaceGray.50   #eeefef   ████  Primary headings
Text.intense            SpaceGray.100  #e8e9e9   ████  Emphasis text
Text.base               SpaceGray.200  #cdcecf   ████  Default body text
Text.muted              SpaceGray.300  #9b9c9e   ████  Secondary text
Text.extraMuted         SpaceGray.400  #686b6e   ████  Tertiary / hints

Accent.base             StemGreen.600  #9ad37f   ████  Primary actions
Accent.intense          StemGreen.300  #dbf7cd   ████  Hover / emphasis
Accent.muted            StemGreen.700  #739f5f   ████  Pressed states

Typography

Style	Font	Weight	Size	Line Height	Tracking
Display Large	Plus Jakarta Sans	700	48px	120%	-0.04em
Display Small	Plus Jakarta Sans	700	40px	120%	-0.04em
Heading H1	Plus Jakarta Sans	600	34px	120%	-0.02em
Heading H2	Plus Jakarta Sans	600	28px	120%	-0.02em
Heading H3	Plus Jakarta Sans	600	24px	120%	-0.02em
Heading H4	Plus Jakarta Sans	600	20px	120%	0em
Heading H5	Plus Jakarta Sans	600	16px	120%	0em
Heading H6	Plus Jakarta Sans	600	14px	120%	0.02em
Body Large	Plus Jakarta Sans	400	20px	140%	0em
Body Base	Plus Jakarta Sans	400	16px	140%	0em
Body Small	Plus Jakarta Sans	400	14px	140%	0em
Label Large	Plus Jakarta Sans	500	16px	120%	0em
Label Base	Plus Jakarta Sans	500	14px	120%	0em
Label Small	Plus Jakarta Sans	500	12px	120%	0.02em
Caption	Plus Jakarta Sans	400	12px	140%	0.02em
Overline	Plus Jakarta Sans	600	11px	120%	0.08em
Code Base	Geist Mono	400	14px	140%	0em
Code Small	Geist Mono	400	12px	140%	0em

Components

Button Variants

Orbital ships with 7 button variants, each with full state coverage:

Variant	Default	Hover	Focused	Pressed	Active	Disabled	Pending
Primary	Accent bg, dark text	Lighter green	Focus ring	Muted green	Muted + light text	Faded	Intense + spinner
Secondary	Gray bg, light text	Lighter bg	Focus ring	Darker bg	Accent border	Faded	Lighter + muted
Tertiary	Base bg	Intense bg	Focus ring	Muted bg	Accent border	Faded	Lighter + muted
Outline	Transparent, border	Brighter border	Focus ring	Muted border	Accent border	Faded border	Muted border
Ghost	Transparent	Subtle hover bg	Focus ring	Muted text	Accent text	Faded	Muted text
Link	Transparent	Icon brightens	Focus ring	Muted text	Accent text	Hidden	Muted text
Destructive	Red bg, light text	Lighter red	Focus ring	Dark red	-	Faded red	-

Each variant supports 3 sizes: small, medium, large with corresponding padding, gap, and typography tokens.

Other Components

Component	Token Coverage
Card	Padding, gap, border radius, border width, heading/content/footer spacing
Modal	Background, border, max-width (sm/base/lg), padding, gap, alert variant
Input Field	Background, border, label, text, placeholder, help text, icon colors per state
Badge	Border radius
Tag	Pill border radius
Checkbox	Border radius
Loading Spinner	Light/color variants, 3 sizes
Code Block	Geist Mono font family

Spacing Scale

Token	Value		Token	Value
x0	0px		x6	24px
x0_5	2px		x8	32px
x1	4px		x10	40px
x1_5	6px		x20	80px
x2	8px		x30	120px
x2_5	10px		x40	160px
x3	12px		x50	200px
x4	16px		x60	240px
x5	20px		x80	320px

Border Radius

Token	Value	Use Case
none	0px	Sharp edges
2xs	4px	Checkboxes
xs	6px	Buttons (sm), badges
sm	8px	Buttons (default), inputs
md	12px	Cards, base radius
lg	24px	Large containers
xl	32px	Extra large
pill	9999px	Tags, fully rounded

Elevation (Dark Theme)

Level	Surface	Shadow
Base	SpaceGray.800 #0d0f10	None
Raised	SpaceGray.600 #1a1d21	Subtle drop shadow
Overlay	Alpha White 24%	Heavy drop shadow with border ring
Recessed	SpaceGray.900 #060708	None (inset feel)

File Structure

orbital-design-system/
  tokens/
    Core.json            # Primitive values (colors, spacing, sizing, typography)
    Orbital_Dark.json    # Dark theme (semantic + component tokens)

Token Format

Tokens follow the Design Tokens Community Group (DTCG) specification:

{
  "Color.StemGreen.500": {
    "$type": "color",
    "$value": "#b6f09c"
  }
}

Aliases use curly-brace references:

{
  "General.Color.Accent.base": {
    "$type": "color",
    "$value": "{Color.StemGreen.600}"
  }
}

Tooling Compatibility

These tokens are compatible with:

• Tokens Studio (Figma plugin)
• Style Dictionary
• Token Transformer
• Any DTCG-compatible token pipeline

License

MIT License - see LICENSE for details.

---

_{Built with precision. Themed for the cosmos.}