# Logicgate Design System

> High-contrast enterprise GRC architecture defined by deep indigo "Supersonic" ink, Archivo headlines, and precise 2px borders.

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

## TL;DR
Logicgate utilizes a high-contrast, professional palette anchored by "Supersonic" indigo (#070819) and "Laser Beam" blue (#0027d6) against a clean white canvas. The typography system pairs Archivo for high-impact headings with Inter for legible body text, maintaining a strict 0.64px letter spacing on display elements. Components are characterized by a consistent 5px border radius and 2px "Space Grey" (#dfe1ef) borders, creating a structured, grid-like feel. Visual hierarchy is enforced through saturated accent bands and subtle, sharp shadows that provide depth without sacrificing the system's flat, architectural precision.

## Signature DNA
1. **The 2px Structural Border** (Logicgate uses a consistent 2px border in `{colors.spacegrey}` (#dfe1ef) for cards and buttons, creating a technical, blueprint-like aesthetic across the homepage and pricing pages.)
2. **Supersonic High-Contrast** (The primary brand voltage comes from the near-black indigo `{colors.supersonic}` (#070819) used for text and surfaces, providing a 19.9:1 contrast ratio against white.)
3. **Archivo Display Tracking** (All headings from 20px to 54px utilize a specific +0.64px letter spacing, giving the Archivo typeface a distinct, wide-set enterprise authority.)

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|---|---|---|---|---|
| Not captured in source | — | — | — | — |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Page background, primary surface | 110 | 1.0 | `--mtr-body-bg` |
| `{colors.spacegrey}` | `#dfe1ef` | Default component borders, card outlines | 41 | 1.0 | `--lg-card-border-color` |
| `{colors.black}` | `#000000` | Shadows, secondary button text | 10 | 1.0 | `--mtr-black` |
| `{colors.ion}` | `#f9faff` | Subtle surface backgrounds | 2 | 1.0 | `--wp--preset--color--ion` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.supersonic}` | `#070819` | Primary text, dark surface backgrounds | 216 | 1.0 | `--mtr-supersonic` |
| `{colors.laserbeam}` | `#0027d6` | Primary CTAs, links, active borders | 35 | 1.0 | `--mtr-laserbeam` |
| `{colors.catapult}` | `#08075f` | Decorative surface background | 2 | 1.0 | `decorative_only` |
| `{colors.electric}` | `#8bff8b` | Decorative button background | 2 | 1.0 | `decorative_only` |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{colors.success}` | `#198754` | Valid form states |
| `{colors.error}` | `#dc3545` | Invalid form states |
| `{colors.info}` | `#0dcaf0` | Informational callouts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Archivo | 400, 500, 600 | Headings, CTAs | Archivo (Google Fonts) | OFL |
| Inter | 400, 500, 600 | Body, UI labels | Inter (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display-lg}` | 54px | 64.8px | 0.64px | 600 | Hero H1 | `h1#the-leading-ai-grc-platform` |
| `{type.display-md}` | 46px | 55.2px | 0.64px | 400 | Section headers | `h3.h1.mb-0` |
| `{type.heading-lg}` | 38px | 45.6px | 0.64px | 600 | Subsection titles | `h2.ratings-title` |
| `{type.heading-md}` | 30px | 36px | 0.64px | 600 | Card group titles | `h3` |
| `{type.heading-sm}` | 24px | 28.8px | 0.64px | 500 | Feature titles | `h3#governance-amp-policy` |
| `{type.body-lg}` | 18px | 27px | normal | 500 | Large body, links | `a` |
| `{type.body-md}` | 16px | 22.4px | normal | 400 | Default body | `div.lg-lightbox-video__inner` |
| `{type.body-sm}` | 14px | 19.6px | normal | 400 | Captions, footer | `p` |

### Principles
1. **Wide Heading Tracking:** All Archivo headings must maintain +0.64px tracking to ensure brand consistency.
2. **Body Legibility:** Inter is reserved for long-form content and UI labels, never used for display headings.
3. **Contrast Compliance:** Primary text `{colors.supersonic}` must always sit on `{colors.white}` or light surfaces to maintain >19:1 contrast.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 38 |
| `{space.sm}` | 8px | 20 |
| `{space.md}` | 16px | 73 |
| `{space.lg}` | 24px | 40 |
| `{space.xl}` | 32px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Sharp sections, footer | 234 occurrences |
| `{radius.sm}` | 3px | Form inputs | 11 occurrences |
| `{radius.md}` | 4px | Secondary buttons | 16 occurrences |
| `{radius.lg}` | 5px | Cards, primary buttons | 36 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default state | pricing page cards |
| `{shadow.subtle}` | `rgba(90, 92, 118, 0) 3.75px 3.75px 11.25px 1px` | Card depth | homepage feature cards |
| `{shadow.inset}` | `rgba(255, 255, 255, 0.15) 0px 1px 0px 0px inset` | Button press | primary CTAs |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call-to-action (e.g., "Request a Demo")
**Pages observed:** homepage, pricing, about
**Spec:** Background: `{colors.laserbeam}` (#0027d6) / Text: `{colors.white}` (#ffffff) / Border: none / Radius: `{radius.lg}` (5px) / Padding: 16px 24px / Typography: Archivo 18px 500
**States observed:** Default | Hover | Focus | Active: captured

#### Secondary Button
**Role:** Alternative actions (e.g., "Learn More")
**Pages observed:** homepage, about
**Spec:** Background: transparent / Text: `{colors.supersonic}` (#070819) / Border: 2px `{colors.laserbeam}` (#0027d6) / Radius: `{radius.sm}` (3px) / Padding: 6px 12px
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying platform capabilities or blog posts
**Pages observed:** homepage, pricing
**Spec:** Background: `{colors.white}` (#ffffff) / Text: `{colors.supersonic}` (#070819) / Border: 2px `{colors.spacegrey}` (#dfe1ef) / Radius: `{radius.lg}` (5px) / Shadow: `{shadow.subtle}`
**States observed:** Default | Hover: captured

#### Accordion
**Role:** FAQ and platform feature lists
**Pages observed:** homepage, pricing
**Spec:** Background: transparent / Text: `{colors.supersonic}` (#070819) / Border-bottom: 1px `{colors.spacegrey}` (#dfe1ef) / Typography: Archivo 18px 500
**States observed:** Default | Open: captured

### Tier 3: Surface-specific

#### Dark Section Surface
**Role:** High-impact hero or transition bands
**Pages observed:** homepage, about
**Spec:** Background: `{colors.supersonic}` (#070819) / Text: `{colors.white}` (#ffffff) / Padding: 80px 0px
**States observed:** Default: captured

#### Pricing Tier Card
**Role:** Pricing plan display
**Pages observed:** pricing
**Spec:** Background: `{colors.white}` (#ffffff) / Border: 2px `{colors.spacegrey}` (#dfe1ef) / Radius: `{radius.md}` (4px) / Padding: 32px
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Section Gap | 80px |
| Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked cards, 16px horizontal padding, hamburger menu |
| Desktop | 1440px | Multi-column grids, 64px+ section spacing |

## Imagery & decoration
Logicgate uses saturated blue gradients and technical iconography (line-art style). It avoids soft photography, preferring UI screenshots and abstract geometric shapes that reinforce the "Risk Cloud" metaphor.

## Do's
- Use `{colors.supersonic}` (#070819) for all primary body text.
- Apply 2px borders in `{colors.spacegrey}` (#dfe1ef) to all card components.
- Maintain +0.64px letter spacing on all Archivo headings.
- Use `{radius.lg}` (5px) for primary interactive elements.
- Ensure all primary CTAs use `{colors.laserbeam}` (#0027d6).

## Don'ts
- **Wrong:** Using `#007aff` (generic blue) for buttons. **Right:** Use `{colors.laserbeam}` (#0027d6). **Reason:** Brand consistency.
- **Wrong:** Setting headings in Inter. **Right:** Use Archivo. **Reason:** Archivo is the designated display face.
- **Wrong:** Using 1px borders for cards. **Right:** Use 2px. **Reason:** The 2px weight is a core brand signature.
- **Wrong:** Labeling sub-brand colors as parent primary. **Right:** Only `#070819` is the parent primary.

## Similar brands
- Drata
- Vanta
- ServiceNow
- OneTrust

## Quick start

```css
/* CSS Custom Properties */
:root {
  --lg-supersonic: #070819;
  --lg-laserbeam: #0027d6;
  --lg-spacegrey: #dfe1ef;
  --lg-white: #ffffff;
  --lg-radius-md: 5px;
  --lg-heading-tracking: 0.64px;
}
```

## Agent prompt examples
- "Generate a feature card using a 2px #dfe1ef border, 5px border radius, and Archivo 24px heading with 0.64px letter spacing."
- "Create a primary button with #0027d6 background, white Archivo text, and 5px radius."
- "Design a hero section with #070819 background and white Archivo display text at 54px."

## Known gaps
- Hover state hex values for primary buttons were not explicitly captured in the token set.
- Mobile-specific typography scale for display sizes was not fully extracted.

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