Banner Studio — Style Guide

Colors

All colors are defined as CSS custom properties on :root. Always use variables — never hardcode hex values in new code.

Brand Palette

Navy

--navy · #0D1B2A

Ocean

--ocean · #1A3A5C

Steel

--steel · #243B55

Royal Primary

--royal · #2E6FD8

Sky

--sky · #5B9CF6

Ice

--ice · #DDEEFF

Teal

--teal · #3ECFB2

Green

#64B24B

Neutrals

Gray 50

--gray-50

Gray 100

--gray-100

Gray 200 Border

--gray-200

Gray 400

--gray-400

Gray 600

--gray-600

Gray 800

--gray-800

Semantic Colors (hardcoded — use sparingly)

Success

#22c55e

Danger

#ef4444 / #dc2626

Warning

#f59e0b

Typography

Font family: Plus Jakarta Sans. Weights available: 300, 400, 500, 600, 700, 800. All UI chrome font sizes are defined as CSS custom properties — always use the variable, never a hardcoded px value.

Type Scale

Variable	Size	Specimen	Used on
`--text-2xs`	9px	NAV LABEL	.nav-group-label, .icon-name, .nav-badge
`--text-xs`	10px	Sec badge · pill num	.sec-badge, .pill-card-num, .spk-dot
`--text-sm`	11px	SECTION HEADER	.sec, .char-counter, .drop-hint, .photo-adjust-label, .ai-brief-label
`--text-base`	12px	Button · label	.hdr-btn, .nav-btn, label
`--text-md`	13px	Field text · body content	.field-textarea, .nav-item-label, .bh-asset-name
`--text-lg`	14px	Toast notification	.toast, .dl-btn-new
`--text-xl`	16px	Modal title	.hdr-tab, .img-picker-htitle
`--text-2xl`	18px	Topbar title	.topbar-title
`--text-3xl`	20px	Section Heading	.bh-section-title

Banner display sizes (.smain-title, .ssub-title, .title.t1, etc.) are art-directed canvas output — they are intentionally outside this scale and should not use type scale variables.

Spacing

Use these values consistently. Two spacing tokens are defined as CSS variables.

Token / Value	Visual	Use Case
`4px`		Tiny gap — icon-to-text within a badge
`6px`		Header action button gaps
`8px`		Row items, small internal gaps
`12px`		Card internal padding, button group gaps
`--row-gap · 16px`		Between rows/items inside a section
`--sec-gap · 24px`		Between accordion sections
`--radius · 10px`		Default border-radius for inputs, buttons, cards
`--radius-lg · 16px`		Large cards, modals, picker popup

Buttons

Icons always go on the left, before the label text. Use .btn-icon on the <i> element.

Header / Topbar Buttons

.hdr-btn · .hdr-btn.hdr-btn-primary · .hdr-btn[disabled]
font-size: 12px · padding: 6px 14px · border-radius: 7px

Section Action Buttons (Load / Clear)

Same .hdr-btn class — icon left, label right

Download Button

.dl-btn-new · font-size: 14px · height: 44px · border-radius: var(--radius)

Icon-Only & Utility Buttons

.clip-btn 44×44 · .icon-btn 34×34 · .ubtn pill shape · .ubtn-danger red variant

AI Button

.ai-gen-btn · purple gradient · height: 38px · border-radius: 8px

Icons

All icons use Phosphor Icons (web font). Regular weight by default, fill weight for active nav items. Material Symbols is reserved for the pill icon chooser system only.

Size Reference

Context	Class	Size
Button icon	`.btn-icon`	14px
Sidebar nav	`.nav-item-icon i`	17px
Nav active (fill)	`.ph-fill`	17px
Section icon	`.sec-icon`	15px
Section chevron	`.sec-chevron`	16px
Generic icon button	`.icon-btn i`	16–18px
Sidebar toggle	`.sidebar-toggle-icon`	15px

Icon Set — Navigation Tabs

calendar-dots
Events

note-pencil
Blog Posts

megaphone
Event Post

newspaper-clipping
Case Studies

microphone
GBA

folder-simple-star
Brand Hub

gear
Dev Panel

Icon Set — Common UI

download-simple
Download

arrow-line-down
Download All

clipboard
Copy image

copy
Duplicate

lightning
Load Example

arrow-counter-clockwise
Load Default

eraser
Clear All

eyedropper
Color Pick

sparkle
What's New / AI

moon
Dark Mode

sun
Light Mode

folder-open
Projects

lightbulb
Photo Tip

images
Photo Library

image
Background Img

users
People Section

palette
Design Colors

caret-right
Sidebar Toggle

caret-down
Section Chevron

upload-simple
Upload / Import

Forms

All form fields share the same base style. Use .field-textarea for all multi-line copy inputs (title, subtitle, headline, etc.).

Text Input

Event Title

font-size: 14px · padding: 8px 10px · border-radius: var(--radius) · border: 1px solid var(--gray-200) · bg: var(--gray-50)

Canonical Textarea — .field-textarea

Event Subtitle

.field-textarea · font-size: 13px · min-height: 60px · resize: vertical
Use this class on ALL title/subtitle/copy textareas — never per-field inline styles.

Form Label

Field Label

.sg-label → in index.html use inline style="font-size:12px;font-weight:500;color:var(--gray-600)" or create .fg label

Section Accordion

The collapsible section pattern used throughout the sidebar panels. Always: icon → label → optional badge → chevron.

Content

Section content appears here when expanded.

People 1/6

Design Colors

<div class="sec" onclick="toggleSec(this)">
<i class="ph ph-[icon] sec-icon"></i>
Label Text
<span class="sec-badge">optional</span> ← optional
<i class="ph ph-caret-down sec-chevron"></i>
</div>

font-size: var(--text-sm) (11px) · weight: 700 · uppercase
border-top: 1px solid var(--gray-200) (divider line)
sec-icon: 15px, color: var(--royal)
sec-chevron: 16px, rotates -90deg when collapsed

Cards

Two main card patterns — preview cards for banner outputs, and content cards for settings/info blocks.

Banner Preview Card

Event Banner

800 × 400 px

.card · border-radius: var(--radius-lg) = 16px · box-shadow: var(--shadow)
Children: .card-hdr + .card-body + action row

Settings / Info Card (Pill Card pattern)

1

Pill Label

.pill-card · border-radius: 10px · border: 1.5px solid var(--gray-200)
Number badge: 18px circle, var(--royal) bg

Rules & Guidelines

Non-negotiables that keep the UI consistent. Follow these when adding any new component.

Icons

Do

Always place icons on the left of button text. Use <i class="ph ph-[name] btn-icon">.

Don't

Never put icons on the right, or use raw SVG when a Phosphor icon exists.

Colors

Do

Use CSS custom properties for all colors in new code.

color: var(--royal);
border-color: var(--gray-200);

Don't

Never hardcode hex values in new CSS rules.

color: #2E6FD8;
border-color: #E2E8F0;

Textareas

Do

Add class="field-textarea" to every multi-line copy field.

<textarea class="field-textarea">

Don't

Never style individual textareas with inline styles or one-off classes.

<textarea style="height:80px;font-size:13px">

Adding a New Tab

#	Step	Notes
1	Add `<button class="nav-item">` to sidebar	Use dual `.ph-reg` + `.ph-fill` icon pattern
2	Add `<div id="view-[name]">` workspace body	Hidden by default — `switchView()` shows it
3	Register in `switchView()`	Add to the views array in JS
4	Add to snapshot/restore arrays	So undo/redo covers the new tab
5	Add mobile hide rule	`#view-[name]{display:none!important}` in `@media(max-width:900px)`

Quick Reference

Need	Use
Multi-line copy field	`<textarea class="field-textarea">`
Primary action button	`.hdr-btn.hdr-btn-primary`
Download button	`.dl-btn-new` with `ph-download-simple`
Icon-only square button	`.icon-btn` (34×34)
Icon-only rounded button	`.clip-btn` (44×44)
Pill/undo button	`.ubtn` / `.ubtn-danger`
Collapsible section	`.sec` + `toggleSec(this)`
Border	`1px solid var(--gray-200)` or `1.5px` for cards
Focus ring	`box-shadow: 0 0 0 3px rgba(46,111,216,.12)`
Transition	`transition: all .15s` or specific props

Banner Studio Style Guide

Colors

Typography

Spacing

Buttons

Icons

Forms

Section Accordion

Cards

Rules & Guidelines