UI system — Blowers Creative

01

Foundation

Color, type, spacing, radius, elevation, and branding. These values are the inputs every later block must use.

Color tokens

Neutral working surfaces with amber action and semantic state colors.

Approved

Canvas#F5F7FA

Surface#FFFFFF

Text#182230

Action amber#F2A93C

Border#D8DEE8

Success#18794E

Warning#805400

Danger#B42318

Use	Canvas and surfaces stay neutral. Amber is action/focus, never neutral text. Green, gold, and red mean success, warning, and danger only.
Dark	Canvas #101318, surface #171B22, text #F1F4F8, border #303846, accent #F2A93C.
Contrast	All working text and controls must meet WCAG 2.2 AA in both themes.

Type system

System sans for product work; serif only for client artifacts.

Approved

40 / 42Page display

28 / 31Page title

20 / 25Section heading

16 / 24Body copy remains readable during dense work.

14 / 19Control label

12 / 16REF-2026-0917 · 09:42 CT

Family	Native system sans for staff. Georgia/Fraunces-style serif only for client and paper surfaces. Monospace only for codes, aligned figures, and technical metadata.
Minimum	16px body and form input; 14px common labels; 12px secondary metadata. Never below 12px.
Weight	400 body, 650 labels, 700–750 headings and primary actions.

Spacing scale

A fixed scale prevents arbitrary gaps and padding.

Approved

2xs2px

xs4px

sm8px

md12px

lg16px

xl24px

2xl32px

3xl48px

4xl64px

Controls	8px internal gap; 10×12px fields; 9×14px buttons.
Blocks	12–16px dense panel padding; 20–24px dialogs; 24–32px feature panels.
Pages	16px phone gutter, 24px tablet gutter, 32–40px desktop gutter; 48px between major sections.

Shape and elevation

Small radii and restrained depth for operating software.

Approved

4px

6px

8px

12px

Level 0
border only

Level 1
raised panel

Level 2
overlay only

Radius	4px tiny controls, 6px fields, 8px panels and buttons, 12px dialogs. Pills only for status, counts, avatars, and switches.
Shadow	Level 0 for nested content; level 1 for standalone cards; level 2 only for dock, dialog, drawer, menu, and toast.
Never	No glass panels, decorative blur, grain, floating rings, or marketing shadows in staff work.

Brand lockup

The official artwork from the Blowers Creative brand system, without reconstruction.

Approved

Asset	Use the official horizontal SVG from blowerscreative.com/brand: daylight artwork on light surfaces and dark-background artwork on ink surfaces. Never redraw the mark or retype the wordmark.
Size	168×32px product lockup; 44×44px official standalone mark where the wordmark will not fit.
Padding	The artwork has 0px internal/container padding. Its parent product bar supplies 10–16px, and no content may enter the artwork’s clear area.

02

Shell and navigation

One global structure, one local navigation layer, and one work surface. Apps do not invent their own chrome.

Staff application shell

Product bar, route navigation, page heading, action, and work content.

Approved

CRM

Sean BlowersAdministrator

Daily work

Prioritized follow-ups and active deals.

Today

Four deals need attention.

Next action

Send the approved proposal.

Desktop	52–64px product bar, 160–220px local navigation, content max 1440px, page gutter 24–40px.
Hierarchy	Global product navigation → current app sections → page title/tools → work content. Never add a second app brand system.
Phone	Product bar remains. Local navigation becomes a labeled selector or sheet; content uses 16px gutter and one column.

Global app dock

Every authorized app, a distinct icon, and account actions.

Approved

Container	6px padding, 4px gap, 12px radius, 1px strong border, overlay shadow, 12px viewport edge.
Item	66×54px minimum, 7×6px padding, 8px radius, 20px icon, 10–11px label.
Behavior	Fixed at bottom. Horizontal scroll when necessary. Current app uses amber icon plus neutral selected surface; never color alone.

Local app navigation

Sections within one application.

Approved

Container	4px padding and gap, 8px radius, subtle neutral surface.
Item	36px minimum height, 8×12px padding, 6px radius, 13px/650 label.
Phone	Replace long navigation with a clearly labeled route selector. Do not use an unlabeled scrolling strip.

03

Actions

One primary action per task region. Secondary and destructive choices remain visually separate.

Buttons

Primary, secondary, quiet, destructive, and disabled.

Approved

Size	40px minimum height, 9×14px padding, 8px content gap, 8px radius, 14px/700 label.
States	Hover rises 1px, active falls 1px, focus uses 3px ring, disabled remains readable and never shows a waiting cursor unless actually processing.
Rule	One primary action per region. Destructive action is red and separated. No double button frames.

Icon actions and action bar

Compact actions retain touch size and clear labels.

Approved

Icon only	40×40px visual control, minimum 44×44px touch target when isolated, 20px icon, required accessible name and tooltip.
Bar	12px padding, 16px group separation, 8px within groups, 8px radius.
Phone	Important actions may stack full width; keep secondary actions compact when there is enough room.

04

Forms and selection

Labels stay attached to their controls. Help, errors, choices, and continuation states remain explicit.

Text fields

Text, a fully designed dropdown, help, and exact error treatment.

Approved

Field	44px minimum height, 10×12px padding, 6px radius, 1px strong border, 16px input text.
Dropdown	Trigger: 44px minimum, 10×12px padding, 10px icon gap. Menu: 6px below trigger, 6px padding, 2px option gap, 8px radius, level-2 shadow. Option: 40px minimum, 8×10px padding, 8px icon gap.
Behavior	Selected option has a check; hover and keyboard focus have a visible row fill; Up/Down moves, Enter selects, Escape closes, and focus returns to the trigger.
Error	Red border plus the exact correction needed. Preserve entered data and keep unrelated fields usable.

Choice controls

Radio cards, checkboxes, and switches.

Approved

Account ownerCan manage members, billing, and service requests. MemberCan submit and follow assigned requests.

Email updatesSend status changes to the client.

Choice card	12px padding, 10px gap, 8px radius, 18–20px control. Selected state uses border plus a 3px inset marker.
Switch	42×24px track with 16px thumb and 3px inset. Use only for immediate boolean changes.
Rule	Descriptions remain visible. Never flatten role cards, permissions, and denial-only fields into one crowded row.

Search and filter toolbar

Search, constrained filters, and a clear reset action.

Approved

Container	10px padding, 8px gap, 8px radius, opaque surface and 1px border.
Desktop	Search receives remaining width; filters stay 120–220px; action remains compact.
Phone	Search takes full row; filters use two columns when possible and one column below 390px.

05

Status and feedback

Status always includes words or icons. Feedback stays near the action and does not shift unrelated layout.

Status badges

Neutral, success, waiting, danger, and information.

Approved

DraftPaidWaitingFailedNew

Size	26px minimum height, 4×8px padding, 6px gap, 7px dot, pill radius, 12px/700 label.
Meaning	Neutral = ordinary state; green = complete; gold = waiting/risk; red = failed/destructive; blue = new/informational.
Rule	Never use color without text or an icon. CRM stage colors are a scoped scanning aid, not semantic state.

Inline alerts

Specific cause, affected action, and recovery in context.

Approved

Billing profile needed

Add a payment method before requesting ad spend.

Proposal sent

The client received the approved version.

Proposal not sent: client email is missing

Add a recipient email in Client details, then send this proposal again. Your approved version is still saved.

Container	12×14px padding, 10px gap, 8px radius, 1px border and 4px semantic left edge.
Copy	14px/700 title names the failed action and exact cause. The 13px explanation names what to correct, where to correct it, what was preserved, and the safe next action.
Never	Never stop at “Something went wrong,” “Could not save,” or an unexplained error code. Show the safest specific cause available without exposing secrets.
Behavior	Render inside the affected section. Keep entered work and unaffected sections usable.

Toasts

Short confirmation with deliberate title-to-explanation spacing.

Approved

Changes savedThe account profile is current.

Container	Maximum 384px wide, 12px padding, 10px column gap, 8px radius, level-2 shadow, 4px semantic edge.
Copy gap	5px between the 13px/700 title and 12px/1.35 explanation. Both are separate block rows; never let their line boxes touch.
Position	Bottom right on desktop; 16px from both phone edges and above the global dock.
Timing	Do not auto-dismiss errors requiring action. Announce politely to assistive technology.

Loading and skeletons

Local, bounded, and geometrically stable.

Approved

Loading invoices…

Spinner	18px, 2px stroke, paired with a specific label. Minimum local region height 68px.
Placement	Center loading inside the exact content region being replaced, or place it inline inside the triggering button. Never fix a loader to a screen corner.
Skeleton	Match final geometry; 14px padding and 8px row gap. Remove every loading class when content arrives.
Rule	Bound every wait. Do not blank the whole page because one section failed.

Empty state

Explains what is absent and offers one relevant next step.

Approved

No invoices yet

Invoices will appear after an agreement is signed and billing begins.

Container	Minimum 190px height, 28px padding, 8px gap, 1px dashed border, 8px radius.
Copy	State the real condition, not “Nothing here.” Explain what creates the first record.
Action	Include one action only when the viewer can actually resolve the state.

06

Data and records

Dense information remains structured. Cards summarize; rows and tables handle repeated records; boards are reserved for stage work.

Summary statistics

Small, comparable facts—not promotional cards.

Approved

Open deals18+3 this week

Proposal value$84,2006 awaiting reply

Due today42 are urgent

Card	14px padding, 10px grid gap, 8px radius, level-1 shadow, 12px label, 24px tabular value.
Desktop	Two to four equal columns. Never make the cards taller than their information.
Phone	Single column or horizontal scroll only when comparison materially benefits from adjacency.

Record rows

Directory, task, app, and request records use stable columns.

Approved

Sean Blowers[email protected]Administrator

Avery King[email protected]Employee

Row	68px minimum height, 10×12px padding, 12px column gap, 38–42px identity image.
User photo	For a user record, load the badge photo from that user’s staff profile at 38×38px, circular, with object-fit: cover. Use the neutral person fallback only when no badge photo exists.
Geometry	Shared grid columns remain stable when details expand. Do not let one row shift every table column.
Phone	Hide secondary metadata before truncating identity. Move actions below only when the label cannot remain readable.

Data tables

Tabular data stays aligned, scrollable, and readable.

Approved

Deal	Stage	Owner	Value	Next action
Acme launch	Proposal	Avery King	$24,000
Northwind refresh	Signed	Sean Blowers	$18,500

Header	10×12px padding, subtle fill, strong bottom border, 11px/700 monospace uppercase only for short column labels.
Cell	52px target row height, 10×12px padding, 13–14px content, tabular figures right-aligned.
Overflow	Preserve column geometry and scroll the table. Do not crush data into collisions or remove required actions.

CRM stage board

The one scoped exception that uses a broader stage palette.

Approved

Qualified2

Acme launch$24,000 · Avery

Proposal3

Northwind refresh$18,500 · Sean

Done8

Contoso campaign$9,800 · Avery

Column	190–260px minimum width, 10px board gap, 8px radius. Header 10×12px; body 8px with 8px card gap.
Card	10px padding, 6px content gap, 6px radius, level-1 shadow. Always show stage in words.
Scope	Stage colors never become shared semantic tokens. Green and red retain success/loss meaning outside the board.

Workflow timeline

A visible sequence for onboarding, agreements, and fulfillment.

Approved

✓Account createdCompleted September 5

2Add billing methodRequired before client access

3Invite account ownerAvailable after billing is ready

Step	26px node, 12px column gap, 20px vertical continuation, 1px connecting rule.
State	Complete = check and green; current = number and amber; future = neutral. Words explain every requirement.
Rule	The primary screen shows the current task; the timeline provides context without turning everything into accordions.

07

Overlays

Dialogs confirm a focused task. Drawers contain secondary work. Menus expose contextual actions without replacing navigation.

Review dialog

Compact centered review with title, close, summary rows, and deliberate actions.

Approved

Email proposal

Confirm the version and recipient before sending.

Recipient: [email protected]
Proposal: Website launch · Version 4
Total: $24,000.00

Dialog	500px default / 720px complex maximum, 20px padding, 16px section gap, 12px radius, 16px phone padding.
Backdrop	72% neutral black. Dialog remains centered with 16px viewport clearance and bounded vertical scrolling.
Actions	Bottom right with 8px gap; stack full width on narrow screens. Close control is 40×40px, never oversized.

Account and notification drawer

Secondary work with explicit spacing inside every summary card.

Approved

Drawer	340–464px wide, 16px padding, 12px gap, 12px radius, 12–16px viewport inset, level-2 shadow.
Row	52px minimum, 8px padding, 10px column gap, 6px radius.
Copy gap	5px between the 13px/700 title and 11px/1.35 explanation inside every account or notification card.
Phone	Use a full-width bottom sheet with safe-area padding when side width leaves less than 320px for content.

Menus and tooltips

Contextual actions with keyboard support and explicit names.

Approved

Menu	240px typical width, 6px padding, 4px gap, 8px radius, level-2 shadow; item height 38px with 8×9px padding.
Tooltip	6×8px padding, 4px radius, 11–12px label. Supplemental only; never the sole visible label for a common task.
Keyboard	Arrow navigation, Escape closes, focus returns to trigger, destructive items remain separated.

08

Sign-in and gates

Identity screens use the brand without becoming marketing pages. One task is visible and every blocked state explains the next step.

Staff sign-in

The approved motion background, correct logos, and an explicit account choice for each staff audience.

Approved

Choose your staff account

Use the organization account assigned to your role.

Background	Use the existing portal WebGL smoke shader in continuous motion, full-bleed behind the sign-in card. Pointer position influences the field. Reduced-motion users receive the static first frame.
Brand	Official 48×48px Blowers Creative mark and official 24×24px Google and Microsoft marks. Never substitute letters, symbols, or improvised artwork.
Card	384px maximum, 32px padding, 24px gap, 16px radius, 16px phone outer margin.
Provider	68px minimum height, 12×14px padding, 12px internal and inter-button gaps, 8px radius. The title names who uses it; the explanation names the provider, account domain, and result.
Audience	Employees and Administrators use Google with @blowerscreative.com. Contractors use Microsoft with @goblwrs.com.
Rule	Animate the background field, never the brand artwork or access controls. Keep both choices and their explanations visible without a product tour.

Identity and restriction gate

Full-name, agreement, payment, automation, and country gates share one task frame.

Approved

Action required

Complete payment setup

Choose how you receive contractor payments before opening your assigned apps.

Account[email protected]

Expected timeAbout 2 minutes

Card	520px maximum, 24px padding, 18px gap, 12px radius, 4px state edge.
Content	One task title, reason, useful facts, and one primary continuation. Restriction states name when or how access can return.
Chrome	No global dock while blocked. Brand mark and sign-out remain available.

09

Client and artifact surfaces

Client accounts use a quieter editorial system. Contracts, signatures, and letters behave like documents while controls remain accessible.

Client account dashboard

Account-first overview with actions, requests, invoices, and available funds.

Approved

SGF Cowork

Retainer account · Active since September 2026

Available ad spend$2,450

Action needed

Approve the website content request by September 10.

Recent invoice

September retainer · Paid

Container	22px padding, 18px section gap, 12px radius, ink surface. Editorial serif only for account title and document hierarchy.
Panel	16px padding, 12px grid gap, 8px radius, opaque raised surface.
Priority	Required actions first, active requests second, invoices and funds visible without tab hunting.

Agreement and signing paper

Readable 8.5×11-style artifact with frozen terms and clear signature controls.

Approved

Blowers Creative

Retainer Services Agreement

Prepared for SGF Cowork · September 7, 2026

1. Services

Blowers Creative will provide the services selected for the active monthly budget. The approved proposal and account terms control the work authorized for each period.

2. Monthly budget

The client selects a monthly service budget. Eligible services are applied to that budget under the program terms shown in the signed version.

Client signature

Date

Paper	680px screen maximum, 58×64px desktop padding, 30×20px phone padding, no rounded paper corners in print.
Type	30px document title, 18px section heading, 15px/1.65 body serif. Controls outside paper use 14–16px system sans.
Integrity	Frozen version, identity, date, and seal status remain visible. Signing errors never replace or mutate the document body.

Letter editor

The true-size sheet is the editor; one compact toolbar follows the active caret.

Approved

Jordan Taylor
SGF Cowork
Springfield, Missouri

Jordan,

Thank you for choosing Blowers Creative. This sheet is the writing surface and the printable result.

Sheet	True 8.5×11 proportion; editor body 42×54px screen padding representing print margins.
Toolbar	48px row, 7×10px padding, 5px control gap, 32×32px tools with labels for assistive technology.
Print	Paginate into finished letter-size sheets before opening print. No pop-up dependency and no browser scaling of one tall page.

10

Kiosk and print

Touch-first kiosk screens and paper output have separate physical requirements but still use the same state meanings.

Timeclock kiosk

One instruction before a tap; recognized badge details and valid options only after the tap.

Approved

Example states

Tap a card

Example switcher	The 6px-padded example row above the frame exists only on this documentation page. The real kiosk recognizes the badge automatically and never asks the user to choose a badge type.
Frame	720px maximum, 28px padding, 22px panel gap, 12px radius. Use percentage/responsive rows, never raw fixed-pixel screen coordinates.
Idle	Before a tap, show exactly “Tap a card” and nothing else inside the kiosk frame—no reader status, instructions, or action buttons.
Identity	After recognition, use 14px padding and a 16px gap around the person, badge type, and status. The badge photo slot is 78×78px; load the returned badge photo when one exists and omit the slot when none exists.
Options	Employee and Administrator cards reveal only actions valid for that person’s current state. Actions use 72px minimum height, 16px padding, a 12px gap, and a 19px/800 label.
Other badges	Contractor badges have no photo and alternate attendance IN/OUT automatically without payroll or break options. Expired contractor badges show the exact expiration and record nothing. Printed visitor badges contain no NFC and cannot use the kiosk.
Reset	Clear the recognized person, photo, badge type, options, and result after 7 seconds, then return to “Tap a card.” Failures use exact words plus semantic color and never auto-loop a failed write.

Printed report

Ink-efficient reports and monochrome thermal labels with no application chrome.

Approved

Blowers CreativePAY PERIOD 18

Worked-time report

Employee	Regular	Overtime
Avery King	79.5	1.2
Sean Blowers	80.0	0.0

BLOWERS CREATIVE

VisitorJamie VisitorNorthwind · GuestValid onlyAUG 24 2026

Report page	Letter size, 0.5–0.65in margins represented here by 36×42px; white background and black/dark-gray text.
4×6 label	Black ink on white thermal stock only: 24px represented edge padding, 18px section gap, 14px brand-header bottom padding, 12px QR-to-copy gap, 2px outer keyline. No green, amber, red, gray fill, gradient, or photo.
Content	Repeat report header on later pages; keep row groups intact where possible; first page always contains real content. Labels keep the name, validity date, host, public ID ending, and verification QR readable at arm's length.
Remove	No dock, navigation, toolbars, toasts, focus rings, application backgrounds, or interactive-only controls in print.

11

Responsive and accessibility rules

The same hierarchy survives narrow screens, large text, keyboard use, reduced motion, and both themes.

Responsive layout

Use the Preview control above to switch this composition between desktop, tablet, and phone.

Approved

Client account

Action needed

Review the current request.

Available funds

$2,450

Breakpoints	Phone ≤480px, narrow ≤760px, tablet ≤1024px, wide ≥1280px. Break when content needs it, not by device name alone.
Gutters	16px phone, 24px tablet, 32–40px desktop. Maintain dock/safe-area clearance at the bottom.
Order	Priority content remains first. Hide secondary metadata before primary labels or actions; never use horizontal overflow for the entire page.

Accessibility and interaction rules

Required behavior with properly centered, meaningful icons.

Approved

Keyboard firstEvery action is reachable, ordered logically, visibly focused, and operable without a pointer.

Touch target44×44px target for primary touch controls; compact 40px controls must retain surrounding target space.

Text enlargementAll work remains usable at 200% text size without clipped controls, overlapping content, or lost actions.

Meaning beyond colorState uses labels, icons, or patterns as well as color in light, dark, print, and high-contrast contexts.

Motion and focusHonor reduced motion. Never animate branding. Focus uses a 3px ring with 3px offset and is never removed.

Rule icon	30×30px circular container with the correct 17×17px semantic icon centered on both axes. No letters, numbers, or artwork positioned in a bubble corner.
Contrast	WCAG 2.2 AA minimum for text, control boundaries, focus, and state in both themes.
Semantics	Use real headings, labels, tables, lists, buttons, links, dialogs, status regions, and error associations.
Testing	Keyboard, 200% text, 320px width, reduced motion, light/dark contrast, overflow, and automated accessibility checks for every route family.

Portal-wide coverage map

No route family is allowed to fall outside the chosen system.

Approved

Route family	Visual mode	Required blocks
Staff launcher and apps	Product	Product bar, local navigation, dock, page header, tables/forms/panels
People, administration, visitor badges	Product	Directories, record detail, role choices, dialogs, print
CRM, Analytics, Payouts	Product + scoped board color	Daily work, filters, tables, board, charts, deal detail, review dialogs
Ongoing Clients, Campaigns, Opportunities	Product	Guided setup, account dashboard, catalogs, request queues, status
Timeclock, Wi-Fi, Tech Store	Product / kiosk / print	Reports, handoff, catalog, cart, approvals, kiosk states
Documentation, Policies, Letters	Product + paper	Reading navigation, block editor, true-size editor, print
Staff sign-in and mandatory gates	Identity	Provider login, one-task cards, alerts, restrictions
Ongoing-client portal	Client editorial	Passkey login, account dashboard, requests, invoices, funds, contracts
Deal portal, signing, verification	Client artifact	Deal summary, document paper, signature, proof, seal status
Home, campaign, public ID	Public utility	Focused task surface, clear status, responsive and accessible controls

Audit	Check every route family at desktop and narrow widths in light and dark when the mode supports themes.
Ownership	Shared tokens and primitives control common behavior; route styles own only their specific compositions.
Acceptance	Every route must match this approved page and its documented workflow. Automated checks protect that baseline but do not replace it.

12

Implementation

Use these approved tokens and rules throughout every portal route. Route-specific styling may compose the system but may not replace it.

Use the approved system

Import the live global stylesheet, then compose with its documented tokens, role-based font aliases, padding, states, and responsive behavior without introducing route-level substitutes.

The approved UI system.

Choose your staff account

Complete payment setup

Retainer Services Agreement

1. Services

2. Monthly budget

Tap a card

Worked-time report

Client account

Use the approved system