# SalesOS design reference

Updated September 23, 2026.

## Decisions
Homebase B is selected. Original Homebase 13 is the backup. Wordmark font remains provisional. Current working wordmark: white Sales, heavier lime OS; Geist at 26px, mascot 22px, gap 6px.

## Palette
This is an inventory, not a global color migration. Identity and website action limes coexist.

### Identity and navigation
- Brand navy: #15132C (Brand and pricing page)
- Mascot lime: #D4F553 (Homebase B and OS wordmark)
- Nav supporting: #767FAA (Header and footer links)
- White: #FFFFFF (Headings and active navigation)

### Website surfaces
- Page: #151233 (--background-1)
- Card / header: #231F42 (--background-2 / --component-1)
- Hover surface: #2D2856 (--component-2)
- Active surface: #37326A (--component-3)
- Pricing hero: #201B3C (Pricing hero)
- Feature band: #19162F (Pricing features)
- Demo window: #18152F (Homepage illustration)
- Demo panel: #211D3D (Homepage hero panel)

### Actions and states
- Website lime: #C3FF00 (--accent-primary)
- Lime hover: #A8E000 (--accent-primary-hover)
- Lime depth: #7CB800 (--accent-primary-depth)
- Pricing depth: #9DB930 (Pricing button lower edge)
- Light button: #F3F1E9 (Pricing secondary button)
- Light depth: #BDBBAD (Pricing secondary lower edge)

### Text and boundaries
- Primary text: #EDEDED (--foreground-1)
- Secondary text: #A1A1A1 (--foreground-2)
- Pricing body: #B6B4C7 (Pricing supporting copy)
- Demo text: #A99FBF (Journey illustration labels)
- Control border: #8079C4 (--gray-control)
- Solid border: #3D3770 (--gray-4)
- Default border: rgba(255,255,255,0.08) (--border-1)
- Hover border: rgba(255,255,255,0.12) (--border-2)

### Declared status palettes
- Blue: #52A9FF (--blue-9)
- Red: #FF6369 (--red-9)
- Amber: #FFB224 (--amber-7)
- Green: #63C174 (--green-9)
- Teal: #0AC5B3 (--teal-9)
- Purple: #BF7AF0 (--purple-9)

## Typography
Homepage hero: system sans, 700, 42–64px / 1.12.
Editorial sections: existing Mackinac Preview with Georgia fallback, 500, 32–48px / 1.15. The preview font is externally hosted; verify appropriate licensing before production distribution. It is not bundled in the asset kit.
Geist: body/UI. Geist Mono: small labels and technical values. Montserrat is loaded for existing uses.
Header: 15px/20px, weight600 at rest,700 active. Footer links14px/21px weight500.

## Homebase
Use homebase.svg, fixed20x20 grid. Preserve roof, eyes and doorway. No arms. Use SVG; prefer integer scale factors. Original backup: explorations/13-homebase.svg.
White and navy adaptations are supplied for background contrast. Square icon: homebase-icon.svg.

## Patterns
pricing-wave.svg: extracted pricing hero pattern.
diagonal-panel.svg: homepage diagonal panel treatment.
pixel-grid.svg: brand reference dot grid.
Keep these low contrast and behind content. Do not add competing textures.

## Components
Use existing components/ui/button.tsx for site controls; pricing buttons use their own CSS.
Card radii12–24px. Borderswhite at5–12% opacity. Inputs use gray-control #8079C4.
Lucide icons inherit currentColor; header18px, footer20px.
Preserve focus indicators. Hover rules should require hover:hover and pointer:fine.

## Illustrations
Dark windows, clear status, lime next action. Label fictional activity Illustrative example.
Never invent results, earnings, testimonials or customer data.
JobLoop: Capture, Convert, Compound. People scope, price and perform jobs.

## Motion
Navigation color150ms; footer200ms. Respect prefers-reduced-motion.
Preserve rotating homepage headline. Pause continuous scenes offscreen.
Homebase bob is an optional demonstration only, not a global approved behavior.

## Asset status
draft-homebase-logo-dark/light/white: working wordmarks, not final typography approval.
homebase.svg and PNG: selected mascot.
site-tokens.json: declared global color tokens.
color-inventory.json: stylesheet color occurrences with relative source paths, not a claim every value is active.
Geist-OFL.txt accompanies embedded Geist in the logo exports.
Previous Sidekick and all explorations remain preserved.

### Light and neon mascot treatments

On light surfaces, use `homebase-light.svg` or its PNG export: lime body, crisp navy outline and black eyes. On neon lime (#C3FF00), use `homebase-white-outlined.svg` or its PNG export: white body, crisp navy outline and black eyes. The original master and backup remain unchanged.

### Current mascot selection

Original Homebase (concept 13) is selected again. Header and current exports use the original silhouette. Homebase B is retained in explorations and backups. Light and neon treatments keep their navy outlines.

### Selected wordmark typography

Chakra Petch (option 25) is selected for the logo: medium Sales, bold neon OS. This supersedes earlier wordmark exploration notes. Website body typography is unchanged.