# Expansys Design System

> Absolute monochrome minimalism defined by high-contrast black ink on a pure white void.

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

## TL;DR
Expansys operates on a strict monochrome system where the canvas is pure white (#ffffff) and the primary visual anchor is the black wordmark (#000000). The identity is characterized by extreme whitespace and a lack of decorative UI elements, relying entirely on typographic presence and high-contrast grounding. There are no secondary accent colors or complex surface elevations captured in the current brand scope. The system is built for maximum legibility and a "blank slate" architectural feel.

## Signature DNA
1. **The Void Canvas** (The use of #ffffff as a primary structural element rather than just a background, creating a sense of infinite space around the brand mark.)
2. **High-Contrast Grounding** (The binary relationship between #000000 and #ffffff, ensuring 21:1 contrast ratios for all brand signals.)

## 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 |
|-------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background and layout floor | High | 100% | Rendered background |
| `{color.ink}` | `#000000` | Primary wordmark and potential text color | High | 100% | Dominant achromatic |

### Accent
Not captured in source.

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Sans-serif (Custom/System) | 400, 700 | Brand wordmark and navigation | Inter | Proprietary/System |

### Scale
Not captured in source.

### Principles
1. **Monochrome Hierarchy:** Importance is signaled through scale and weight rather than color shifts.
2. **Extreme Tracking:** The brand mark exhibits wide, intentional letter-spacing to command the white space.
3. **Achromatic Priority:** Black is the only permitted "active" color for primary brand signals.

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

## Border radius
Not captured in source.

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | 0 | All elements sit flush on the canvas | Primary landing |

## Components
### Tier 1: Foundational
#### Brand Mark
**Role:** Primary identity anchor
**Pages observed:** https://expansys.com
**Spec:** Color: #000000 / Typography: Bold Sans / Alignment: Centered
**States observed:** Default: captured | Hover: not captured

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

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

## Layout
| Property | Value |
|----------|-------|
| Max-width | Fluid |
| Alignment | Center-justified |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Wordmark maintains central positioning; scale remains consistent with desktop. |

## Imagery & decoration
The brand avoids all photographic or illustrative decoration, favoring a pure typographic and whitespace-driven aesthetic.

## Do's
- Use `#ffffff` for all primary backgrounds to maintain the "Void" aesthetic.
- Ensure the Expansys wordmark is always rendered in `#000000`.
- Maintain generous whitespace around the brand mark (minimum 200px on desktop).
- Use sans-serif typefaces with clean, geometric terminals.
- Prioritize 21:1 contrast ratios for all text elements.

## Don'ts
- **Wrong:** Using a sub-brand color (e.g., Blue) for the main Expansys logo. **Right:** Always use `#000000`. **Reason:** The parent brand is strictly monochrome.
- **Wrong:** Adding drop shadows to the wordmark. **Right:** Keep it flat. **Reason:** The system does not use elevation depth.
- **Wrong:** Using off-white or light gray backgrounds. **Right:** Use pure `#ffffff`. **Reason:** The brand identity relies on high-contrast "ink on paper" clarity.

## Similar brands
- Nothing (Tech)
- Minimalist Baker
- Leica (Achromatic UI)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --expansys-canvas: #ffffff;
  --expansys-ink: #000000;
  --expansys-font-primary: sans-serif;
}
```

```javascript
/* Tailwind v4 @theme */
@theme {
  --color-canvas: #ffffff;
  --color-ink: #000000;
  --font-brand: "Inter", sans-serif;
}
```

## Agent prompt examples
- "Generate a landing page hero using the Expansys DNA: pure #ffffff background, centered #000000 bold sans-serif text, and no shadows or gradients."
- "Create a navigation bar for Expansys using #000000 text on a #ffffff background with 0px borders."

## Known gaps
Typography scale and specific spacing tokens were not captured as the source pages currently only feature the brand mark and a blank canvas. Component states (hover/active) are not defined in the current evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Main Landing | https://expansys.com | 1440px | 2026-06-06 |
| Mobile View | https://expansys.com | 390px | 2026-06-06 |