Apollo DS — visual showcase

01 — Tokens

Color

Semantic accents in HSL-triplet form. Compose alpha at the call site (hsl(var(--primary) / 0.15)).

--primary

238 70% 60%

--accent

210 100% 60%

--success

142 71% 45%

--warning

38 92% 50%

--destructive

0 72% 51%

--primary-glow

238 80% 70%

Token	Pair	Notes
--primary	--primary-foreground	Indigo. Active nav, send button, primary CTAs.
--accent	--accent-foreground	Bright blue. Reserved highlight; rarely standalone.
--success	--success-foreground	Green. Live indicator, Apply Changes CTA, success states.
--warning	--warning-foreground	Amber. "Waiting" status pill.
--destructive	--destructive-foreground	Red. Failed status, destructive actions.

02 — Tokens

Surface

App chrome — backgrounds, text, borders. Each surface has a foreground pair so text is always legible.

--background

240 20% 99%

--foreground

240 10% 10%

--card

0 0% 100%

--secondary

240 5% 96%

--muted

240 5% 96%

--muted-foreground

240 4% 46%

--border / --input

240 6% 90%

--ring

238 70% 60%

03 — Tokens

Typography

System font stack. No webfont. Type scale below shows the sizes that the snapshot actually uses; --text-xl is reserved for future headings.

--text-xs · 12pxMeta, labels, status pills

--text-sm · 14pxDefault UI body text

--text-base · 16pxChat body, prose

--text-lg · 18pxSection headings

--text-xl · 20pxReserved

--text-2xl · 24pxCreate Task heading

--text-3xl · 30pxWeekly Goals

Token	Value	Notes
--font-sans	ui-sans-serif, system-ui, …	Default body / UI font.
--font-mono	ui-monospace, SFMono-Regular, …	Code, IDs, numerics, eyebrows.
--weight-normal / medium / semibold / bold	400 / 500 / 600 / 700	All four observed in the snapshot.

04 — Tokens

Spacing

Tailwind default 4px scale. The snapshot's class strings (e.g. gap-2, p-6) map onto these tokens; new screens authored in pure CSS should reach for the same values.

1

1·5

2

3

4

5

6

8

10

05 — Tokens

Radius

Apollo sets --radius: .75rem as its base; md and sm are derived via calc(), mirroring shadcn's convention.

xs · 4

sm · 8

md · 10

base · 12

full

06 — Tokens

Shadow

Subtle ink-tinted shadows. Hue matches --foreground so elevation feels native to the cool-tinted background.

sm

md

lg

xl

07 — Tokens

Motion

Two transition durations and two easings cover everything in the snapshot.

Token	Value	Notes
--duration-fast	150ms	Hover tints, focus rings.
--duration-base	200ms	Tab activation, nav-tab fill.
--ease-out	cubic-bezier(.16, 1, .3, 1)	Default for entrances.
--ease-in-out	cubic-bezier(.4, 0, .2, 1)	Default for state changes.

08 — Components

Buttons · `.ap-btn`

Variants: .primary, .secondary, .ghost, .icon. Sizes: default + .sm.

Class	Visual
.ap-btn	Base: 40px tall, transparent background, 10px radius.
.ap-btn.primary	Filled indigo, white text. Send / Submit / Search.
.ap-btn.secondary	White surface with input border, foreground text.
.ap-btn.ghost	Transparent until hover (then secondary fill).
.ap-btn.icon	Square 40×40; combines with any variant.
.ap-btn.sm	28px tall, 12px font; for toolbars and inline actions.

09 — Components

Top-nav tab · `.ap-nav-tab`

Single anchor in the header nav row. Active state is the indigo-fill pill.

Create Task Auditor Weekly Goals

Class	Visual
.ap-nav-tab	Inactive — muted text, transparent.
.ap-nav-tab.active	Indigo fill, white text, soft shadow.
:hover	Secondary surface tint, foreground text.

10 — Components

Card · `.ap-card`

White surface with 1px border, 12px radius, soft shadow. Header / body slots provided as separate classes.

Create Task

Create a new task version or concept task

Body content goes here.

Class	Visual
.ap-card	Outer wrapper.
.ap-card-header	Padded title block, 24px gap above body.
.ap-card-title	24px semibold, tight tracking.
.ap-card-subtitle	14px muted-foreground.
.ap-card-body	Padded body slot.

11 — Components

Form fields · `.ap-input · .ap-select · .ap-textarea`

All three share height (40px), border, and radius. Pair with .ap-label above and .ap-help below.

Game

Playable

Task description

Describe what you want to modify or add to this version.

Class	Visual
.ap-label	14px medium, sits above the field.
.ap-input	Single-line text input. 40px tall.
.ap-select	Combobox-style trigger button. Add `.placeholder` for unset state.
.ap-textarea	Multi-line input. `min-height: 80px`; vertical-resize allowed.
.ap-help	12px muted-foreground; sits below the field.

12 — Components

Status pill · `.ap-status-pill`

Tiny rounded-full label on task cards. Variants map to semantic colors.

Waiting Pending TL Done Failed Archived

Class	Visual
.ap-status-pill	Base. Defaults to muted.
.warning	Amber — Waiting.
.pending-tl	Purple — Pending TL.
.success	Green — Done / Succeeded.
.destructive	Red — Failed.
.muted	Gray — Archived / inactive.

13 — Components

Chat bubble · `.ap-chat-bubble`

Agent (Developer) bubbles use a light indigo wash; auditor bubbles use the neutral secondary fill. Up to 70ch wide.

Developer · May 2, 22:46

✅ FIXED

Context: Beginning of the game — first 5 shapes are now simple.

Horizontal line 3×1
Square 2×2
Vertical line 1×3

Tweakable: scripted shape ids in src/world/index.ts.

Antontrus · May 2, 22:14

Revert the zigzag back to how it was.

Class	Visual
.ap-chat-bubble	Base bubble — padding, radius, max-width.
.ap-chat-bubble.agent	Light indigo wash — Developer messages.
.ap-chat-bubble.user	Secondary gray — auditor messages.

14 — Components

Task card · `.ap-task-card`

Single card in the right-rail task list. Selected task gets .is-active for the indigo border + shadow.

4916 / 1

Waiting 20m ago

Add bomb blocks to pre-filled rows triggering cascade chain reactions

Give simpler shapes in early moves

woodoku-blast / woodoku blast 7 tetris scroller

4797 / 1

Pending TL 1d ago

Replace Sort Eggs with monster discovery viewfinder

monster-legends

Class	Visual
.ap-task-card	Outer card. Hover lifts to `--shadow-md`.
.ap-task-card.is-active	Indigo border + tinted indigo shadow + 4% indigo wash. Marks the currently-loaded task.
.ap-task-card-head	Pin + id + version + status dot, single row.
.ap-task-card-meta	Status pill + relative timestamp.
.ap-task-card-title	14px semibold, normal line-height.
.ap-task-card-summary	Latest message preview (icon + truncated paragraph).
.ap-task-card-foot	Slug breadcrumb + More toggle.

15 — Components

Tabstrip · `.ap-tabstrip + .ap-tab`

Center-pane sub-tabs (Scene Editor / Chat / Pins / Files / Workspace), Create-Task mode toggle, status filter row.

Class	Visual
.ap-tabstrip	Container — muted gray strip, 4px inset.
.ap-tab	Inactive tab — muted text, transparent.
.ap-tab.active	Active tab — white surface, foreground text, soft shadow.

Color

Surface

Typography

Spacing

Radius

Shadow

Motion

Buttons · .ap-btn

Top-nav tab · .ap-nav-tab

Card · .ap-card

Create Task

Form fields · .ap-input · .ap-select · .ap-textarea

Status pill · .ap-status-pill

Chat bubble · .ap-chat-bubble

Task card · .ap-task-card