# Lokulus Design System

> High-contrast industrial precision meeting fluid automation through heavy-weight typography and a stark monochrome canvas punctuated by electric teal.

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

## TL;DR
Lokulus utilizes a "monochrome-plus" system where a stark black (#000000) and white (#ffffff) foundation is electrified by a single primary accent: Electric Teal (#00ccff). The typography is the primary brand driver, pairing the brutalist, wide-set **Integral** for display headers with the more technical, geometric **Greycliff** for body and UI. Layouts rely on extreme contrast, often placing white cards with 2px borders directly onto deep black surfaces. Component geometry is binary: either perfectly sharp (0px) for layout containers or full pill (9999px) for interactive elements and badges.

## Signature DNA
1. **Integral Display Headers** (Heavy-weight, all-caps or title-case headers in Integral CF create an industrial, high-authority feel across all landing pages).
2. **The 2px Electric Border** (Cards and pricing tiers use a consistent 2px border, often in #00ccff or #ffffff, to define boundaries on high-contrast backgrounds).
3. **Pill-on-Sharp Geometry** (Interactive buttons and status badges are strictly 9999px pills, while the structural sections and cards remain 0px sharp or 24px soft-panels).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Page background, primary text on dark, button borders | 406 | 1 | `css_variable:--color-white` |
| `{colors.black}` | `#000000` | Section backgrounds, primary text, button fills | 88 | 1 | `css_variable:--color-black` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.teal-900}` | `#00ccff` | Primary action border, active pricing tier, accent text | 5 | 1 | `css_variable:--color-teal-900` |
| `{colors.purple-900}` | `#8738e0` | Decorative/Token only | 2 | 0.8 | `css_variable:--color-purple-900` |
| `{colors.pink-900}` | `#ec61f5` | Decorative/Token only | 2 | 0.8 | `css_variable:--color-pink-900` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|------------------------|---------|
| Integral | 400, 700 | Display, Hero Headers | Archivo Black | Proprietary |
| Greycliff | 400, 600, 700 | Body, UI, Subheadings | Inter | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{text.display-mega}` | 72px | 72px | normal | 400 | Hero Display | `div.font-display.col-start-1` |
| `{text.display-xl}` | 60px | 60px | normal | 400 | H1 Headers | `h1.font-integral.max-w-4xl` |
| `{text.display-lg}` | 60px | 60px | normal | 700 | Section Headers | `h2.font-display.max-w-3xl` |
| `{text.heading-md}` | 36px | 40px | normal | 700 | Section Subheads | `h2.font-body.mb-2` |
| `{text.heading-sm}` | 30px | 36px | normal | 400 | Card Titles | `h3.text-3xl.text-black` |
| `{text.body-lg}` | 18px | 28px | normal | 400 | Lead Paragraphs | `p.dark:text-neutral-400` |
| `{text.body-md}` | 16px | 24px | normal | 400 | Default Body | `header.sticky.top-0` |
| `{text.caption}` | 12px | 16px | 0.6px | 400 | Overlines / Labels | `span.text-xs.tracking-wider` |

### Principles
1. **Header Weight Contrast:** Use Integral 700 for primary section breaks and 400 for hero text to maintain hierarchy without changing font family.
2. **Technical Tracking:** Captions and labels use `0.6px` to `1.2px` letter spacing to enhance the "engineered" aesthetic.
3. **Monochrome Text:** Text is strictly #ffffff on black or #000000 on white; teal is reserved for specific functional accents.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 56 |
| `{space.sm}` | 12px | 49 |
| `{space.md}` | 16px | 22 |
| `{space.lg}` | 20px | 68 |
| `{space.xl}` | 32px | 17 |
| `{space.xxl}` | 40px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Layout sections, main containers | 482 occurrences |
| `{radius.panel}` | 24px | Feature cards, content blocks | 3 occurrences |
| `{radius.pill}` | 9999px | Buttons, badges, tags | 38 occurrences |

## Components
### Tier 1: Foundational
#### Pill Button
**Role:** Primary and Secondary Actions
**Pages observed:** All
**Spec:** Background: transparent or #ffffff / Text: #ffffff or #000000 / Border: 2px #ffffff / Radius: 9999px / Padding: 12px 32px / Typography: Greycliff 16px
**States observed:** Default | Hover: captured

#### Navigation
**Role:** Global Header
**Pages observed:** All
**Spec:** Background: #000000 / Text: #ffffff / Border: 0px / Radius: 0px / Padding: 0px / Typography: Greycliff 16px
**States observed:** Default: captured

### Tier 2: Patterns
#### Feature Card
**Role:** Benefit and Service display
**Pages observed:** https://lokulus.com, https://lokulus.com/pricing
**Spec:** Background: #ffffff / Text: #000000 / Border: 2px #f6f6f6 / Radius: 24px / Padding: 12px 32px / Typography: Greycliff 18px
**States observed:** Default: captured

#### Pill Badge
**Role:** Status and Category labels
**Pages observed:** All
**Spec:** Background: transparent / Text: #ffffff / Border: 2px #7c7c7c / Radius: 9999px / Padding: 12px 16px / Typography: Greycliff 14px
**States observed:** Default: captured

### Tier 3: Surface-specific
#### Pricing Tier
**Role:** Product selection
**Pages observed:** https://lokulus.com/pricing
**Spec:** Background: #ffffff / Text: #000000 / Border: 2px #00ccff (active) or #ffffff (inactive) / Radius: 0px / Padding: 32px / Typography: Integral 30px (Price)
**States observed:** Default | Active: captured

## Layout
| Property | Value |
|------|-------|
| Max-width | 1280px |
| Section Padding | 80px - 120px |
| Grid | 12-column desktop |

## Do's
- Use **Integral 700** for H2 section headers to establish authority.
- Apply **2px borders** to cards when they sit on high-contrast backgrounds.
- Use **9999px radius** for all interactive elements (buttons, inputs).
- Reserve **#00ccff** for the "Most Popular" or "Primary" state in a group.
- Maintain a **0px radius** for full-width section containers.

## Don'ts
- **Don't** use #00ccff for body text; it is for borders and accents only.
- **Don't** mix Integral and Greycliff within the same text block.
- **Don't** use soft shadows; depth is achieved through 2px borders and color contrast.
- **Wrong:** Labeling the purple token (`#8738e0`) as the primary brand color. **Right:** Use `#00ccff` as the primary accent. **Reason:** Teal is the only chromatic color with high-confidence functional roles across the site.

## Quick start

### CSS Custom Properties
```css
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-teal: #00ccff;
  --font-display: 'Integral CF', sans-serif;
  --font-body: 'Greycliff CF', sans-serif;
  --radius-pill: 9999px;
  --border-width: 2px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #00ccff;
  --color-surface: #000000;
  --font-integral: "Integral CF";
  --font-greycliff: "Greycliff CF";
  --radius-pill: 9999px;
}
```

## Agent prompt examples
- "Create a pricing card using a 2px #00ccff border, #ffffff background, and Integral CF for the price display."
- "Generate a hero section with a #000000 background, #ffffff Integral CF headers at 60px, and a pill-shaped CTA with a 2px white border."
- "Design a feature grid where each item is a 0px radius card with a 2px #f6f6f6 border and Greycliff 18px titles."

## Known gaps
- Hover states for primary buttons were not explicitly detailed in the CSS variable extraction but are visible as opacity shifts in screenshots.
- Mobile-specific spacing tokens (e.g., section padding reduction) were not captured in the evidence scale.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|-------|----------|--------------|
| Homepage | https://lokulus.com | 1440px | 2026-06-06 |
| Pricing | https://lokulus.com/pricing | 1440px | 2026-06-06 |
| About | https://lokulus.com/about | 1440px | 2026-06-06 |