# Link-labs Design System

> High-contrast industrial blue anchored by heavy geometric Montserrat headings and sharp, functional layouts.

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

## TL;DR
Link-labs utilizes a high-density industrial palette dominated by deep navy `#08334d` and a technical blue accent `#2f7bbf`. The typography system is built on **Montserrat**, specifically leveraging a signature weight of 300 for large-scale display headers and 900 for high-impact section titles. Visual structure is defined by sharp 0px corners on primary surfaces and buttons, contrasted by large 50px radius decorative panels. The system relies on clear, functional hierarchies with generous vertical spacing (up to 70px) and a reliance on white or deep blue backgrounds to frame technical content.

## Signature DNA
1. **Geometric Weight Extremes** (Montserrat is pushed to its limits, pairing weight 300 for light display copy with weight 900 for ultra-heavy section headings on the homepage.)
2. **Industrial Blue Foundation** (The use of `#08334d` as both a primary surface background and a button fill creates a "dark mode" professional atmosphere for enterprise sections.)
3. **Sharp/Soft Contrast** (Functional components like buttons and cards use a 0px radius, while decorative background elements use a 50px radius to soften the technical grid.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.surface.white}` | `#ffffff` | Primary page background, button text | 43 | 0.8 | computed_style |
| `{color.text.primary}` | `#333333` | Default body text | 101 | 0.8 | computed_style |
| `{color.text.muted}` | `#404040` | Secondary body text | 58 | 0.8 | computed_style |
| `{color.surface.neutral}` | `#f0f0f0` | Subtle section backgrounds, borders | 3 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{color.brand.navy}` | `#08334d` | Primary CTA background, dark section surfaces | 20 | 0.8 | computed_style |
| `{color.brand.blue}` | `#2f7bbf` | Primary accent text, link colors | 14 | 0.8 | computed_style |
| `{color.brand.green}` | `#87b940` | Success indicators, secondary accent text | 12 | 0.8 | computed_style |
| `{color.brand.lime}` | `#9bca3e` | Decorative text accent | 4 | 0.6 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Montserrat | 400, 500, 600, 700, 900 | Display, Headings, UI | Montserrat (Google Fonts) | OFL |
| system-ui | 300, 400, 500, 600 | Hero Display, Technical Headings | Inter | System |
| sans-serif | 400, 700 | Body fallback | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.light}` | 60px | 75px | normal | 300 | Hero H1 | `h1.inline-block` |
| `{type.display.heavy}` | 60px | 60px | normal | 900 | Section H2 | `h2` |
| `{type.heading.lg}` | 50px | 62.5px | normal | 900 | Sub-heading | `h2.sub-heading` |
| `{type.heading.md}` | 30px | 39px | normal | 400 | Section Header | `h2.text-3xl` |
| `{type.heading.sm}` | 28px | 35px | normal | 700 | Card Title | `h3` |
| `{type.body.lg}` | 20px | 32px | normal | 400 | Lead Paragraph | `p` |
| `{type.body.md}` | 18px | 28.8px | normal | 400 | Default Body | `span` |
| `{type.body.sm}` | 16px | 26px | normal | 400 | Small Body | `p` |
| `{type.caption}` | 12px | 72px | normal | 500 | Labels | `span.code-label` |

### Principles
1. **Weight Contrast:** Use weight 300 for light-on-dark hero display and 900 for dark-on-light section headers.
2. **Tight Display:** Large display sizes (60px) maintain a line-height ratio of 1.0 to 1.25.
3. **Montserrat Dominance:** All brand-critical headings must use Montserrat; system-ui is reserved for hero-specific light weights.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|------|-------|-------------|
| `{space.xs}` | 8px | 8 |
| `{space.sm}` | 12px | 8 |
| `{space.md}` | 20px | 47 |
| `{space.lg}` | 25px | 45 |
| `{space.xl}` | 40px | 8 |
| `{space.section}` | 70px | 3 |

## Border radius
| Token | Value | Use | Evidence |
|------|-------|-----|----------|
| `{radius.sharp}` | 0px | Primary buttons, cards, section containers | 304 occurrences |
| `{radius.md}` | 10px | Rounded secondary buttons | 3 occurrences |
| `{radius.panel}` | 50px | Decorative background panels | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|-------|-----|----------|
| `{shadow.inset}` | `rgb(135, 184, 18) 0px 0px 1px 0px inset` | Themed button focus/active state | 3 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Book A Demo")
**Pages observed:** https://link-labs.com
**Spec:** Background `#08334d` / Text `#ffffff` / Border `none` / Radius `0px` / Padding `0px` (height-driven) / Typography `16px`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Rounded Button
**Role:** Secondary themed action
**Pages observed:** https://link-labs.com
**Spec:** Background `#87b940` / Text `#ffffff` / Border `none` / Radius `10px` / Shadow `rgb(135, 184, 18) 0px 0px 1px 0px inset`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Feature Surface
**Role:** Content grouping for pricing or about sections
**Pages observed:** https://link-labs.com/pricing, https://link-labs.com/about
**Spec:** Background `transparent` / Text `#404040` / Border `1px solid #ebebeb` / Radius `0px` / Padding `40px 0px`
**States observed:** Default

#### Decorative Panel
**Role:** Background softening element
**Pages observed:** https://link-labs.com
**Spec:** Background `#205f92` / Radius `50px` / Border `none`
**States observed:** Static

### Tier 3: Surface-specific

#### Dark Hero Section
**Role:** High-impact entry point
**Pages observed:** https://link-labs.com
**Spec:** Background `#08334d` / Text `#ffffff` / Typography Montserrat 300 (60px)
**States observed:** Static

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Padding (Vertical) | 70px |
| Column Gap | 20px |

## Do's
- Use Montserrat weight 900 for primary section headings on white backgrounds.
- Maintain a 0px border radius for all enterprise-grade UI components.
- Use `#08334d` for primary CTA backgrounds to ensure brand consistency.
- Pair light-weight system-ui (300) with dark backgrounds for hero sections.
- Ensure all body text uses `#333333` for optimal contrast on white surfaces.

## Don'ts
- Do not use rounded corners (>0px) for primary action buttons.
- Avoid using Montserrat weight 900 on dark backgrounds; prefer lighter weights (300-400).
- Do not use `#2f7bbf` as a background color for buttons; it is reserved for text accents.
- Never mix decorative 50px radii with functional 0px radii in the same component.

## Similar brands
- Rockwell Automation
- Siemens (Industrial UI)
- Honeywell
- Cisco (Enterprise)

## Quick start

### CSS Custom Properties
```css
:root {
  --ll-navy: #08334d;
  --ll-blue: #2f7bbf;
  --ll-green: #87b940;
  --ll-text-primary: #333333;
  --ll-radius-sharp: 0px;
  --ll-font-display: 'Montserrat', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-navy: #08334d;
  --color-accent-blue: #2f7bbf;
  --font-montserrat: "Montserrat";
  --radius-sharp: 0px;
  --radius-panel: 50px;
}
```

## Agent prompt examples
- "Create a hero section with a deep navy #08334d background and a Montserrat weight 300 heading at 60px."
- "Generate a primary CTA button using a sharp 0px radius, #08334d background, and white text."
- "Design a feature grid where titles are Montserrat weight 700 at 28px and body text is #333333."

## Known gaps
- Hover and focus states for buttons were not captured in the source.
- Mobile-specific breakpoint transitions for the 60px display type were not fully detailed in the evidence.
- Semantic colors for "Warning" and "Info" were not present in the analyzed pages.

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