# Enterpret Design System

> A highly structured, data-dense interface relying on sharp geometry, monospace accents, and a muted sage-and-pine palette.

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

## TL;DR
Enterpret uses a monochrome-leaning foundation anchored by an off-white sage canvas (`#f1f6eb`) and pure black (`#000000`). The UI feels technical and precise, driven by sharp 0px border radii on most surfaces and the prominent use of Geist Mono for metadata and captions. Fustat provides clean, geometric readability for headings and body copy. The brand avoids heavy shadows entirely, opting for 1px borders in muted green (`#b8c9a5`) to define structure and hierarchy.

## Signature DNA
1. **Sharp Geometry:** 0px border radii (`{radii.sharp}`) on primary cards, buttons, and layout boundaries create a technical, dashboard-like feel that avoids soft SaaS tropes.
2. **Monospace Metadata:** Geist Mono is used extensively for captions (10-12px), subheads, and small UI elements, reinforcing the "data infrastructure" theme.
3. **Muted Pine & Sage Palette:** Heavy reliance on `#f1f6eb` backgrounds with `#203434` and `#b8c9a5` accents instead of vibrant primary colors, giving the platform a calm, analytical atmosphere.

## Family Map
*No sub-brands exist in this topology.*

## Colors

### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--brand--light-green` | `#f1f6eb` | Page background, light text on dark surfaces | 72 | 1.0 | `css_variable` |
| `--black` | `#000000` | Primary text, dominant achromatic | 25 | 1.0 | `css_variable` |
| `--base-color-neutral--white` | `#ffffff` | Alternate text, pure white surface | 16 | 1.0 | `css_variable` |
| `--brand--light` | `#f9f8f7` | Secondary off-white surface | 3 | 1.0 | `css_variable` |
| `foundation-navy` | `#0c0e1c` | Deep dark text/surface | 49 | 0.8 | `computed_style` |
| `foundation-olive` | `#e4e6d8` | Muted text/border | 5 | 0.6 | `computed_style` |
| `foundation-pine` | `#182523` | Very dark green surface | 3 | 0.6 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--brand--dark` | `#203434` | Dark green text, surface bg, button text | 86 | 1.0 | `css_variable` |
| `--brand--green` | `#b8c9a5` | Sage green text, borders, button bg | 48 | 1.0 | `css_variable` |
| `--brand--teal` | `#2c6a6d` | Decorative teal | 1 | 1.0 | `css_variable` (decorative_only) |
| `accent-dark-green` | `#355550` | Secondary dark green surface | 4 | 0.6 | `computed_style` |
| `accent-blue` | `#0000ee` | Standard link blue | 3 | 0.6 | `computed_style` |
| `accent-deep-pine` | `#192b28` | Deep green surface | 3 | 0.6 | `computed_style` |

### Semantic
Not captured in source.

## Typography

### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Fustat | 400, 600, 700 | Headings, primary body | Plus Jakarta Sans | Google Fonts |
| Geist Mono | 400, 700 | Captions, metadata, small body | JetBrains Mono | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-lg` | 56px | 61.6px | -1.12px | 600 | Hero h1 | `h1` |
| `display-md` | 50px | 50px | normal | 600 | Stat callouts | `div.cs-grid_stat` |
| `display-sm` | 48px | 52.8px | -0.96px | 600 | Section h2 | `h2.text-align-center` |
| `heading-lg` | 40px | 44px | -0.8px | 600 | Subsection h3 | `h2.heading-style-h3` |
| `heading-sm` | 21px | 23.1px | -0.42px | 600 | Card titles | `h3.text-size-large` |
| `body-lg` | 18px | 25.2px | normal | 400 | Intro body | `div.text-size-medium` |
| `body-md` | 16px | 22.4px | normal | 400 | Standard body | `div.highlights_item` |
| `body-mono` | 16px | 19.2px | -0.32px | 400 | Technical body | `a#nav-book-demo` |
| `body-sm` | 14px | 19.6px | normal | 400 | Nav links, dense text | `div.nav_component` |
| `caption-mono` | 12px | 14.4px | -0.24px | 400 | Standard caption | `a#nav-book-demo` |
| `caption-mono-sm` | 10px | 14px | normal | 700 | Micro labels | `strong.bold-text-2` |

### Principles
- **Negative tracking on display:** Fustat is pulled tight (-0.8px to -1.12px) at sizes 40px and above to create solid, architectural headline blocks.
- **Monospace for utility:** Geist Mono is strictly reserved for utility text, navigation IDs, and micro-copy, never for running prose.
- **Weight restraint:** Headings never exceed 600 weight; body copy remains at 400.

## Spacing
**Base unit:** 4px

| Token | Value | Occurrences |
|---|---|---|
| `space-1` | 4px | 26 |
| `space-2` | 8px | 17 |
| `space-3` | 12px | 7 |
| `space-4` | 16px | 48 |
| `space-5` | 20px | 24 |
| `space-6` | 24px | 3 |
| `space-8` | 32px | 8 |
| `space-10` | 40px | 4 |
| `space-12` | 50px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Dominant structural radius (cards, buttons) | 252 occurrences |
| `radius-control` | 10px | Specific isolated panels | 7 occurrences |
| `radius-pill` | 1400px | Rare rounded badge/element | 1 occurrence |

## Elevation
Not captured in source. The system relies entirely on 1px borders (`#b8c9a5` or `#f1f6eb`) and background color contrast for depth.

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action.
**Pages observed:** https://enterpret.com (4 occurrences)
**Spec:** Background `#b8c9a5` / Text `#203434` / Border 1px `#b8c9a5` / Radius 0px / Padding 9px 20px / Typography 12px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

#### Secondary Button (Outline)
**Role:** Alternative action.
**Pages observed:** https://enterpret.com (4 occurrences)
**Spec:** Background transparent / Text `#b8c9a5` / Border 1px `#b8c9a5` / Radius 0px / Padding 9px 20px / Typography 12px / Shadow none
**States observed:** Default | Hover: not captured | Focus: not captured | Active: not captured | Disabled: not captured

### Tier 2: Patterns

#### Feature Card (Dark)
**Role:** Content container on dark sections.
**Pages observed:** https://enterpret.com (3 occurrences)
**Spec:** Background `#182523` / Text `#f1f6eb` / Border 1px `#b8c9a5` / Radius 0px / Padding 32px 28px 50px / Typography 16px / Shadow none
**States observed:** Default

#### Feature Card (Transparent)
**Role:** Content container on complex backgrounds.
**Pages observed:** https://enterpret.com (2 occurrences)
**Spec:** Background transparent / Text `#f1f6eb` / Border 1px `#b8c9a5` / Radius 0px / Padding 40px 32px 24px / Typography 14px / Shadow none
**States observed:** Default

### Tier 3: Surface-specific

#### Status Badge
**Role:** Inline metadata indicator.
**Pages observed:** https://enterpret.com (3 occurrences)
**Spec:** Background `rgba(184, 201, 165, 0.2)` / Text `#b8c9a5` / Border 0px / Radius 0px / Padding 12px / Typography 15px / Shadow none
**States observed:** Default

#### Soft Panel
**Role:** Secondary information container.
**Pages observed:** https://enterpret.com (5 occurrences)
**Spec:** Background transparent / Text `rgba(228, 230, 216, 0.5)` / Border 0px / Radius 10px / Padding 8px 16px / Typography 14px / Shadow none
**States observed:** Default

## Layout
Not captured in source.

## Responsive
Not captured in source.

## Imagery & decoration
The brand relies on technical, node-based diagrams and atmospheric radial gradients in the background to provide visual interest without breaking the strict, data-driven foreground UI. It avoids lifestyle photography and playful illustrations.

## Do's
- Do use `0px` border radius for almost all structural elements to maintain the technical aesthetic.
- Do use `Geist Mono` for captions, metadata, and small utility text.
- Do rely on 1px borders in `#b8c9a5` (sage) to separate content instead of drop shadows.
- Do apply negative letter-spacing to `Fustat` headings above 40px.
- Do use `#f1f6eb` as the default light canvas to reduce eye strain compared to pure white.

## Don'ts
- **Wrong:** Using a heavy drop shadow on a card.
  **Right:** Using a 1px `#b8c9a5` border with a flat background.
  **Reason:** The brand uses a flat, technical elevation model; shadows introduce unwanted physical depth.
- **Wrong:** Setting body copy in Geist Mono.
  **Right:** Setting body copy in Fustat 400.
  **Reason:** Monospace is reserved strictly for metadata and captions, not running prose.
- **Wrong:** Treating the sage accent (`#b8c9a5`) as the primary brand color.
  **Right:** Treating `#000000` as the primary brand color.
  **Reason:** Enterpret is a monochrome-anchored parent brand; the sage green is an accent, not the core identity.

## Similar brands
- Linear
- Vercel
- Raycast

## Quick start

```css
:root {
  --brand--light-green: #f1f6eb;
  --black: #000000;
  --base-color-neutral--white: #ffffff;
  --brand--light: #f9f8f7;
  
  --brand--dark: #203434;
  --brand--green: #b8c9a5;
  --brand--teal: #2c6a6d;

  --font-heading: 'Fustat', sans-serif;
  --font-mono: 'Geist Mono', monospace;
  
  --radius-sharp: 0px;
  --radius-control: 10px;
}
```

## Agent prompt examples
1. "Create a feature card using a transparent background and a 1px `--brand--green` border. Set the padding to 40px top, 32px sides, and 24px bottom. Use 0px border radius."
2. "Build a primary CTA button with a `--brand--green` background and `--brand--dark` text. Use 0px border radius and 9px by 20px padding."
3. "Generate a metadata badge with a 20% opacity `--brand--green` background, `--brand--green` text, and Geist Mono typography at 12px."

## Known gaps
Hover, focus, active, and disabled states were not captured in the source data. Semantic colors (success, error, warning) and responsive layout breakpoints are missing from the parsed evidence.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Main | https://enterpret.com | Desktop | 2026-06-06T05:00:39.368Z |