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.

Atoms

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

Default

Focused

ErrorThis field is required.

Disabled

Textarea

3 states — default | focus | disabled

Card

3 variants — basic | structured | glass

Card Title

Card content goes here with some description text.

Card Header

Subtitle 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

Tooltip text

Select

Click to open dropdown

Switch

Toggle on/off

Disabled

Always on

Accordion

3 collapsible items — first open by default

Ten platforms, one account — each with its own personality and community, connected by everything you build across them.

AlertDialog

Destructive action confirmation modal

Form

Label + input + helper + error state layout

Display nameThis is your public display name.

Email *Please enter a valid email address.

Label

Default / disabled / required with asterisk

Default label

Disabled label

Required field *

Popover

Trigger button + floating panel with arrow

Separator

Horizontal and vertical separators

Horizontal

Section A

Section B

Vertical

Item 1

Item 2

Item 3

Sheet

Sliding panel overlay from the right edge

Skeleton

Avatar, text lines, and card loading placeholders

Slider

Range slider with track, thumb, and live value

Volume65%

0100

Textarea

Multi-line input with label and character count

Message

Be concise and clear.75/200

Toast

Success, error, and info notification variants

✓

Saved!

Your changes have been saved successfully.

Error

Failed to save. Please try again.

Info

Your session will expire in 5 minutes.

Toggle

Pressed / unpressed toggle buttons with icon

Pressed: Bold

Toaster

Stacked toast notifications in corner position

Toaster (stacked)

✓

Charter saved

3 sections completed

→

Invite sent

alex@example.com

✦

Connection made

You matched with Maya Lee

Molecules

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

Matches

134

+6 this week

Events

3 upcoming

Credits

850

+120 earned

Status Badge

Charter Status

draftin progresscompletesubmitted

Event Status

ideaplanninglivearchived

Search Bar

Input with icon, clear button, filter chips

⌕

ComponentsTokensMotion

Profile Summary Row

Avatar + name + headline + action

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

⚠

Something went wrong

Failed to load data. Check your connection and try again.

AppFooter

Page content area

AnimatedNumber

Counter animating from 0 to target value

2,481

Connections

134

Events

850

Credits

ProgressRing

Circular progress indicators with percentage

75%

Charter

48%

Profile

92%

Network

EventProgressBar

Horizontal progress bar with stage labels

Event StageOpen

IdeaPlanningOpenLiveWrap-up

UndoToast

Toast notification with undo action button

Message deleted

UpgradeCTA

Upgrade prompt card with plan name and CTA

Pro Plan

Unlock full access

Get unlimited charters, advanced analytics, and priority support.

CR3DitBadge

Credit tier badges — newcomer, active, established, leader

◦Newcomer0-249 XP

◆Active250-749 XP

◎Established750-1999 XP

✦Leader2000+ XP

NarrativeBadge

SP3AK narrative completion checklist

◎SP3AK Narratives

✓

Origin Story

✓

Core Values

Defining Moment

Vision Statement

Celebration

Confetti success animation card

🎉

Charter complete!

You finished all 10 sections. Time to submit.

MilestonePrompt

Achievement prompt with XP reward

★

Milestone unlocked!

First charter submitted. Building momentum.

+50 XP

SponsorBanner

Event sponsor attribution banner

⬡

Event sponsor

M3SH Community

View →

CrossProductCTA

Cross-surface promotion card

Also on M3ET

Find your co-founder

Your network is stronger than you think. Discover collaborators across 3cosystem.

SurfaceWordmark

Surface name with colored "3" per surface

M3ET

N3TWORK

SP3AK

M3SH

SUCC3SS

R3SET

PageGuide

First-visit onboarding guide with step pagination

Step 1 of 3

Welcome to SP3AK

Your space to craft and share authentic narratives. Set up your profile.

ChatAISuggestions

AI suggested prompt pills

AI suggestions

CharterProgress

Charter section completion progress bar with pills

Charter progress6/10 sections

MissionVisionTeamBudgetMarketingRisksLegalMetricsMilestonesSummary

CharterStatusBadge

Charter status — draft, in progress, complete, archived

DraftIn ProgressCompleteArchived

Organisms

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

Sections

3 / 10

Comment Thread

3 mock comments with avatars and timestamps

Alex Johnson2h ago

This component system is looking really clean. Love the surface token approach.

Maya Lee1h ago

Agreed! The glassmorphic card variant is especially nice. Can we add a medium variant?

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

✦

in progress

Q1 Growth Charter

Updated 3 days ago

Progress60%

6 / 10 sections

Sidebar Nav

Click ← → to toggle collapse

NAVIGATION

Theming

Surface Theming

Components read from CSS tokens, not hardcoded colors. Select a surface below — every preview adapts instantly.

Active tokens — M3ET

--l-primary#B07D10

--l-primary-dark#9A6B08

--l-primary-light#D4A84A

Button

Badge

ActivePendingDraft

Progress

Task 175%

Task 245%

Task 390%

Glass Card

4,280

Active connections

State Matrix

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

Spacing & Sizing

4px base unit. All spacing values are multiples of 4. Touch targets minimum 44×44px.

Spacing Scale (4px base)

--space-1

4px

--space-2

8px

--space-4

16px

--space-6

24px

--space-8

32px

--space-12

48px

--space-16

64px

--space-20

80px

Touch Targets (min 44×44px)

Icon (24px)

Small (32px)

✓

Min Target (44px)

✓

Comfortable (56px)

Border Radius Tokens

--radius-sm8px — Badges

--radius-md12px — Inputs

--radius-lg16px — Cards

--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

Theming

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

Active status

☀ Light

Light card

Surface token: #F8F8FA

Active status

Token	Dark value	Light value	Role
--l-surface-dark	#0E0F12	#FFFFFF	Page background
--l-surface	#15161A	#F8F8FA	Card background
--l-surface-2	#1F2028	#F0F0F5	Nested card
--l-text	#EDEDF0	#1A1A2E	Primary text
--l-text-muted	#8B8C99	#6B6B80	Secondary text
--l-border	rgba(255,255,255,0.06)	rgba(0,0,0,0.08)	Subtle borders
--l-primary	#B07D10	#B07D10	Brand color (unchanged)