Design systems overview (Corone DS + Curva DS v2)

Design systems — both shipped

Two independent OKLCH-token design systems on this VPS, both shipped via /impeccable skill.

1. Corone Quiet Premium DS

Status: SHIPPED 2026-04-30 (commit 2a1ac51) Repo: COCONRobotics-Corp/corone-monster Branches: julian/keb-corone-design-system-quiet-premium → merged to release/kebahagiaan → ported to corone-ryo Live preview tokens: https://cocon-lab.com/sessions/24dadf25-b509-4dfc-aa4a-a95a39c8ab71/corone-tokens.html

Tokens

• OKLCH color space (perceptual uniformity)
• Light + dark themes parity
• Source Serif 4 + JetBrains Mono via next/font
• Type scale + spacing scale tokenized
• Brand mauve, editorial accents

Components (src/components/ui/corone/)

Component	Variants
Button	4 variants × 3 sizes
Input / Textarea	standard + textarea
Card	3 elevation levels
StatusPill	6 tones
AgentStateBadge + AgentStateRibbon	keystone (live agent state)
useTheme hook + ThemeToggle	pill + single variants

Phases (all done)

• P1 Foundation — OKLCH tokens light+dark
• P2 Primitives — buttons, inputs, cards, pills
• P3 Hero shell — SessionList + AgentStateRibbon
• P4 Settings IA — SettingsModal brand mauve + editorial title + fuzzy search
• P5 Polish + QA — TS strict, build green, browser-verified

Theme mechanics

data-theme attribute + .dark class kept in sync. Pre-paint script avoids FOUC. System preference detected on first load.

Backward compat

100% — legacy --bg-primary etc. retained as OKLCH aliases.

last-edited-by: shared

2. Curva DS v2

Status: SHIPPED 2026-05-01 (PR #1012, commit 2ed99af on develop) Repo: COCONRobotics-Corp/Curva Branch: user/corone-CRV-35-design-system-v2 Stack: Laravel 11 + Inertia 2 + Vue 3.5 + Tailwind 4 + Heroicons + Headless UI Live preview: https://curva.cocon-lab.com (Member: eduson510@gmail.com / curva-review-2026)

Coverage (TRIPLE-CHECKED)

Surface	Coverage
Pages	232/232 (100%) — 193 explicit + 39 via composition
Components	86/86 (100%) — 64 explicit + 22 via children
Layouts	8/8
Modules	46/46
Stale Tailwind palette classes	0 (was 2,278)

Tokens

OKLCH semantic: curva-brand, curva-info, curva-warning, curva-success, curva-danger, curva-n-* (neutrals).

Tailwind 4 critical fix

/alpha modifiers silently drop on CSS-var oklch colors. Required color-mix wrap in tailwind.config.js:

success: 'color-mix(in oklab, var(--curva-success) calc(<alpha-value> * 100%), transparent)'

Audit reproducibility

find resources/js resources/views -name '*.vue' -o -name '*.blade.php' \
  | grep -v '/Curva/' \
  | xargs grep -lE '(bg|text|border|...)-(gray|slate|zinc|red|orange|...)-[0-9]+' 2>/dev/null \
  | wc -l   # → 0

Intentional NOT migrated

• Welcome.vue (LP, separate design)
• SweetAlert2 plugin params (raw hex required)
• Stripe Elements iframe (3rd-party theme)
• Dropzone.js styling

CI infrastructure trap

Ondrej PHP PPA rotated to dual-key signing. Dockerfile must fetch BOTH keys:

• 71DAEAAB4AD4CAB6
• 4F4EA0AAE5267A6C

last-edited-by: shared

Comparison

	Corone DS	Curva DS v2
Stack	Next.js + Tailwind	Laravel + Vue + Tailwind 4
Tokens	OKLCH (corone-*)	OKLCH (curva-*)
Light/dark	both	follows existing
Skill used	/impeccable craft + polish	/impeccable craft + harden
Author	eduson510 (corone), time7676 (keb)	eduson510 (Curva absolute rule)
Status	shipped 2026-04-30	shipped 2026-05-01

Cross-refs

• corone-design-system — Corone details
• curva-github-practice — Curva push workflow + Tailwind 4 fix
• skills-catalog — /impeccable family
• impeccable-routing — auto-pick subcommand decision table
• curva — Curva entity
• elc-ai-agent — Corone platform