Loading...
The SalesOS
design system.
Logos, color, type, Homebase and the details behind the website. A working reference for designers, developers and collaborators.
Original Homebase selected · Chakra Petch wordmark selected01 / LOGO
The mark and the name.
Original Homebase is selected. The Chakra Petch wordmark emphasizes OS.
Keep it together. Preserve the supplied spacing and proportions.
Give it space. Leave half the mascot’s width clear around the logo.
Keep it sharp. Use SVG. Avoid stretching, blur and effects.
02 / COLORS
The whole palette, with a purpose.
The site uses two lime families and several purple surfaces. This inventory makes those differences explicit. Click a swatch to copy its value.
Identity and navigation
Website surfaces
Actions and states
Text and boundaries
Declared status palettes
Defined for UI states, not additional brand accents.
Identity lime #D4F553 and website action lime #C3FF00 are both present today. This guide documents them without changing other pages.
03 / TYPOGRAPHY
Display, interface and detail.
Current type roles across the website. Wordmark experiments do not change site typography.
DISPLAY / MACKINAC PREVIEWOne connected
One connected
system.
Editorial section headings; Georgia fallback is shown here. The current preview is externally hosted. Font files are not included.
INTERFACE / GEISTCapture.
Capture.
Convert.
Compound.
Body, navigation and controls. The homepage hero uses system sans at weight 700.
DETAIL / GEIST MONO01 / INQUIRY
01 / INQUIRY
02 / FOLLOW-UP
03 / NEXT STEP
Labels and reference values. Montserrat is also loaded for existing site uses.
| Role | Size / line height | Weight |
|---|---|---|
| Homepage hero | 42–64px / 1.12 | 700 |
| Pricing heading | 40–64px / 1.12 | 500 |
| Section heading | 32–48px / 1.15 | 500 |
| Body | 17–18px / 1.6–1.65 | 400–500 |
| Header navigation | 15px / 20px | 600; active 700 |
| Footer links | 14px / 21px | 500 |
| Eyebrow | 11px / 1.5 | 400 |
04 / PATTERNS
Texture stays in the background.
Pricing waves, homepage diagonals and the brand grid. Keep copy on a calm surface and preserve the low contrast.
05 / HOMEBASE
A home for the whole system.
The selected house has black eyes, an open doorway and no arms. Homebase B remains available as a backup.
One fixed 20 × 20 grid.
Render from the SVG. Preserve the roof, eyes and doorway. Use integer multiples where possible. No added limbs or changes to the master.
06 / COMPONENTS
The details you can reuse.
Live examples of the existing Button component, plus the pricing page’s softer lime treatment.
Calls
Messages
Calendar
Follow-up
Workflow
Lucide outline icons inherit their label color. Header icons: 18px. Footer contact and social icons: 20px.
Preview only. Nothing is submitted.
ConnectedAwaiting response
Example accordion
Use a clear question, concise answer and visible keyboard focus.
Cards: 12–24px radius. Dividers: white at 5–12% opacity. Preserve visible focus outlines.
07 / ILLUSTRATIONS
Show the next step.
Dark windows, clear status and lime highlighting the next action. Label demonstrations as illustrative.
● ● ●SalesOS / JobLoopIllustrative example
01 / Capture
New inquiry
Form, chat or call
02 / Convert
Follow-up
Conversation and booking
03 / Compound
Stay connected
Reviews and referrals
Use example activity, not invented customer results. Homepage scenes cover forms, chat, calls, booking, estimates, reviews, referrals and check-ins.
08 / MOTION
Small movements. Clear feedback.
Use movement to explain a change. Preserve the rotating headline and pause continuous scenes offscreen.
Homebase motion study
A gentle 3px lift. Optional exploration, not an approved global animation.
Navigation: 150ms color transitions. Footer links use 200ms.
Scene changes: short opacity and position transitions. Avoid competing loops.
Reduced motion: keep the character static and remove nonessential animation.
09 / DOWNLOADS
Files for the next thing you make.
The guide records what is selected and what is still being explored.
Use the square social profile image for profile uploads. The mascot has room for circular cropping. Favicon downloads include SVG, ICO and PNG sizes.
Social profile picturePNG · 1024 × 1024↓Social profile masterSVG↓Browser faviconICO · 16, 32, 48px↓Small faviconPNG · 32 × 32↓Apple touch iconPNG · 180 × 180↓App iconPNG · 192 × 192↓Large app iconPNG · 512 × 512↓Brand guideMarkdown↓Declared color tokensJSON↓CSS color inventoryJSON + source paths↓Selected Original HomebaseSVG↓Selected Original HomebasePNG↓Square app iconSVG↓Working header logoSVG · embedded Chakra Petch↓Geist font licenseText↓
Design archive and mascot explorations
MASCOT EXPLORATIONS
Homebase, refined.
The original plus three refinements. Compare the roof, doorway and silhouette at the size they will actually appear.
Original · selected
The selected original Homebase design.
ACTUAL SIZE
SalesOSClear roof
A taller roof with distinct eaves. Same simple face.
ACTUAL SIZE
SalesOSOpen door · backup
Alternate Homebase mascot, with an open doorway.
ACTUAL SIZE
SalesOSChimney
An offset chimney gives the silhouette a recognizable detail.
ACTUAL SIZE
SalesOSEarlier explorations, 01–14
01 / Scout
02 / Notch
03 / Bot
04 / Spark
05 / Buddy
06 / Chip
07 / Dash
08 / Pebble
09 / Switchboard
10 / Dispatch
11 / Doorbell
12 / Beacon13 / Homebase
14 / OrbitOriginal Homebase is selected and appears in the header. Homebase B is preserved as the backup. Lettering is held constant so you can compare the characters.