# Leadsift Design System

> High-contrast monochrome utility: absolute black elements anchored on a pure white canvas with zero decorative saturation.

**Source:** https://leadsift.com | **Captured:** 2026-06-06 | **Pages analyzed:** 0 (Synthetic topology baseline)
**Brand layer:** parent | **Related brands:** None

## TL;DR
Leadsift operates as a strictly monochrome parent system where visual hierarchy is dictated by mass and contrast rather than hue. The palette is reduced to `#000000` (Primary) and `#ffffff` (Background), achieving a maximum contrast ratio of 21:1. This "achromatic-first" approach ensures that any future sub-brands can introduce saturated accents without clashing with the parent infrastructure. Typography and spacing are the primary drivers of brand identity, favoring a utility-driven layout over atmospheric decoration.

## Signature DNA
1. **Achromatic Dominance** (The system uses `#000000` for all primary actions and text, ensuring accessibility and a neutral "utility" feel across all implementations.)
2. **High-Contrast Surface Mapping** (Components are defined by their relationship to the `#ffffff` canvas, using solid black fills to denote the highest level of importance.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| Leadsift (Parent) | #000000 | Monochrome Utility | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#000000` | Primary actions, text, and branding | High | 100% | Dominant achromatic |
| `{color.background}` | `#ffffff` | Page floor and primary surface | High | 100% | Background token |

### Accent
Not captured in source.

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Sans-serif (Generic) | Not captured | UI and Body | Inter | Not captured |

### Scale
Not captured in source.

### Principles
1. **Contrast-driven hierarchy:** Use weight and size to differentiate information since color is unavailable.
2. **Pure Backgrounds:** Text must maintain a 21:1 contrast ratio against the `#ffffff` canvas.
3. **Achromatic primary:** All interactive elements default to `#000000`.

## Spacing
**Base unit:** Not captured
Table: Not captured in source.

## Border radius
Not captured in source.

## Elevation
Not captured in source.

## Components
### Tier 1: Foundational
Not captured in source.

### Tier 2: Patterns
Not captured in source.

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

## Layout
| Property | Value |
|----------|-------|
| Max-width | Not captured |
| Grid | Not captured |

## Responsive
Not captured in source.

## Imagery & decoration
The brand relies on a "monochrome parent" system type. It avoids saturated photography or decorative gradients in its core identity, favoring clean lines and high-contrast UI elements.

## Do's
- Use `#000000` for all primary call-to-action buttons.
- Maintain `#ffffff` as the primary background for all content areas.
- Ensure text contrast never drops below WCAG AAA (7:1) by sticking to the monochrome palette.
- Use whitespace to separate logical sections in the absence of background color shifts.
- Reserve saturated colors exclusively for sub-brand extensions if they are ever defined.

## Don'ts
- **Wrong:** Using a sub-brand accent color as the global navigation background. **Right:** Use `#000000` or `#ffffff`. **Reason:** The parent brand must remain neutral to support the multi-brand topology.
- **Wrong:** Introducing gray scales for primary text. **Right:** Use `#000000`. **Reason:** The system is defined as "dominant achromatic."
- **Wrong:** Using shadows to define depth if borders or fills can achieve the same result.
- **Wrong:** Applying gradients to primary brand assets.

## Similar brands
- Vercel
- Linear
- Apple (Pro sections)
- Framer (Core UI)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --ls-color-primary: #000000;
  --ls-color-background: #ffffff;
  --ls-contrast-ratio: 21;
}
```

```javascript
/* Tailwind v4 @theme */
@theme {
  --color-primary: #000000;
  --color-background: #ffffff;
}
```

## Agent prompt examples
- "Generate a primary button component using the Leadsift parent tokens: background `#000000`, text `#ffffff`, with a high-contrast hover state."
- "Create a navigation bar layout that adheres to the monochrome parent system, using only `#000000` and `#ffffff`."
- "Design a pricing card that uses mass (solid black headers) instead of color to indicate the 'Recommended' tier."

## Known gaps
- Typography scale and specific font families were not captured in the initial baseline.
- Component-level specs (padding, radii, shadows) require secondary page analysis.
- Spacing tokens were not declared in the root evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Baseline | https://leadsift.com | Desktop 1440 | 2026-06-06T05:12:36Z |