Foundations

The stable token API beneath every component. Change one layer and the whole system follows.

Global Reset / Normalize

baseline

border-box sizingzero heading marginsinherited form fontsresponsive mediavisible focus ringsreduced motion

Color system

semantic / light / dark

--primary

--secondary

--success

--warning

--error

--neutral-900

Typography scale

type

Display

Heading one

Heading two

Heading three

Body paragraph with normal line height.

Caption and metadata

Overline

Spacing scale

space.1 to space.20

space.1

space.4

space.8

space.20

Border radius

none / sm / md / lg / full

None

Medium

Full

Shadow / Elevation

low to modal

Low

Medium

High

Z-index stacking context

100 to 1000

Sticky 100Dropdown 300Overlay 500Modal 700Toast 900Tooltip 1000

Breakpoints

responsive

xs 480sm 640md 768lg 1024xl 12802xl 1536

Motion / Transition tokens

100 / 180 / 320ms

Reduced-motion preference supported.

02

Layout and structure

Small primitives for arranging pages, tools and workspaces.

Box / Fragment

primitive

Padded wrapper

Container

sm / md / lg

Centered content

Stack

vertical / horizontal

OneTwoThree

Grid

columns / spans / gap

1

2 columns

Divider

horizontal / vertical / text

Section

Aspect ratio

16:9 / 4:3 / 1:1

Scroll container

horizontal / viewport / virtualized-ready

Start

Scrollable

Navigation

Wayfinding for sites, editors and applications.

Link / Anchor / Scrollspy

active states

Current Inputs Display

Breadcrumbs

separator / truncation

Home
Experiences
Blocktown

Pagination

numbered / compact / mobile

Tabs / Toggle group

horizontal / vertical / contained

Platform overview.

Stepper / Wizard

horizontal / vertical / states

✓Details
2Branding
3Launch

Navbar / App bar

brand / actions / hamburger

Sidebar / Sidenav

collapsible / mini / persistent

Menu / Dropdown

groups / context / cascading

04

Data input

Controls for forms, creator workflows and product interfaces.

Button / Icon button / Button group / Loading button

solid / outline / ghost / destructive / link / sm / md / lg

Text input / Label

icons / helper / error / required

Experience name *◆12/32Visible on the public page.SlugChoose another slug.

Textarea

auto-resize-ready

Description500 characters maximum.

Number input

step controls

Player limit

Select

native / custom / async / multi-select tags

building ×social ×

Checkbox / Radio / Switch

individual / groups / cards / indeterminate

Publish website Select some featuresPublic
Anyone can join. Allow comments

Slider / Range

single / dual / vertical / marks

Render quality: 75%

File upload / Dropzone

drag / validation / preview

Drop a GLB here
or choose a file, 50 MB maximum

Color picker

hex / RGB / swatches / eyedropper

Date picker / Date range picker / Time picker

day / month / year / 12h / 24h

Phone / Country input

flag / masks

OTP / PIN input

auto-focus

Rating / Stars

star / heart / emoji / half-star

★★★★★

Combobox / Autocomplete

free text / suggestions

Form / Fieldset / Legend / Error summary

validation scope / framework wrapper anatomy

05

Data display

Readable primitives for people, assets, metrics, activity and large datasets.

Typography

H1-H6 / paragraph / small / caption / overline

Experience overview

Performance

Server health

Current allocation

Paragraph for longer explanations.

Updated 30 seconds ago

Table / Data grid / Advanced table

striped / hover / sticky / sort / filter / resize / select

Asset ↕	Type	Status	Updated
Town square	World	Ready	2 min ago
Blue hoodie	Clothing	Processing	8 min ago
Runner	Animation	Ready	Yesterday

List

ordered / unordered / actionable / inset

Website
Editor
Renderer

Configure
Build
Publish

Card

header / footer / media / interactive

World preview

Blocktown

A public social building experience.

Avatar

image / initials / fallback / group / badge

ARMC♟

AB+8

Badge / Chip / Tag

dismissible / clickable / outline / dot

OnlineModerator

Statistic / Metric

trend up / down

Concurrent users

12,482

↑ 8.4%

Render errors

14

↑ 3

Timeline

vertical / marker states

Build queued
18:02
Assets packaged
18:04
Release published
18:05

Tree view

nested / collapsible / checkbox

Workspace
- Website
- Assets
  - Models
  - Textures

Calendar / Agenda

month / week / day / events

Mon

Tue

Wed

Thu

Fri

Sat

Sun

27

28

29

30

31

1Release

2

3

4Town hall

5

6

7

8

9

Image

skeleton / fallback / object-fit

Image fallback

Video / Audio

controls / poster

Video poster ▶

Masonry

dynamic columns

Short card

Tall asset preview

Medium card

Another tall card

06

Feedback and overlays

Clear interruption levels, from inline status to modal decisions.

Alert / Banner

success / warning / error / info / dismissible

i

Build running

You can leave this page.

✓

Published

The release is live.

!

Storage nearly full

Review unused assets.

×

Build failed

Open the log for details.

Toast / Snackbar / Notification

floating / auto-dismiss / action

Asset processed

blue-hoodie.glb is ready.

Modal / Dialog

basic / confirmation / full-screen / focus trap anatomy

Drawer / Off-canvas / Sheet

left / right / top / bottom

Page underneath

Asset details

Contextual settings.

Tooltip / Popover

top / right / bottom / left / rich content

Keyboard shortcut: ⌘K

Quick publish

Publish this build?

Progress

linear / indeterminate / buffer / circular

Skeleton / Placeholder / Spinner / Loader

text / avatar / card / shimmer

Empty state

illustration / heading / action CTA

□

No experiences yet

Create your first world.

Error boundary

JSX failure fallback anatomy

!

This panel crashed

The rest of the page still works.

07

Surfaces and containers

Structured ways to group, reveal and switch larger pieces of content.

Accordion / Collapse

single / multiple / chevron

Website

Theme, pages and domain settings.

Runtime

Server and client settings.

Renderer

Thumbnail pipeline.

Disclosure

show / hide without animation

Show advanced settings

Experimental pipeline

Card deck

equal height grid

Website

Community-facing pages.

Editor

Tools for building worlds and publishing assets.

Runtime

Authoritative servers.

Carousel / Slider

loop / autoplay / thumbnails / arrows

Screenshot 02 / 05

Tabs panel

switching / lazy-loading anatomy

<os-world name="Blocktown">

Sheet

mobile bottom drawer

Publish experience

Choose who can access this build.

08

Advanced and composite

Large tools assembled from the same tokens and primitives. These CSS-first demos define their anatomy and states.

Rich text editor / WYSIWYG

toolbar / editable content

Release notes

Write an update.

Markdown renderer

live preview / syntax highlighting anatomy

Hello world

A bold update.

Code editor

line numbers / Monaco or CodeMirror frame

1
2
3
4

local Players = game:GetService("Players")

Players.PlayerAdded:Connect(function(player)
  print(player.Name)
end)

Drag-and-Drop / Sortable / Kanban

list / grid / columns

Backlog

Avatar editor

Asset search

In progress

Runtime networking

Done

Stack explorer

Command palette / KBar

Spotlight search / keyboard shortcuts

Commands

Tour / Onboarding coachmark

spotlight / steps

Step 2 of 4

Publish when ready

This creates an immutable build.

Infinite scroll

load-more threshold

Asset 001 GLB

Asset 002 PNG

Asset 003 WEBP

Loading more

Virtualized list / Window

visible rows only

#048 World server 42 ms

#049 World server 38 ms

#050 World server 51 ms

Nested dropdown / Mega-menu

cascading / multi-column

Create

New world
New asset

Manage

Experiences
Members

Learn

Documentation
Examples

Signature pad

drawing canvas

QR code generator

scannable output anatomy

Content

09

Utility helpers

Component-adjacent contracts for a later SolidJS implementation.

Portal

data-os-portal

Moves overlays to a root layer.

Transition / AnimatePresence

data-os-enter / exit

Mount and unmount motion states.

Focus Trap

data-os-focus-trap

Keeps keyboard focus inside a modal.

Visually Hidden / Screen Reader Only

.sr-only

Labels without visible layout.

Screen Reader Text / Read-aloud

aria-live / speechSynthesis

Announcements and optional speech.

Polymorphic Component / as prop

data-os-as="a"

HTML-first future component contract.

Click Outside / UseOutsideClick

data-os-outside-close

Dismisses popovers and menus.

UseMediaQuery / UseBreakpoint

--breakpoint-*

CSS values mirrored into matchMedia.

UseId

crypto.randomUUID()

Stable labelling relationships.

UseClipboard

navigator.clipboard

Copy with status feedback.

UseLocalStorage

localStorage

Persistent client preferences.

UseSessionStorage

sessionStorage

Short-lived per-tab state.

Every piece in one place.

Foundations

Layout and structure

Navigation

Data input

Data display

Experience overview

Performance

Server health

Current allocation

Feedback and overlays

Asset details

No experiences yet

This panel crashed

Surfaces and containers

Website

Editor

Runtime

Publish experience

Advanced and composite

Release notes

Hello world

Utility helpers

Portal

Transition / AnimatePresence

Focus Trap

Visually Hidden / Screen Reader Only

Screen Reader Text / Read-aloud

Polymorphic Component / as prop

Click Outside / UseOutsideClick

UseMediaQuery / UseBreakpoint

UseId

UseClipboard

UseLocalStorage

UseSessionStorage