Component Library — Content Bug

01 — FOUNDATIONS

Color tokens, typography, spacing tokens, border-radius, and animation curves.

Color Palette

--blue, --green, --gold, --orange, --red, --purple, --cyan, --navy

8 brand colors used across all surfaces.

--blue
#2997ff

--green
#7ecba1

--gold
#ffd60a

--orange
#ff9f0a

--red
#c0392b

--purple
#a855f7

--cyan
#22d3ee

--navy
#0a1628

Text Colors

--txt1, --txt2, --txt3, --txt4

Four-level text hierarchy for dark backgrounds.

Primary text --txt1

Secondary text --txt2

Tertiary text --txt3

Muted text --txt4

Typography Scale

var(--font-display), var(--font)

Display through overline type ramp.

Display — 42px/700

Heading 1 — 28px/600

Heading 2 — 20px/600

Heading 3 — 16px/500

Body — 14px/400

Small — 12px/400

Overline — 9px/500 uppercase

Spacing Rules

var(--s0) … var(--s16)

4px base grid and border-radius scale.

Base Grid

4px — base unit

8px — comfortable

16px — standard

24px — spacious

48px — section break

80px — page break

Border Radius

6px — inputs, small pills

8px — badges, tags

12px — cards, containers

14px — glass panels

16px — modals, shells

100px — full pill/round

Logo Assets

CDN SVGs

Bug icon and full wordmark in white and black variants.

Bug icon — white

Full wordmark — white

Full wordmark — black (light bg)

02 — BACKGROUNDS

Three ambient gradient backgrounds — portal, website light, website navy.

bg-dark (Portal / Login)

.bg-dark

Black void — default portal background.

.bg-dark

Black Void

bg-light (Website white sections)

.bg-light

White canvas for website light sections.

.bg-light

White Canvas

bg-navy (Website blue sections)

.bg-navy

Deep navy for website blue sections.

.bg-navy

Deep Navy

03 — GLASS SURFACES

Three glass container types — card (frosted), bubble (speech), flat (minimal).

Glass Card (Frosted)

.glass-card

Frosted blur, white border, inset highlight.

Glass Card

.glass-card — frosted blur, white border, inset highlight

Glass Bubble (Speech)

.glass-bubble

Chat/message style bubble container.

Glass Bubble

.glass-bubble — chat/message style

Glass Flat (Minimal)

.glass-flat

Subtle surface, no blur.

Glass Flat

.glass-flat — subtle surface, no blur

04 — BUTTONS

Glass intensity spectrum g1-g6, ghost, pill shapes, five sizes, disabled, glow accents.

Glass Intensity Spectrum

.btn .btn-g1 … .btn-g6

Six intensity levels from whisper to solid.

Glow Variants

.glow-blue, .glow-green, .glow-gold, .glow-orange, .glow-red

Colored glow ring on any button.

Pill Buttons

.btn-pill

Full-round border-radius variant.

Sizes (5 levels)

.btn-xs (28px) · .btn-sm (36px) · .btn (44px) · .btn-lg (52px) · .btn-xl (60px)

Five height stops from extra-small to extra-large.

Ghost Button

.btn-ghost

Transparent with border, used for secondary actions.

Disabled States

disabled

Reduced opacity and no pointer events.

Website CTA Buttons

.btn-g6.glow-blue.btn-pill, .btn-ghost.btn-pill

Primary and secondary website call-to-action pair.

Start Free Trial Learn More →

05 — INPUTS & FORMS

Text inputs, selects, textareas, labels, and form grid layout.

Text Input

.input

Standard glass text input with label.

Project Name

Select

.input.select

Dropdown select styled to match inputs.

Content Type

Textarea

.input.textarea

Multi-line text area.

Notes

Form Grid (combined)

CSS grid + .input

Two-column responsive form layout.

Client Name

Email

Brief

06 — CARDS

Every card type across portal and website — stat, folder, meeting, pipeline, pricing, review, step, feature, stats block, comparison.

Stat Cards

.stat-card

KPI number with label, used on dashboards.

24

Active Projects

94%

Approval Rate

$2,400

This Period

Folder Cards (6 color variants)

.folder-card .folder-icon .fi-*

Color-coded folder icons for storage view.

Raw Footage

Cleaned

B-Roll

SFX

Music

Projects

Meeting Cards

.meeting-card .mtg-status

Live and scheduled meeting indicators.

Live

Weekly Sync

Started 12 min ago

Scheduled

Sprint Review

Tomorrow 2:00 PM

Card Island (Video Overlay)

.ps-card-island

Metadata island overlaid on pipeline video cards.

LF T2

v3

A

SF T1

v7

C

LF T3

v1

F

Pipeline Cards (3 Heights)

.pipeline-card

Same width, 3 height sizes: Large → Medium (½) → Small (¼). All carry card island + title + timer + timeline.

LFT2

v3

A

Brand Promo Reel1d 8h

Large — 320px tall

SFT1

v2

B

March Batch Edit3d 0h

Medium — 160px tall

LFT3

v1

C

Hook Reel v15d 2h

Small — 80px tall

Pricing Cards

.glass-card

Three-tier pricing layout for the website.

Basic

$499

/month

✓ 4 videos/mo
✓ 48h turnaround
✓ 1 revision round
✗ Thumbnails

Silver ★

$999

/month

✓ 8 videos/mo
✓ 24h turnaround
✓ 2 revision rounds
✓ Thumbnails included

Gold

$1,999

/month

✓ Unlimited videos
✓ Same-day delivery
✓ Unlimited revisions
✓ Dedicated editor

Review / Testimonial Cards

.glass-card

Client testimonial cards with avatar, stars, and quote.

JD

John Doe

CEO, Acme Inc

★★★★★

"Incredibly fast turnaround. Our content pipeline has never been smoother."

SK

Sarah K

Creator, 2M subs

★★★★★

"They understand the YouTube algorithm. My click-through rate doubled."

MR

Mike R

Agency Owner

★★★★☆

"Reliable, consistent quality. Scaled our client output 3x without hiring."

Step Cards (How It Works)

.glass-card

Numbered step cards for onboarding flows.

1

Upload Your Footage

Drop your raw files into the portal. We support all major formats.

2

We Edit & Deliver

Our editors craft your content in 24–48 hours. Track progress live.

3

Review & Publish

Approve, request changes, or publish directly from the portal.

Feature Cards

.glass-card

Icon + title + description for feature grids.

Lightning Fast

24h turnaround on all edits.

Real-Time Tracking

See exactly where your project stands.

Secure Storage

Enterprise-grade encrypted file storage.

Team Collaboration

Built for teams of any size.

Stats Block (Website)

grid layout

Four-column stats row for social proof.

500+

Projects Delivered

24h

Avg Turnaround

98%

Client Satisfaction

50+

Active Clients

Comparison Table

.glass-card + table

Feature comparison across pricing tiers.

Feature	Basic	Silver	Gold
Videos / month	4	8	∞
Turnaround	48h	24h	Same day
Revisions	1	2	∞
Thumbnails	✗	✓	✓

07 — NAVIGATION

Header nav, portal left-nav, bottom island, footer.

Website Header Bar + Sticky Nav Island

.cb-header-bar .cb-logo .cb-header .cb-nav-link .cb-nav-cta

White header bar with BLACK logo (left). Centered dark glass pill nav island — sticky on scroll. Logo does NOT go inside the pill. First section bg is always white.

Portal Left Nav (slide in/out)

.left-nav .ln-btn .ln-label .ln-badge .ln-sep

Fixed left sidebar — slides in on hover, retracts when idle. Icon buttons with hover labels.

Bottom Island (slide up/down)

.bottom-island .bottom-island-inner .bi-btn .bi-avatar

Fixed bottom action bar — slides up on hover, retracts when idle. Avatar + icon buttons.

CB

Website Footer

.glass-card

Four-column footer with logo, links, and copyright.

Premium video editing for creators and brands. Scale your content without scaling your team.

Product

Pricing
Portfolio
FAQ

Legal

Terms
Privacy
Cookies

Connect

Instagram
TikTok
YouTube

08 — BADGES & TAGS

Status indicators, role badges, type/tier/grade, health timers, pills.

Project Status

.badge-status .badge-queue .badge-active .badge-review .badge-approved

Pipeline stage indicators.

Queue Active Review Revisions Approved

Role Badges

.badge-role .badge-owner .badge-admin .badge-editor .badge-client .badge-trial

User permission level indicators.

Owner Admin Editor Client Trial

Type / Tier / Grade

.ps-ci-type .ps-ci-tier .ps-ci-grade

Content classification chips from card islands.

SFLF

T1T2T3

ABCDF

Health Timers

.health-timer

Color-coded time-in-stage indicators.

1d 8h

2d 14h

4d 0h

5d 12h

7d 22h

Pills / Chips

.pill

Selectable filter pills for list views.

All Short Form Long Form Thumbnails

09 — PIPELINE (KANBAN)

5-stage kanban board: Queue, Active, Review, Revisions, Approved.

Full 5-Stage Board

.pipeline-col .col-hdr .col-body .pipeline-card[draggable]

Horizontal scrollable kanban. Cards are draggable between columns based on user role permissions (admin/editor can drag; client view-only).

Queue

2

SFT1

v2

B

Hook Reel2d 14h

LFT2

v1

C

March Batch5d 3h

Active

1

LFT3

v4

A

Product Launch1d 8h

Review

1

SFT1

v5

B

Testimonial0d 6h

Revisions

1

SFT2

v2

D

Promo Reel4d 12h

Approved

1

SFT1

v3

A

Brand Recap—

10 — INTERACTIVE COMPONENTS

Chat, review toolbox, drawing bar, recording, upload, progress tracker, wizard, marquee.

Chat

.chat-msg .chat-avatar .chat-bubble .chat-input-row

Threaded chat with avatars, role badges, and input row.

JD

John DoeClient2:34 PM

Can we make the intro punchier? The hook needs to grab attention.

ME

Mike EditorEditor2:47 PM

Absolutely! I'll tighten the first cut. Draft 2 in about an hour.

Review Dock (Glass Island)

.dock-bubble .dk-island-wrap

Floating review toolbar with timestamp, notes, and mode buttons.

1:24

Drawing Annotation Bar

.draw-bar .draw-tool .draw-colors .draw-sizes

Freehand drawing toolbar with tools, colors, and stroke sizes.

Recording Indicators

.rec-indicator .rec-dot .rec-timer

Video and audio recording status bars.

REC 1:24

REC 0:42

Right-Click Context Menu

.rv-ctx

Contextual revision menu with timestamp and mode buttons.

1:24

Upload Drop Zone

.drop-zone

Drag-and-drop file upload area.

📁

Drop your footage here

or click to browse — MP4, MOV, up to 10GB

Progress Tracker

.tracker .tracker-node .tracker-ring .tracker-wire

Step-by-step progress indicator with done/active/pending states.

1

Upload

2

Details

3

Review

4

Submit

Wizard Questionnaire (3 sizes)

.glass-card

SM 400px, MD 560px, LG 720px wizard containers.

SM — 400px

Quick questions, pills, single-select

MD — 560px

Card grids, multi-select, inputs

LG — 720px

Full forms, file upload, preview

Marquee (Scrolling Logos)

animation: marquee-scroll

Infinite horizontal scroll for brand logos or partner names.

YouTube TikTok Instagram Facebook LinkedIn Premiere Pro After Effects DaVinci Resolve

11 — ICONS & ASSETS

Sample icons from the full library (380+ assets). See icon-library.html for the complete set.

Animated APNG (sample — 227 total)

filter: invert(1)

100x100 source, displayed at 28x28, black-on-transparent inverted to white.

check-mark

search

send

star

rocket

video

calendar

folder

Outline SVG (sample — ~100 total)

filter: invert(1)

50x50 vector icons, inverted to white.

home

settings

heart

lock

figma

claude

Color Brand Marks (sample — 11 total)

WEBP, no filter

Full-color brand icons, no inversion needed.

youtube

instagram

tiktok

apple

12 — LAYOUT SHELLS

Portal page shell, website 3-color section rotation, grid systems.

Portal Page Shell

.portal-shell .ps-nav-shell .ps-island-shell .ps-main

Interactive portal layout. Left nav slides in from left edge on hover, bottom island slides up from bottom on hover. Container has buffer padding on all sides so islands don't reshape the shell.

CB

Pipeline

Website 3-Color Section Rotation

.bg-light .bg-navy .bg-dark

Alternating background pattern: white (3n+1), navy (3n+2), black (3n).

WHITE (3n+1)

.bg-light · dark text

BLUE (3n+2)

.bg-navy · light text

BLACK (3n)

.bg-dark · light text

Grid Systems

CSS grid

4-column, 3-column, and 2-column layout grids.

4-column

3-column

2-column

13 — COPY-PASTE REFERENCE

Logo URLs, icon SVG paths, CSS keyframe names.

Logo URLs

CDN links

Copy-ready CDN URLs for all logo variants.

<!-- Bug icon (white on transparent) -->
https://assets.cdn.filesafe.space/mCNHhjy593eUueqfuqyU/media/685c436c7dbd377728cdbf85.svg

<!-- Full wordmark (blue/color original) -->
https://assets.cdn.filesafe.space/mCNHhjy593eUueqfuqyU/media/69b0caadbfc81fcf1a62c4f9.svg

<!-- WHITE version: filter:brightness(0) invert(1) -->
<!-- BLACK version: filter:brightness(0) -->

CSS Animation Keyframes

@keyframes

All animation keyframe names defined in design-system.css.

@keyframes fadeUp — opacity 0→1, translateY 20px→0
@keyframes fadeIn — opacity 0→1
@keyframes pulse — scale 1→1.05→1
@keyframes marquee-scroll — translateX 0→-50%
@keyframes rec-blink — opacity 1→0→1 (recording dot)
@keyframes wave — scaleY 0.4→1→0.4 (audio bars)

14 — QUICK INDEX

Section map for fast reference.

1 — Foundations (colors, type, spacing, logos)

2 — Backgrounds (dark, light, navy)

3 — Glass Surfaces (card, bubble, flat)

4 — Buttons (g1–g6, glow, pill, ghost, 5 sizes)

5 — Inputs & Forms (text, select, textarea)

6 — Cards (stat, folder, meeting, pipeline, pricing, review, step, feature, stats, comparison)

7 — Navigation (header, left-nav, bottom island, footer)

8 — Badges & Tags (status, role, type, tier, grade, health, pills)

9 — Pipeline Kanban (5-stage board)

10 — Interactive (chat, review dock, drawing, recording, context menu, upload, tracker, wizard, marquee)

11 — Icons & Assets (APNG, SVG, brand marks)

12 — Layout Shells (portal shell, website sections, grids)

13 — Copy-Paste Reference (logos, animations)

14 — This index

15 — Spacing Laws (scale, containers, buttons, violations)

15 — SPACING LAWS

Visual cheat sheet for spacing tokens, container widths, button measurements, and common violations.

15.1 — Spacing Scale

var(--s0) … var(--s16)

Every spacing token visualized as a colored bar.

--s0 · 4px

--s1 · 8px

--s2 · 16px

--s3 · 24px

--s4 · 32px

--s5 · 40px

--s6 · 48px

--s8 · 64px

--s12 · 96px

--s16 · 128px

15.2 — Container Width Bands

max-width constraints

Standard container widths used across portal and website.

Name	Width	Use
Wizard SM	`400px`	Quick questions, single-select
Wizard MD	`560px`	Card grids, multi-select, inputs
Wizard LG	`720px`	Full forms, file upload, preview
Content	`960px`	Main content area in portal
Website	`1200px`	Marketing page max-width

15.3 — Button Size Chart

.btn-xs .btn-sm .btn .btn-lg .btn-xl

All five button heights with padding and font size.

Class	Height	Padding X	Font	Use
`.btn-xs`	28px	12px	11px	Inline actions, table rows
`.btn-sm`	36px	16px	12px	Compact UIs, nav CTAs
`.btn`	44px	20px	13px	Default — forms, modals
`.btn-lg`	52px	28px	14px	Hero sections, primary actions
`.btn-xl`	60px	36px	16px	Landing page hero CTA

15.4 — The Law (Summary Table)

var(--s*)

When to use each spacing token.

Token	Value	When to use
`--s0`	4px	Tight label gaps, icon-to-text
`--s1`	8px	Inline element gaps, grid gaps in tight layouts
`--s2`	16px	Standard component padding, form grid gaps
`--s3`	24px	Card padding, comfortable vertical spacing
`--s4`	32px	Section sub-spacing, footer padding
`--s5`	40px	Content area padding, generous spacing
`--s6`	48px	Between components in style guide, marquee gap
`--s8`	64px	Section bottom padding
`--s12`	96px	Section top padding, page-level breaks
`--s16`	128px	Hero-level vertical breathing room

15.5 — Common Violations

wrong → correct

Frequently seen mistakes and their fixes.

Wrong	Correct	Why
margin-bottom:20px	margin-bottom:var(--s3)	20 is not on the 4px grid — use 24px (--s3)
gap:10px	gap:var(--s1) or var(--s2)	10 is off-grid — pick 8px or 16px
padding:12px	padding:var(--s2)	12 is between stops — round up to 16px
margin-top:6px	margin-top:var(--s1)	6 is off-grid — use 8px (--s1)
padding:80px 32px	padding:var(--s12) var(--s4)	Always use tokens, never raw pixel values
gap:48px (in gap:48px)	gap:var(--s6)	Correct value but must use token reference
font-size:var(--s2)	font-size:16px	Font sizes are NOT spacing — use raw px
border-radius:var(--s2)	border-radius:16px	Border-radius is NOT spacing — use raw px