# Lacunasoftware Design System

> High-contrast technical precision anchored by a vibrant signal orange and deep navy geometry.

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

## TL;DR
Lacunasoftware utilizes a high-contrast "monochrome" system that relies on a deep navy foundation (`#000f29`) and a high-voltage primary orange (`#e94e24`). The visual language is defined by sharp 0px radii, heavy typography (Exo 2 at weight 900), and a characteristic "underscore" motif following section headings. Layouts are structured with aggressive geometric containers and 45-degree corner cuts on decorative frames. While the primary orange provides the brand's energy, it is used sparingly for critical CTAs and accents against a clean white (`#ffffff`) or navy background.

## Signature DNA
1. **The Underscore Terminal** (Headings consistently end with a trailing underscore in the primary orange `#e94e24`, signaling a terminal-like or "code" aesthetic across all pages.)
2. **Sharp Geometry** (A strict adherence to `{radii.sharp}` (0px) for all buttons, cards, and input containers, creating a rigid, industrial feel.)
3. **Exo 2 Heavy Display** (The use of Exo 2 at weight 900 for primary headlines creates a high-density, technical typographic voice that contrasts with the standard Roboto body text.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.canvas}` | `#ffffff` | Page background and primary surface | 6 | 1 | Computed Style |
| `{colors.ink}` | `#212529` | Primary body text and secondary headings | 3 | 1 | Computed Style |
| `{colors.navy}` | `#000f29` | Accent backgrounds, handle colors, and progress indicators | 3 | 1 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.primary}` | `#e94e24` | Primary CTA backgrounds, checkbox icons, and heading underscores | 9 | 1 | Brand Page |
| `{colors.navy-soft}` | `#232e4c` | Decorative only — secondary navy variant | 0 | 0.9 | Brand Page |
| `{colors.blue-alt}` | `#1992d1` | Decorative only — product-specific accent | 0 | 0.9 | Brand Page |
| `{colors.gold-alt}` | `#fbb040` | Decorative only — product-specific accent | 0 | 0.9 | Brand Page |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{colors.error}` | `#f44336` | Validation errors and error-state indicators |
| `{colors.success}` | `#198754` | Valid form states |
| `{colors.warning}` | `#ffc107` | Warning notifications |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Exo 2 | 700, 900 | Display, Headings | None (Google Font) | OFL |
| Roboto | 400, 600 | Body, UI, Buttons | None (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{typography.display}` | 28px | 30.8px | normal | 900 | Hero headlines | `b.font-color-a` |
| `{typography.heading-lg}` | 28px | 30.8px | normal | 700 | Section introductions | `h1.introduction-text` |
| `{typography.body-md}` | 16px | 24px | normal | 400 | Running prose | `div.introduction-content` |
| `{typography.button}` | 16px | 20.8px | normal | 600 | CTA labels | `button.orange-btn` |
| `{typography.caption}` | 14px | 1.5 | normal | 400 | Footer links | Inferred |
| `{typography.label-sm}` | 12px | 1.4 | normal | 600 | Badges/Overlines | Inferred |
| `{typography.nav-link}` | 15px | 1.4 | normal | 500 | Top navigation | Inferred |
| `{typography.stat-lg}` | 24px | 1.2 | normal | 700 | Metric numbers | Inferred |

### Principles
1. **Headlines must be Heavy.** Use Exo 2 at 700 or 900; never use light weights for display.
2. **The Terminal Underscore.** All major section headings must terminate with an orange (`#e94e24`) underscore.
3. **Sans-serif only.** No serif typefaces are permitted in the system.

## Spacing
**Base unit:** 8
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{spacing.sm}` | 12px | 3 |
| `{spacing.base}` | 16px | 3 |
| `{spacing.lg}` | 24px | 9 |
| `{spacing.xl}` | 48px | 6 |
| `{spacing.section}` | 200px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radii.sharp}` | 0px | Buttons, Cards, Inputs, Containers | Standard across all components |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elevation.flat}` | none | All cards and buttons | `shadow: none` on all captured components |

## Components

### Tier 1: Foundational

#### Button
**Role:** Primary and secondary actions.
**Pages observed:** 3
**Spec:** Background `{colors.primary}` (#e94e24) | Text `{colors.canvas}` (#ffffff) | Border 0px | Radius `{radii.sharp}` (0px) | Padding 12px 24px | Typography `{typography.button}`
**States observed:** Default | Hover: captured | Focus: not captured | Active: not captured | Disabled: captured

#### Surface
**Role:** Main content containers and section backgrounds.
**Pages observed:** 3
**Spec:** Background `{colors.canvas}` (#ffffff) | Text `{colors.ink}` (#212529) | Border 0px | Radius `{radii.sharp}` (0px) | Padding 24px (internal)
**States observed:** Default

### Tier 2: Patterns

#### Feature Card
**Role:** Highlighting product solutions.
**Pages observed:** 2
**Spec:** Background `{colors.canvas}` (#ffffff) | Border 1px `{colors.navy}` (#000f29) | Radius `{radii.sharp}` (0px) | Header Typography `{typography.heading-lg}`
**States observed:** Default

#### Metric Block
**Role:** Displaying company statistics.
**Pages observed:** 2
**Spec:** Text `{colors.primary}` (#e94e24) | Typography `{typography.stat-lg}` | Alignment: Center
**States observed:** Default

### Tier 3: Surface-specific

#### Navigation Bar
**Role:** Global site navigation.
**Pages observed:** 3
**Spec:** Background `{colors.canvas}` (#ffffff) | Height 80px | Link Color `{colors.navy}` (#000f29)
**States observed:** Default

#### Footer
**Role:** Global site footer.
**Pages observed:** 3
**Spec:** Background `{colors.canvas}` (#ffffff) | Border-top 1px `{colors.navy}` (#000f29) | Text `{colors.ink}` (#212529)
**States observed:** Default

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1200px |
| Section Gap | 48px - 96px |
| Column Grid | 12-column |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; padding-inline reduced to 16px |
| Desktop | 1440px | Standard 12-column layout with 24px gutters |

## Imagery & decoration
- **Geometric Frames:** Uses 45-degree cut corners on image containers.
- **Underscore Motif:** Orange underscores follow headings.
- **Pattern Overlays:** Subtle "AVA" repeating geometric patterns in navy or light gray.
- **Avoid:** Rounded corners, soft shadows, or photographic gradients.

## Do's
- Use `#e94e24` for the trailing underscore on all `h2` and `h3` elements.
- Ensure all buttons have a `0px` border radius.
- Set primary headlines in Exo 2 at weight 900.
- Use deep navy `#000f29` for secondary backgrounds to maintain high contrast.
- Maintain generous vertical spacing (96px+) between major content sections.

## Don'ts
- **Wrong:** Using `#fd7e14` (Bootstrap Orange) as the primary brand color. **Right:** Use `#e94e24`. **Reason:** `#fd7e14` is a generic token; `#e94e24` is the validated brand primary.
- Do not apply border-radius to any interactive component.
- Do not use shadows to create depth; use color blocking and hairlines instead.
- Do not use the primary orange for body text; it is reserved for CTAs and accents.
- Do not omit the underscore terminal on section-level headlines.

## Similar brands
- Cloudflare (Technical, high-contrast orange/navy)
- HashiCorp (Geometric, sharp-edged, technical UI)
- Snyk (Dark navy foundations with vibrant signal accents)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #e94e24;
  --color-navy: #000f29;
  --color-ink: #212529;
  --color-canvas: #ffffff;
  --font-display: 'Exo 2', sans-serif;
  --font-body: 'Roboto', sans-serif;
  --radius-sharp: 0px;
}
```

### Tailwind v4 @theme
```css
@theme {
  --color-primary: #e94e24;
  --color-navy: #000f29;
  --font-display: "Exo 2";
  --font-body: "Roboto";
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Lacunasoftware style: Background #e94e24, white text, Roboto 600, 0px border radius, and 12px 24px padding."
- "Generate a section heading for 'Digital Signature' following the brand DNA: Exo 2 weight 900, navy text, ending with a #e94e24 underscore."
- "Design a feature card with a 1px #000f29 border, 0px radius, and a white background."

## Known gaps
- Hover and Active states for tertiary buttons were not captured in the source.
- Specific mobile breakpoint transitions for the "AVA" pattern overlay were not fully evidenced.

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