Aa Bb Cc 0123
Headlines, hero copy, eyebrow labels, page titles inside the operator product.
Brand
The SnagATime brand source of truth.
Colors, typography, logos, icons, and design tokens that show up on every SnagATime surface — from the public directory to the operator product. Designers, partners, and engineers should treat this page as canonical.
§1 · Colors
Color palette
Every color used across SnagATime is named here. Click a swatch to copy its hex.
Brand
Neutrals
Semantic
§2 · Typography
Type system
Three typefaces, served from Google Fonts. Display sets the brand voice; body carries every block of running text; mono shows quantitative or token content.
Aa Bb Cc 0123
All running prose, form labels, table content, navigation. Default for paragraphs.
Aa Bb Cc 0123
Numeric KPIs, token names, code, anything that should read as quantitative.
Type scale
--size-heroMake every tee time visible.
--size-h1A real operating system for indoor golf.
--size-h2Live bays and bookings, in one place.
--size-h3Today's opportunities
--size-bodyMembers are using 86% of included hours this month — consider an Unlimited tier or a +10-hr add-on.
--size-labelRevenue today
--size-captionFriday, May 30 · 4:42 PM
--size-eyebrowAfter approval
§3 · Logos
Logo lockups
Four official lockups. Pick the variant that fits the background; never recolor or stretch.
§4 · Icon mark
Icon and favicons
Two icon variants: the canonical Teal S mark used across the site, and a Gold accent mark reserved for premium contexts.
§5 · Tokens
Spacing, radii, shadows, layout
Geometry primitives that hold the whole system together. Same names in the marketing site and the operator product.
Spacing scale
--sp-14px
--sp-28px
--sp-312px
--sp-416px
--sp-520px
--sp-624px
--sp-832px
--sp-1040px
--sp-1248px
--sp-1664px
--sp-2080px
--sp-2496px
Corner radii
--r-sm6px
--r-md12px
--r-lg20px
--r-full9999px
Elevation
--shadow-smsubtle lift
--shadow-mdcards & tiles
--shadow-lgmodals & popovers
Layout primitives
--container
1120px
Maximum content width on the marketing site and inside the operator product's main column.
--touch-target-min
44px
Minimum hit area for any interactive element. Applies to buttons, nav items, swatches, and tile actions.
§6 · In progress
Not yet documented
These sections are being written. Each card describes the scope; if you need any of these answered before this page catches up, message the brand keeper.
Clear space + minimum size
Required padding around every logo and icon mark, and the smallest size each can be reproduced (web + print). Will include do-not-cross gridlines and an at-size validation strip.
Don't-dos
Recoloring, stretching, rotating, drop-shadowing, overlaying on busy photography, placing on insufficient-contrast backgrounds — visualized as red-X examples next to correct uses.
Voice and tone
How SnagATime sounds in product copy, marketing copy, transactional messages, and operator-facing language. Capitalization (SnagATime is one word, exact casing), pronunciation, and the "we run the boring parts" voice.
Photography style
Direction for lifestyle, venue interior, and product-in-context photography. Will include shot list, lighting notes, and lens guidance for facility owners shooting their own listing imagery.
Iconography conventions
The outline-SVG icon system used in the operator dashboard (24×24, single-path, currentColor) and on marketing pages. Will document stroke width, corner treatment, and the supply chain for new icons.
Marketing vs. product distinction
When to use the lighter marketing palette vs. the darker product chrome (navy sidebar on the operator dashboard). Decision tree for hybrid surfaces like the operator login page and the claim-listing iframe preview.
Accessibility pairings
Approved foreground/background combinations against WCAG AA contrast. Will include a checked matrix for every brand + neutral pairing and notes on amber-on-white edge cases.
Partner co-branding
How venues, suppliers, and integration partners may place their mark alongside SnagATime. Lockup proportions, separator treatments, and approval workflow.