# Homesome Design System

> High-contrast monochrome utility anchored by geometric Montserrat headings and generous white space.

**Source:** https://homesome.com | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Homesome utilizes a strictly achromatic palette to position itself as a neutral, high-utility infrastructure for grocery commerce. The system is built on a pure white canvas (#ffffff) with deep charcoal (#222222) and soft gray (#333333) typography. Visual interest is generated through geometric Montserrat display type (600 weight) and large-scale card components with 16px radii. The brand avoids saturated colors in its core UI, reserving them exclusively for product screenshots and partner logos, ensuring the platform remains a "white-label" feeling foundation for its retail partners.

## Signature DNA
1. **Achromatic Infrastructure** (The UI uses #ffffff and #222222 exclusively for structural elements, allowing colorful grocery product imagery to provide the visual "flavor" without brand clashing.)
2. **Geometric Display Scale** (Montserrat at 40px with -0.4px tracking creates a modern, architectural header style that feels stable and enterprise-ready.)
3. **Softened Utility** (The use of 16px and 24px border radii on cards and 999px on buttons softens the "industrial" feel of the monochrome palette.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, card background, primary button text | 30 | 1.0 | Computed |
| `{color.ink.primary}` | `#222222` | Primary text, button backgrounds, borders | 35 | 0.8 | Computed |
| `{color.ink.secondary}` | `#333333` | Body text, secondary headings | 45 | 0.8 | Computed |
| `{color.border.subtle}` | `#e8e8e8` | Card outlines, dividers | 18 | 0.8 | Computed |
| `{color.ink.muted}` | `#b0b0b0` | Captions, disabled-style text | 8 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.dark}` | `#1a1a1a` | Dark section backgrounds (footer/stats) | 2 | 0.8 | Computed |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| Montserrat | 400, 500, 600 | All headings, body, and UI | Montserrat (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|---|
| `{text.display}` | 40px | 50px | -0.4px | 600 | Hero/Section H2 | `h2.elementor-heading-title` |
| `{text.h3}` | 32px | 40px | -0.32px | 600 | Feature headings | `h3` |
| `{text.h3.alt}` | 32px | 32px | normal | 400 | Icon-adjacent titles | `div.elementor-icon` |
| `{text.h4}` | 20px | 25px | normal | 600 | Small headings | `p.elementor-heading-title` |
| `{text.body}` | 16px | 24px | normal | 400 | Standard prose | `div.elementor-element` |
| `{text.button}` | 16px | 20px | normal | 500 | CTA labels | `a.elementor-button` |
| `{text.label.caps}` | 14px | 14px | 2.1px | 600 | Navigation, uppercase labels | `a:nth-of-type(1)` |
| `{text.caption}` | 12px | 15px | normal | 400 | Small annotations | `span` |

### Principles
1. **Tight Display Tracking:** Larger headings (32px+) use negative tracking (-0.32px to -0.4px) to maintain geometric density.
2. **Achromatic Hierarchy:** Importance is signaled by weight (600 vs 400) and hex value (#222222 for headers vs #333333 for body), never color.
3. **Uppercase Spacing:** Small labels (14px) use significant letter-spacing (2.1px) for legibility and "premium" feel.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 16px | 11 |
| `{space.sm}` | 24px | 8 |
| `{space.md}` | 32px | 9 |
| `{space.lg}` | 40px | 11 |
| `{space.xl}` | 80px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers | 55 occurrences |
| `{radius.card}` | 16px | Standard content cards | 17 occurrences |
| `{radius.panel}` | 24px | Large feature blocks | 5 occurrences |
| `{radius.pill}` | 999px | CTA buttons, input fields | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `0px 34px 80px 0px rgba(0, 0, 0, 0.07)` | Floating feature cards | Card component (6 occurrences) |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (Book a Demo)
**Pages observed:** https://homesome.com
**Spec:** Background: `#222222` / Text: `#ffffff` / Radius: `999px` / Padding: `11px 30px` / Typography: `Montserrat 500`
**States observed:** Default | Hover: captured

#### Secondary Button (Outline)
**Role:** Sub-feature navigation (Check Details)
**Pages observed:** https://homesome.com
**Spec:** Background: `transparent` / Text: `#222222` / Border: `1px solid #222222` / Radius: `999px` / Padding: `11px 26px`

### Tier 2: Patterns

#### Feature Card
**Role:** Content grouping for services/benefits
**Pages observed:** https://homesome.com
**Spec:** Background: `#ffffff` / Border: `1px solid #e8e8e8` / Radius: `16px` / Padding: `24px` / Shadow: `none`

#### Testimonial Card
**Role:** Social proof blocks
**Pages observed:** https://homesome.com
**Spec:** Background: `#ffffff` / Border: `1px solid #e8e8e8` / Radius: `16px` / Padding: `40px 32px` / Typography: `16px body`

### Tier 3: Surface-specific

#### Stats Block
**Role:** Numerical performance indicators
**Pages observed:** https://homesome.com
**Spec:** Background: `#1a1a1a` / Text: `#ffffff` / Radius: `16px` / Padding: `40px` / Typography: `Montserrat 600`

#### Newsletter Input
**Role:** Footer conversion
**Pages observed:** https://homesome.com
**Spec:** Background: `#f7f7f7` (inferred) / Border: `1px solid #e8e8e8` / Radius: `999px` / Padding: `0px 20px`

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1140px |
| Section Vertical Gap | 80px |
| Grid Gutter | 24px |

## Imagery & decoration
- **Product UI Overlays:** Heavy use of screenshots with 16px rounded corners floating over the canvas.
- **Achromatic Icons:** Line-art icons using #222222 strokes.
- **Partner Logos:** Displayed in a grayscale or natural color grid, separated by subtle #e8e8e8 borders.

## Do's
- Use #ffffff as the primary background for all content sections.
- Apply -0.4px letter spacing to Montserrat headings at 40px.
- Use 16px border-radius for all content-containing cards.
- Ensure primary CTAs are #222222 pills with white text.
- Maintain a minimum 80px vertical gap between major sections.

## Don'ts
- **Wrong:** Using `#0693e3` (Vivid Cyan Blue) for a primary button.
- **Right:** Use `#222222`.
- **Reason:** Saturated colors in the token set are for sub-brand/product signals only; the parent brand is strictly monochrome.
- Do not use sharp corners (0px) for buttons or cards; the brand requires pill or 16px radii.
- Do not use weights heavier than 600 for Montserrat headings.
- Do not place dark text on dark backgrounds; use #ffffff for all text in `{color.accent.dark}` sections.

## Similar brands
- Shopify (Admin/Infrastructure side)
- Stripe (Clean typography and card-based layout)
- Flexport (Monochrome utility with geometric sans)

## Quick start

### CSS Custom Properties
```css
:root {
  --hs-color-white: #ffffff;
  --hs-color-black: #222222;
  --hs-color-gray: #333333;
  --hs-color-border: #e8e8e8;
  --hs-font-main: 'Montserrat', sans-serif;
  --hs-radius-card: 16px;
  --hs-radius-pill: 999px;
  --hs-shadow-card: 0px 34px 80px 0px rgba(0, 0, 0, 0.07);
}
```

## Known gaps
- Hover and Active states for buttons were not explicitly detailed in the CSS variable output, though visual evidence suggests a slight opacity shift.
- Mobile-specific typography scale (breakpoints) was not captured in the evidence provided.
- Success/Error semantic colors were present in tokens but not observed in page components.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://homesome.com | Desktop 1440px | 2026-06-06T05:08:10Z |