CarZone — Style Guide

Colors

ATOM

Surface, accent, and neutral color palettes. Surfaces go from light (50) to deep black (950). Accent is ice-blue for CTAs and highlights.

Surface

50

100

200

300

400

500

600

700

800

900

950

Accent (Ice Blue)

50

100

200

300

400

500

600

700

800

900

Neutral (Warm)

50

100

200

300

400

500

600

700

800

900

950

Show code

<div class="bg-surface-400">...</div>
<div class="bg-accent-400">...</div>
<div class="bg-neutral-300">...</div>
<div class="text-accent-400">Accent text</div>
<div class="text-neutral-500">Muted text</div>

Typography

ATOM

Inter font family with sizes from xs (0.75rem) to 4xl (2.25rem). Use font-semibold or font-bold for headings.

text-4xlCarZone

text-3xlPage Title

text-2xlSection Header

text-xlCard Title

text-lgLarge body text

text-baseDefault body text for paragraphs

text-smSecondary text and descriptions

text-xsCaptions, timestamps, labels

Show code

<span class="text-4xl font-bold text-white">CarZone</span>
<span class="text-base text-neutral-200">Body text</span>
<span class="text-xs text-neutral-400">Caption</span>

App Button

ATOM

Multi-variant button with primary (ice-blue), secondary, ghost, outline, and danger styles. Supports sm, md, lg sizes and optional full-width.

Variants

Primary

Secondary

Ghost

Outline

Danger

Sizes

Small

Medium

Large

Show code

<app-button variant="primary">Primary</app-button>
<app-button variant="secondary">Secondary</app-button>
<app-button variant="ghost">Ghost</app-button>
<app-button variant="outline">Outline</app-button>
<app-button variant="danger">Danger</app-button>
<app-button variant="primary" size="sm">Small</app-button>
<app-button variant="primary" size="lg">Large</app-button>
<app-button variant="primary" full>Full Width</app-button>
<app-button variant="primary" href="page.html">Link Button</app-button>

Icon Button

ATOM

Circular icon button using Iconoir icons. Variants: default (surface bg), primary (accent tint), ghost (transparent). Supports optional badge count.

Variants

Default

Primary

Ghost

With Badge

Sizes

sm

md

lg

Show code

<icon-button icon="iconoir-settings" variant="default"></icon-button>
<icon-button icon="iconoir-plus" variant="primary"></icon-button>
<icon-button icon="iconoir-more-horiz" variant="ghost"></icon-button>
<icon-button icon="iconoir-bell" variant="default" badge="3"></icon-button>
<icon-button icon="iconoir-heart" size="sm"></icon-button>

App Toggle

ATOM

A simple on/off switch toggle. Ice-blue when on, dark surface when off.

On

Off

Show code

<app-toggle state="on"></app-toggle>
<app-toggle state="off"></app-toggle>

Section Label

ATOM

Uppercase, tracked-out section heading used to group content. Subtle neutral color.

Recent Activity

Show code

<section-label>Recent Activity</section-label>

Role Badge

ATOM

Colored pill badges for collaborator roles. Each role has a distinct color to quickly communicate permission level.

Show code

<role-badge role="Artist"></role-badge>
<role-badge role="Co-Creator"></role-badge>
<role-badge role="Producer Collaborator"></role-badge>
<role-badge role="Lyric Collaborator"></role-badge>
<role-badge role="Session Collaborator"></role-badge>
<role-badge role="Commentor"></role-badge>
<role-badge role="Listener"></role-badge>

Filter Pill

ATOM

Single filter chip. Active state uses ice-blue accent tint. Supports optional color attribute for custom tinting.

Show code

<filter-pill label="All" active></filter-pill>
<filter-pill label="Edits"></filter-pill>
<filter-pill label="Comments"></filter-pill>

Sort Pill

ATOM

Sort control pill with up/down arrow icon. Used alongside filter pills for list ordering.

Show code

<sort-pill label="Newest"></sort-pill>

Waveform Visual

ATOM

Decorative SVG waveform visualization. Randomized bar heights for a realistic audio feel. Adjust height attribute to control size.

height="40"

height="80"

Show code

<waveform-visual height="40" color="accent"></waveform-visual>
<waveform-visual height="80" color="accent"></waveform-visual>

Loop Pill

ATOM

Toggle pill for loop mode. Shows "Looping" with accent tint when on, "Loop" with neutral style when off.

On

Off

Show code

<loop-pill state="on"></loop-pill>
<loop-pill state="off"></loop-pill>

Progress Dots

ATOM

Step indicator dots for onboarding or multi-step flows. Set total number of dots and which one is active (1-indexed).

Step 1 of 3

Step 2 of 3

Step 4 of 5

Show code

<progress-dots total="3" active="1"></progress-dots>
<progress-dots total="5" active="4"></progress-dots>

App Logo

ATOM

CarZone logo rendered as an SVG in the accent ice-blue color. Adjustable size via the size attribute (in pixels).

24px

40px

80px

Show code

<app-logo size="24"></app-logo>
<app-logo size="40"></app-logo>
<app-logo size="80"></app-logo>

Form Field

MOLECULE

Labeled text input with dark surface background. Supports label, type, placeholder, and value attributes. Focus state shows accent border.

Show code

<form-field label="Email" type="email" placeholder="you@example.com"></form-field>
<form-field label="Project Name" type="text" placeholder="Enter project name" value="Midnight Sessions"></form-field>

Search Bar

MOLECULE

Search input with magnifying glass icon. Rounded pill shape with dark background and subtle border.

Show code

<search-bar placeholder="Search projects, collaborators..."></search-bar>

Presence Avatar

MOLECULE

Circular avatar with initials and a colored presence dot. Status colors: green (active), ice-blue (in-session), slate (idle), gray (offline). Sizes: sm, md, lg, xl.

Statuses

Active

In Session

Idle

Offline

Sizes

sm

md

lg

xl

Show code

<presence-avatar name="Jada" initials="JA" status="active" size="lg"></presence-avatar>
<presence-avatar name="Marcus" initials="MC" status="in-session" size="md"></presence-avatar>
<presence-avatar name="Alex" initials="AK" status="idle" size="sm"></presence-avatar>
<presence-avatar name="Taylor" initials="TR" status="offline" size="xl"></presence-avatar>

Reaction Row

MOLECULE

Emoji reaction pills with counts, plus a "+" button to add more. Pass reactions as a JSON array of {emoji, count} objects.

Show code

<reaction-row reactions='[{"emoji":"🔥","count":5},{"emoji":"👍","count":3},{"emoji":"🎵","count":2}]'></reaction-row>

Filter Bar

MOLECULE

Horizontal scrollable row of filter pills. Pass filters as a JSON array and set the active filter. Active pill uses accent tint.

Show code

<filter-bar filters='["All","Verse 1","Verse 2","Chorus","Bridge"]' active="All"></filter-bar>

Mini Player

MOLECULE

Compact audio player with play/pause button, progress bar, timestamp, and optional loop toggle. Used for inline audio previews.

Paused

Playing with loop on

Playing with loop off

Show code

<mini-player progress="30" time="0:22" total="1:16" state="paused"></mini-player>
<mini-player progress="65" time="0:49" total="1:16" state="playing" loop="on"></mini-player>
<mini-player progress="40" time="0:32" total="1:16" state="playing" loop="off"></mini-player>

Inline Player

MOLECULE

Larger audio player card with waveform visualization, progress bar, timestamps, and a prominent play button. Used in detail views.

Show code

<inline-player progress="35" time="0:27" total="1:16" state="paused"></inline-player>

Settings Row

MOLECULE

Versatile settings list item. Three variants: toggle (on/off switch), value with chevron (navigation), and danger (destructive action in red).

Show code

<settings-row label="Push Notifications" toggle="on"></settings-row>
<settings-row label="Dark Mode" toggle="off"></settings-row>
<settings-row label="Audio Quality" value="High"></settings-row>
<settings-row label="Storage" value="2.4 GB" href="#"></settings-row>
<settings-row label="Sign Out" danger></settings-row>

Section Row

MOLECULE

Song section list item with number badge, name, start time, duration, and navigation chevron. Used in track structure views.

Show code

<section-row name="Verse 2" number="4" start="1:36" duration="0:48" href="section-edit.html"></section-row>

Chat Input

MOLECULE

Chat message input bar with avatar, text field, and send button. Used at the bottom of chat screens. Includes safe area padding for home indicator.

Show code

<chat-input placeholder="Type a message..." avatar="JW"></chat-input>
<chat-input placeholder="Message..." avatar="MC"></chat-input>

Empty State

MOLECULE

Centered placeholder for empty views. Supports a title, subtitle, optional tertiary text, an icon slot (passed as inner HTML), and an optional CTA button with href.

Show code

<empty-state title="All caught up" subtitle="No new activity to show" button="Go Home" href="home.html">
  <svg class="w-12 h-12" ...>...</svg>
</empty-state>

<empty-state title="No projects yet" subtitle="Create your first track" tertiary="Tap the button below to get started">
  <svg class="w-12 h-12" ...>...</svg>
</empty-state>

Avatar Stack

MOLECULE

Overlapping row of circular initial avatars. Pass a JSON array of initials strings. Sizes: xs, sm, md.

xs

sm

md

Show code

<avatar-stack avatars='["JW","AK","DP"]' size="sm"></avatar-stack>
<avatar-stack avatars='["JW","AK","DP","MC"]' size="md"></avatar-stack>

Stat Grid

MOLECULE

Grid of numeric stats with labels. Pass a JSON array of {value, label, color} objects. Use color "accent" for ice-blue highlight.

Show code

<stat-grid stats='[{"value":"7","label":"Edits","color":"accent"},{"value":"2","label":"Sessions"},{"value":"4","label":"Comments"}]'></stat-grid>

Action Card

MOLECULE

Compact action link card with icon, label, and sublabel. Variants: default (dark surface) and primary (accent tint). Icons: doc, mic, list.

Show code

<action-card label="Lyrics" sublabel="5 lines" href="lyrics.html" icon="doc"></action-card>
<action-card label="Record" sublabel="Start session" href="recording.html" variant="primary" icon="mic"></action-card>
<action-card label="Sections" sublabel="4 parts" href="sections.html" icon="list"></action-card>

Link Row

MOLECULE

Navigational list item with title, optional subtitle, chevron, and an optional icon slot (passed as inner HTML, rendered in an accent-tinted box).

Show code

<link-row title="How do I invite collaborators?" href="#"></link-row>

<link-row title="Email Support" subtitle="support@carzone.app" href="#">
  <svg class="w-4 h-4" ...>...</svg>
</link-row>

Reference Card

MOLECULE

Compact inline link card for referencing related content. Supports "link" (external link icon) and "play" (play button) icon variants.

Show code

<reference-card text="Verse 2 · Lyrics" href="#"></reference-card>
<reference-card text="Session 2 · 0:48" icon="play" href="#"></reference-card>

Status Bar

ORGANISM

iOS-style status bar showing time, Wi-Fi, and battery icons. Always rendered in white for dark UI backgrounds. Includes safe area padding.

Show code

<status-bar></status-bar>

Page Header

ORGANISM

Top navigation header with centered title, optional subtitle, back arrow, and a right slot for action buttons.

Show code

<page-header title="Project Details" subtitle="Midnight Sessions" back="home.html">
  <icon-button icon="iconoir-more-horiz" variant="ghost" size="sm"></icon-button>
</page-header>

CarZone Nav

ORGANISM

Bottom tab navigation with five items: Home, Search, Orders, Escrow, and Profile. Set active tab via the active attribute.

active="home"

active="orders"

Show code

<carzone-nav active="home"></carzone-nav>
<carzone-nav active="search"></carzone-nav>
<carzone-nav active="orders"></carzone-nav>
<carzone-nav active="escrow"></carzone-nav>
<carzone-nav active="profile"></carzone-nav>

Chat Bubble

ORGANISM

Message bubbles for chat UI. "Sent" variant is accent-colored and right-aligned. "Received" variant is dark with optional avatar and sender name.

Hey, I just finished the hook. Want to hear it?

Yes! Send it over. I have some ideas for the verse too.

Perfect, uploading now. The vibe is smooth R&B.

Show code

<chat-bubble variant="received" time="9:15 AM" name="Marcus" initials="MC">
  Hey, I just finished the hook.
</chat-bubble>

<chat-bubble variant="sent" time="9:18 AM">
  Send it over!
</chat-bubble>

Activity Row

ORGANISM

Activity feed item with icon, description text, and timestamp. Icon types: edit, comment, mic, join, listen.

Show code

<activity-row text="Jada edited the chorus lyrics" time="2h ago" icon="edit"></activity-row>
<activity-row text="Marcus left a comment" time="3h ago" icon="comment"></activity-row>
<activity-row text="Alex recorded a vocal take" time="5h ago" icon="mic"></activity-row>
<activity-row text="Taylor joined the project" time="1d ago" icon="join"></activity-row>
<activity-row text="Chris listened to the mix" time="2d ago" icon="listen"></activity-row>

Collaborator Card

ORGANISM

Card showing a collaborator with their avatar, presence status, name, detail text, and role badge. Combines presence-avatar and role-badge atoms.

Show code

<collaborator-card
  name="Jada Williams"
  initials="JW"
  status="active"
  role="Artist"
  detail="Working on Verse 2"
></collaborator-card>

<collaborator-card
  name="Marcus Cole"
  initials="MC"
  status="in-session"
  role="Co-Creator"
  detail="Recording in Studio A"
></collaborator-card>

Chat Header

ORGANISM

Chat screen header with back button, centered title/subtitle, and an overlapping avatar stack for group members. Used at the top of chat views.

Show code

<chat-header
  title="Midnight Frequency"
  subtitle="5 members · 3 online"
  back="workspace.html"
  avatars='["JW","MC","AK"]'
></chat-header>

Moment Card

ORGANISM

Timestamped comment card for audio moments. Shows a timestamp pill, colored tag badges (Keep, Explore, Idea, Redo, Hook), user avatar, comment text, and optional reactions.

Show code

<moment-card
  timestamp="1:24"
  tags='["Keep"]'
  user="Marcus"
  initials="MC"
  text="Good vocal run here"
  reactions='[{"emoji":"🔥","count":3}]'
></moment-card>

<moment-card
  timestamp="2:08"
  tags='["Explore","Idea"]'
  user="Jada"
  initials="JW"
  text="Try a harmony on this line?"
></moment-card>

Playback Controls

ORGANISM

Full playback transport controls with rewind, play/pause (accent circle), and fast-forward buttons. Supports "playing" and "paused" states and "lg" size.

Paused (lg)

Playing

Show code

<playback-controls state="paused" size="lg"></playback-controls>
<playback-controls state="playing"></playback-controls>

Lyrics Toolbar

ORGANISM

Bottom toolbar for lyrics editing screens. Includes undo, redo, add note, and history buttons. The notes button highlights in accent when notes-active is set.

Notes active

Notes inactive

Show code

<lyrics-toolbar notes-active></lyrics-toolbar>
<lyrics-toolbar></lyrics-toolbar>

Project Tools

ORGANISM

Quick-access tool bar for project views. Renders three icon cards linking to Team, Chat, and Activity screens.

Show code

<project-tools></project-tools>