Color
One loud color: the sunset gold to coral gradient, spent scarcely. Everything else is cream, off-white, navy, and quiet sage. Blue, teal, sky, and steel are dead on this brand.
The gradient · the one loud color
The only place --e-cta (the glow) appears outside a primary CTA. One loud moment per view.
Brand anchors
Status · warm-tuned, never cold
Status fills always pair with a darkened text tone for AA at small sizes (see Badges). The raw chips above are the source hues.
Typography
Manrope for display (premium, even, low-contrast, not chunky), Figtree for body (warm, friendly neighbor voice). EB Garamond italic for scarce pull-quotes. The contrast of premium display and warm body is the "approachable quality" thesis. (Locked A2, 2026-06-13.)
Display scale · Manrope
Body · Figtree · accent · EB Garamond italic
You run your business. We run the website.
lead · 18px · lh 1.55Real plain-spoken copy a busy home-service owner reads on their phone between jobs. Short sentences. Benefit first. The measure stays near 60 to 68 characters so the eye never has to hunt for the next line.
base · 15px · lh 1.55 · ~64ch"I never touch it. It just books me jobs."
pull-quote · EB Garamond italic · 24pxSpacing & Radius
4px grid. Curves by default. A square-cornered card is an error on this brand.
Spacing scale · 4px grid
Radius
Elevation
Soft warm clay shadows. A white top lip catches the upper-left key light, over a warm-tinted drop. Never cold neutral grey. The sunset glow is its own thing: it carries no depth, it signals "the one alive element."
Cards float on e1, lift to e2 on hover. Modals and toasts sit on e3. The glow is scoped to the primary CTA only: one bloom per view.
Logo
4-point sunset-gradient mark + "webvegas" navy wordmark. Always the real SVG from brand/Logo, never text. Size it as brand presence, not a tiny icon. Build to the context target (nav 48px, sidebar 56px, hero 88px), never the floor (signature ≥44px / 120px wide). If the wordmark reads smaller than the nav text, it's too small.
Primary — horizontal signature
Default lockup for nav, email headers, decks, footers. The wordmark stays navy on light grounds. A white-knockout asset also exists for the rare photo / dark-media placement (chip below).
For photos / dark media onlyStacked lockup
For square or centered placements: social avatars at large size, app splash, merch, vertical sidebars, badges. Mark sits centered above the wordmark. A white-knockout stacked asset also exists for photo / dark media.
Mark only
The mark alone, where the wordmark would be too small to read (favicon, app icon, social avatar, watermark). The steel-plate is a contained ICON treatment for social avatars and app icons only — never a page or section background. App / favicon / PWA sizes are pre-built on the Favicon & App Icons board.
Clear space & minimum size
Keep clear space on all sides equal to the height of the mark. Nothing (text, other logos, edges) intrudes.
Minimums (numbers, not a render): horizontal signature never below 44px tall / 120px wide. Mark never below 24px. Below those, switch to the pre-built favicon set, never shrink the lockup.
Never
- Recreate the logo as live text or a font. It is always the real SVG.
- Recolor the mark or wordmark. The gradient and the navy are fixed.
- Stretch, condense, rotate, skew, or add a drop shadow / outline / glow to the lockup.
- Place the light (navy) logo on a dark or busy background. Use the white knockout or the steel plate instead.
- Shrink it below the minimums, or let the wordmark read smaller than the surrounding nav text.
- Use the steel plate as a page or section background. It is an icon treatment only.
Download individual files
SVG is the master vector (scales anywhere, exports to EPS / AI from there). PNG is transparent at 1024px. PDF is print-ready, one logo per page. Or grab everything with the button at the top.
| Variant | Vector | Raster | |
|---|---|---|---|
| Horizontal · color | SVG | PNG | |
| Horizontal · white | SVG | PNG | |
| Horizontal · on navy plate | SVG | PNG | |
| Stacked · color | SVG | PNG | |
| Stacked · white | SVG | PNG | |
| Mark · color | SVG | PNG | |
| Mark · white | SVG | PNG | |
| Mark · steel plate | SVG | PNG | |
| Mark · white plate | SVG | PNG | |
| Avatar · circle | SVG | PNG | |
| App icon · tile | SVG | PNG |
Monty
The locked mascot and AI chat persona. Consume these assets; never redesign. WebVegas-owned surfaces only, never on a client spec site or the client AI Front Desk.
Buttons
The primary CTA is a sunset-gradient pill, surfaced with a bevel + glow. One primary per zone; secondary is filled-tonal (same bevel, no glow), tertiary is text.
Variants
Sizes
States
Badges & Pills
Badges are TEXT, not buttons. They label state and never invite a click. Every fill carries a darkened text tone for AA at 13px.
Forms
Recessed inputs (they sink in), md radius, sunset focus ring. The field wraps label, hint, and error. The opposite physical model of a raised button.
Cards
Default surface, lg radius, e1 shadow. Warm variant for human content; feature for value props; interactive lifts to e2 on hover.
Default card
Surface white, lg radius, warm clay shadow.
Warm card
Cream tint for the human content: testimonials, founder, guarantee.
Interactive
Hover me. Lifts to e2. Use for clickable tiles.
Feature card
xl radius, bigger pad, e2. Pairs a bespoke clay asset (or Monty) with a value prop.
Stat tiles
Dashboard KPI with trend. Big Manrope number, uppercase label, colored trend.
call New leads
34
trending_up +12 this weekevent_available Jobs booked
18
trending_up +5star Reviews
4.9
trending_up +3 newvisibility Site visits
1.2k
trending_down -4%Banners & Toasts
Inline banners for section-level status; toasts for transient confirmation (navy, spring pop).
Tables & Lists
Rounded outer frame, flat inner rows (the one intentional flat surface). List rows for feeds.
Table
| Lead | Source | Status | When |
|---|---|---|---|
| Maria G. | Website chat | Booked | 2h ago |
| James T. | Call | New | 5h ago |
| Priya N. | Form | Followed up | Yesterday |
List rows
Nav & Tabs
Floating pill header for marketing; segmented pill tabs for views.
Marketing header
Tabs
Modal
xl radius, e3 overlay shadow, spring pop. Shown inline here (not a live overlay) so the catalog renders it statically.
Cancel your plan?
Your site stays yours to keep. Hosting, the AI Front Desk, and management stop. You can turn it back on anytime.
Empty state
Clay art + warm copy + one action. Never a cold "no data" message.
No leads yet. That's about to change.
Your site is live and getting found. The first leads land here. Want to send your first review request?
Dashboard shell
Light mist sidebar (active item is sunset), white main. Light and airy throughout. Compose stat tiles, lists, and cards inside.
Desert Shine Cleaning
call Leads
34
event_available Booked
18
star Rating
4.9