# Kometsales Design System

> A corporate blue-scale interface anchored by Roboto-Black headlines and sharp, high-contrast white surfaces.

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

## TL;DR
Kometsales utilizes a professional monochrome-adjacent palette dominated by Slate Gray (#69727b) and deep Navy (#002848), with a high-confidence primary blue (#117ca8) used for interactive borders and emphasis. The typography is a distinct pairing of **Roboto-Black** for heavy, authoritative display headlines and **-apple-system** for clean, functional body text. Layouts are defined by large 50px internal paddings and sharp 0px border radii on most structural containers, though pricing and lead-capture cards introduce a softer 10px radius. Elevation is minimal, relying on a single light gray shadow (rgb(233, 233, 233)) to lift primary conversion cards from the white canvas.

## Signature DNA
1. **Roboto-Black Display** (Heavyweight sans-serif headlines at 44px and 36px, providing a industrial, stable feel across the homepage and about sections.)
2. **Sharp Foundation** (A non-negotiable 0px border radius on primary surfaces and section containers, creating a rigid, professional grid.)
3. **The Blue Border Accent** (Use of 2px solid #117ca8 borders on white surfaces to denote active or featured content areas, as seen on the homepage feature grid.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| None | N/A | N/A | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Page background, card surface | 27 | 1 | `--white` |
| `{colors.light}` | `#f6f9fc` | Subtle section backgrounds | 1 | 1 | `--light` |
| `{colors.dark}` | `#212529` | Primary body text | 30 | 0.8 | Computed style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{colors.gray}` | `#69727b` | Secondary text, UI labels | 58 | 1 | `--gray` |
| `{colors.ocean}` | `#117ca8` | Interactive borders, primary text | 40 | 0.8 | Computed style |
| `{colors.navy}` | `#002848` | Pricing headers, deep emphasis | 17 | 0.8 | Computed style |
| `{colors.sky}` | `#0980bb` | Tertiary text links | 3 | 0.6 | Computed style |
| `{colors.blue}` | `#007bff` | Decorative only | 1 | 1 | `--primary` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Roboto-Black | 400, 700 | Display, Headings | Roboto Black | Apache 2.0 |
| -apple-system | 400, 600, 700 | Body, UI, Navigation | Inter | System |
| Roboto | 400, 700 | Secondary Body | Roboto | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-xl}` | 80px | 120px | normal | 400 | Hero Display | `span` |
| `{type.display-lg}` | 50px | 75px | normal | 600 | Counter Numbers | `div.counterNum` |
| `{type.display-md}` | 44px | 66px | normal | 700 | Section Hero | `strong` |
| `{type.heading-lg}` | 36px | 40px | normal | 400 | Section Headings | `span` |
| `{type.heading-md}` | 32px | 32px | normal | 700 | Sub-headings | `span` |
| `{type.heading-sm}` | 22px | 26px | normal | 400 | Feature Titles | `p` |
| `{type.body-lg}` | 20px | 30px | normal | 400 | Intro Paragraphs | `p.title` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default Body | `div` |

### Principles
1. **Headlines use Roboto-Black.** Never use system fonts for display headings above 32px.
2. **Body text defaults to -apple-system.** High legibility for data-dense floral sales information.
3. **Generous line-height on display.** Large sizes (80px) use a 1.5x ratio (120px) to maintain vertical rhythm.

## Spacing
**Base unit:** 4px (approximated)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 10px | 12 |
| `{space.sm}` | 16px | 8 |
| `{space.md}` | 30px | 12 |
| `{space.lg}` | 50px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Structural containers, feature cards | 150 occurrences |
| `{radius.md}` | 10px | Pricing cards, lead forms | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgb(233, 233, 233) 0px 0px 16px 1px` | Pricing and Lead Cards | Pricing page |

## Components

### Tier 1: Foundational

#### Surface (Standard)
**Role:** Default content container.
**Pages observed:** Homepage, About.
**Spec:** Background `#ffffff` / Text `#212529` / Border `0px` / Radius `0px` / Padding `30px`.
**States observed:** Default.

#### Surface (Featured)
**Role:** Highlighting key features or services.
**Pages observed:** Homepage.
**Spec:** Background `#ffffff` / Text `#212529` / Border `2px solid #117ca8` / Radius `0px` / Padding `50px 20px 30px`.
**States observed:** Default.

### Tier 2: Patterns

#### Card (Elevated)
**Role:** Conversion-focused content (Pricing, Forms).
**Pages observed:** Pricing.
**Spec:** Background `#ffffff` / Text `#212529` / Radius `10px` / Shadow `rgb(233, 233, 233) 0px 0px 16px 1px` / Padding `14px 34px 3px`.
**States observed:** Default.

### Tier 3: Surface-specific
*Not captured in source.*

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px (standard container) |
| Section Padding | 50px (vertical) |
| Grid Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; feature grids stack vertically. |
| Desktop | 1440px | Multi-column grids (3-up for features). |

## Imagery & decoration
*   **Iconography:** Uses thin-stroke blue/teal icons for feature lists.
*   **Photography:** Professional office/lifestyle shots with high brightness and warm tones.
*   **Avoids:** Rounded corners on structural sections; heavy gradients.

## Do's
*   Use `#117ca8` for 2px borders on white cards to indicate "Featured" status.
*   Set all primary headlines in **Roboto-Black** at weight 700.
*   Maintain `0px` border radius for all standard UI panels.
*   Use `#69727b` for secondary descriptive text to maintain hierarchy.
*   Apply `50px` padding for internal section spacing.

## Don'ts
*   **Wrong:** Using `#007bff` (Primary Blue) for text or buttons. **Right:** Use `#117ca8`. **Reason:** `#007bff` is a system token not used in the rendered brand UI.
*   **Wrong:** Applying border-radius to the main feature grid. **Right:** Keep it `0px`.
*   **Wrong:** Using Roboto-Black for long-form body text. **Right:** Use -apple-system or Roboto Regular.
*   Do not use shadows on standard content surfaces; reserve for conversion cards only.

## Similar brands
*   LogMeIn
*   Salesforce (Classic)
*   Zendesk (Enterprise)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #117ca8;
  --color-secondary: #69727b;
  --color-navy: #002848;
  --font-display: 'Roboto-Black', sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --radius-sharp: 0px;
  --radius-card: 10px;
  --shadow-elevated: 0px 0px 16px 1px rgba(233, 233, 233, 1);
}
```

## Agent prompt examples
*   "Create a feature card with a 2px solid #117ca8 border, 0px border-radius, and 30px padding using Roboto-Black for the title."
*   "Generate a pricing section using #ffffff cards with a 10px radius and a soft rgb(233, 233, 233) shadow."
*   "Design a hero section with an 80px headline in Roboto-Black and a 120px line height."

## Known gaps
*   Button hover states were not explicitly captured in the computed style evidence.
*   Mobile-specific font size scaling for display text was not fully sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://kometsales.com | 1440px | 2026-06-06 |
| Pricing | https://kometsales.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://kometsales.com | 390px | 2026-06-06 |