Component Playground v1.0
brand.3cosystem.net/playground
Component Playground
Interactive preview of every component in the 3cosystem design system. Toggle variants, states, and surface themes.
Primitive Components
The smallest building blocks — buttons, inputs, badges, and controls that compose into larger patterns.
Button
Variants
5 variants — default | destructive | outline | secondary | ghost
Sizes
3 sizes — sm | default | lg
States
States — normal | disabled
Badge
4 variants — default | secondary | destructive | outline
DefaultSecondaryErrorOutline◎ With Icon
Input
4 states — default | focus | error | disabled
Textarea
3 states — default | focus | disabled
Card
3 variants — basic | structured | glass
Card Title
Card content goes here with some description text.
Content area with descriptive text.
Action →
Glass Card
Glassmorphic variant with glow border.
Dialog
Trigger button opens modal overlay
Tabs
3-tab demo with content switching
Overview content: key metrics and summary information.
Tooltip
Hover each button — 4 positions
Composite Components
Higher-order patterns composed from atoms — search bars, profile rows, status indicators, and state displays.
KPI Score Cards
Contacts
2,481
+18 this week
Status Badge
Charter Status
draftin progresscompletesubmitted
Event Status
ideaplanninglivearchived
Search Bar
Input with icon, clear button, filter chips
Profile Summary Row
Avatar + name + headline + action
A
Alex Johnson
Product Designer · Remote
Empty State
Icon + title + description + CTA
📭
Nothing here yet
Get started by creating your first item. It only takes a moment.
Error State
Red-tinted card with error message + retry
Failed to load data. Check your connection and try again.
Complex Patterns
Full UI regions composed from multiple molecules — navigation systems, content cards, and interactive panels.
App Switcher
Click to expand — shows all 3cosystem surfaces
Section Navigator
Charter sidebar — click sections to advance progress
Comment Thread
3 mock comments with avatars and timestamps
AJ
Alex Johnson2h ago
This component system is looking really clean. Love the surface token approach.
ML
Maya Lee1h ago
Agreed! The glassmorphic card variant is especially nice. Can we add a medium variant?
RK
Riley Kim45m ago
The Dialog mock is perfect. I think we should add keyboard trap too for accessibility.
Charter Card
Grid view card — icon, status, progress, overflow menu
Q1 Growth Charter
Updated 3 days ago
Progress60%
6 / 10 sections
Sidebar Nav
Click ← → to toggle collapse
NAVIGATION
Surface Theming
Components read from CSS tokens, not hardcoded colors. Select a surface below — every preview adapts instantly.
Glass Card
4,280
Active connections
Component × State Coverage
Green checkmark = supported state. Dash = not applicable for this component.
| Component | Default | Hover | Focus | Active | Disabled | Loading | Error |
|---|
| Button | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ | ✓ |
| Input | ✓ | — | ✓ | — | ✓ | — | ✓ |
| Card | ✓ | ✓ | — | — | — | ✓ | ✓ |
| Badge | ✓ | — | — | — | — | — | ✓ |
| Switch | ✓ | ✓ | ✓ | ✓ | ✓ | — | — |
| Tabs | ✓ | ✓ | ✓ | ✓ | — | — | — |
Spacing & Sizing
4px base unit. All spacing values are multiples of 4. Touch targets minimum 44×44px.
Touch Targets (min 44×44px)
Border Radius Tokens
--radius-xl24px — Feature --radius-fullFull — Pills Type Scale
--fs-xsLegal, footnotes12px
--fs-smTimestamps, helper text13px
--fs-baseBody copy, form labels14px
--fs-mdDefault body16px
--fs-lgLead paragraphs18px
--fs-xlSmall headings20px
--fs-2xlh324px
--fs-3xlh230px
--fs-4xlh136px
--fs-5xlHero48px
Dark / Light Mode
Primary colors stay constant across themes. Only surface, border, and text tokens invert. Use the toggle below — or the sidebar — to switch.
◑ Dark mode
Background #0E0F12, text #EDEDF0, deep dark layering — primary color unchanged.
◑ Dark
Dark card
Surface token: #15161A
☀ Light
Light card
Surface token: #F8F8FA
| Token | Dark value | Light value | Role |
|---|
| --l-surface-dark | | | Page background |
| --l-surface | | | Card background |
| --l-surface-2 | | | Nested card |
| --l-text | | | Primary text |
| --l-text-muted | | | Secondary text |
| --l-border | | | Subtle borders |
| --l-primary | | | Brand color (unchanged) |