# Locofy Design System

> High-contrast technical canvas pairing deep navy ink with electric cyan accents and structured Inter typography.

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

## TL;DR
Locofy utilizes a high-voltage "Dev-Blue" palette, anchoring the interface with a primary electric blue `#457eff` and a secondary vibrant cyan `#21c1cb`. The system is built on a clean white foundation `#ffffff` but frequently uses deep navy `#192b52` for high-contrast text and section headers. Typography is strictly functional, relying on **Inter** for all UI and display needs, occasionally supplemented by **Fira Code** for technical or monospaced accents. Geometry is characterized by a "soft-tech" approach, utilizing generous 50px radii for large panels and pill-shaped elements, contrasted against 6px to 8px radii for standard cards and inputs.

## Signature DNA
1. **Electric Gradient Overlays** (The use of `#457eff` and `#21c1cb` as background washes and primary CTAs to signal "AI-powered" energy across the homepage and pricing tiers).
2. **High-Contrast Navy Ink** (Using `#192b52` and `#2e3842` for headings instead of pure black, maintaining a professional "IDE-adjacent" depth).
3. **Pill-Panel Geometry** (Large container sections and primary buttons use extreme rounding—up to 50px—to soften the technical density of the product).

## Family Map
Not captured in source (No sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#ffffff` | Primary page background | 469 | 0.8 | computed_style |
| `{color.canvas.alt}` | `#f9fbff` | Subtle section backgrounds | 73 | 0.8 | computed_style |
| `{color.border.soft}` | `#ecf0f6` | Default dividers and card borders | 68 | 0.8 | computed_style |
| `{color.ink.deep}` | `#0e1216` | High-emphasis body text | 15 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#457eff` | Primary CTA backgrounds, active states | 158 | 0.8 | computed_style |
| `{color.ink.navy}` | `#192b52` | Primary heading and navigation text | 240 | 0.8 | computed_style |
| `{color.ink.slate}` | `#2e3842` | Secondary body and button text | 363 | 0.8 | computed_style |
| `{color.secondary}` | `#21c1cb` | Secondary CTA, "Popular" badges | 8 | 0.6 | computed_style |
| `{color.accent.cyan}` | `#41d1ff` | Decorative borders, subtle highlights | 18 | 0.8 | computed_style |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| **Inter** | 200, 400, 500, 600, 700, 900 | Display, Heading, Body, UI | Inter (Google Fonts) | SIL OFL |
| **Fira Code** | 400, 450, 500, 600, 700 | Technical labels, Code | Fira Code | SIL OFL |
| **Arial** | 400, 600, 700 | System fallback / Body | N/A | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display.xl}` | 52px | 65.8px | -1.04px | 700 | Hero Headlines | `h2._heading_mgfzs_7` |
| `{type.display.lg}` | 46px | 50.6px | -2.3px | 700 | Section Titles | `span._design_ohrgr_202` |
| `{type.heading.md}` | 29px | normal | normal | 600 | Sub-section heads | `div.font-semibold.text-[29px]` |
| `{type.heading.sm}` | 24px | 31.2px | normal | 600 | Testimonial names | `p._testimonialName_1jym3_69` |
| `{type.body.lg}` | 18px | 28px | normal | 400 | Featured body copy | `span:nth-of-type(1)` |
| `{type.body.md}` | 16px | normal | normal | 400 | Default body text | `div.w-full.relative` |
| `{type.body.sm}` | 14px | 19.6px | normal | 400 | List items, footer | `li:nth-of-type(1)` |
| `{type.mono.md}` | 14px | 22.4px | normal | 450 | Technical labels | `span._groupSubLabel_1pqcv_92` |
| `{type.caption}` | 12px | normal | normal | 400 | Framework labels | `div._frameworks_ohrgr_314` |

### Principles
1. **Tight Display Tracking:** Large headlines (46px+) use aggressive negative letter-spacing (-1.04px to -2.3px) to maintain a compact, modern feel.
2. **Weight Contrast:** Navigation and UI labels strictly use 500-600 weight, while headings are consistently 700.
3. **Code as Brand:** Fira Code is used not just for code blocks but as a brand-level "technical annotation" style for sub-labels.

## Spacing
**Base unit:** 4px (inferred)
Table: | Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 147 |
| `{space.sm}` | 12px | 139 |
| `{space.md}` | 16px | 20 |
| `{space.lg}` | 24px | 6 |
| `{space.xl}` | 48px | 6 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sm}` | 6px | Pricing cards | `Card._open_18xlu_36` |
| `{radius.md}` | 8px | Feature cards | `Card.radius-8px` |
| `{radius.lg}` | 12px | Surface containers | `Surface.radius-12px` |
| `{radius.xl}` | 50px | Large section panels | `Card.radius-50px` |
| `{radius.pill}` | 9999px | CTA Buttons | `pill` |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.card}` | `rgba(0, 0, 0, 0.1) 0px 0px 19px 0px` | Floating UI elements | 62 occurrences |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.12) 0px 2px 16px 0px` | Hovered cards | 16 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Get Started")
**Pages observed:** https://locofy.ai, https://locofy.ai/pricing
**Spec:** Background `{color.primary}` (#457eff) | Text `{color.canvas}` (#ffffff) | Radius `{radius.pill}` (9999px) | Typography `{type.body.lg}` (18px/600)
**States observed:** Default | Hover: Not captured | Active: Captured

#### Secondary Button
**Role:** Alternative actions or "Popular" tier CTA
**Pages observed:** https://locofy.ai/pricing
**Spec:** Background `{color.secondary}` (#21c1cb) | Text `{color.canvas}` (#ffffff) | Radius `{radius.pill}` (9999px)
**States observed:** Default | Active: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying product benefits or testimonials
**Pages observed:** https://locofy.ai
**Spec:** Background `{color.canvas}` (#ffffff) | Border 1px `{color.border.soft}` (#ecf0f6) | Radius `{radius.md}` (8px) | Shadow `{shadow.card}`
**States observed:** Default | Hover: Captured

#### Pricing Tier Card
**Role:** Plan selection
**Pages observed:** https://locofy.ai/pricing
**Spec:** Background `{color.canvas.alt}` (#f9fbff) | Border 1px `{color.border.soft}` (#ecf0f6) | Radius `{radius.sm}` (6px) | Padding 15px 18px
**States observed:** Default

### Tier 3: Surface-specific

#### Large Section Panel
**Role:** Grouping major content blocks (e.g., "Built for Enterprises")
**Pages observed:** https://locofy.ai, https://locofy.ai/pricing
**Spec:** Background `{color.primary}` (#457eff) | Text `{color.canvas}` (#ffffff) | Radius `{radius.xl}` (50px) | Padding 120px 104px
**States observed:** Default

#### Technical Badge
**Role:** Small annotations or "Enterprise Ready" labels
**Pages observed:** https://locofy.ai
**Spec:** Background transparent | Border 1px `{color.accent.cyan}` (#41d1ff) | Typography `{type.mono.md}` (14px/450)
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max content width | 1200px (inferred) |
| Section Padding (Vertical) | 120px |
| Card Gap | 24px |

## Responsive
Table: | Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Stacked cards, reduced section padding (18px), font-size scaling for display (32px) |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), full section padding (120px) |

## Do's
- Use `#192b52` for all primary headings to maintain brand depth.
- Apply `{radius.xl}` (50px) to large section containers to soften high-contrast layouts.
- Pair technical labels with **Fira Code** at 14px.
- Use `{color.primary}` (#457eff) for the most critical user path.
- Maintain negative letter-spacing on display type above 40px.

## Don'ts
- Do not use pure black (#000000) for body text; use `{color.ink.slate}` (#2e3842).
- Do not use sharp corners (0px) for cards or buttons; the minimum radius is 6px.
- Do not use `{color.secondary}` (#21c1cb) for primary navigation; it is reserved for accent CTAs and badges.
- Avoid using Inter Light (300); stick to 400 for body and 700 for display.

## Similar brands
- Vercel (monochrome foundation, high-contrast accents)
- Supabase (technical/dev-tool aesthetic, structured grids)
- Linear (precise geometry, navy/slate ink tones)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --locofy-primary: #457eff;
  --locofy-secondary: #21c1cb;
  --locofy-ink-navy: #192b52;
  --locofy-ink-slate: #2e3842;
  --locofy-canvas: #ffffff;
  --locofy-radius-xl: 50px;
  --locofy-shadow-card: 0px 0px 19px 0px rgba(0, 0, 0, 0.1);
}
```

## Agent prompt examples
- "Create a pricing card using Locofy's `#f9fbff` background, a 6px border radius, and a pill-shaped button in `#21c1cb`."
- "Generate a hero section with a `#192b52` heading in Inter Bold, using -1.04px letter spacing and a primary button in `#457eff`."
- "Design a feature grid where each card has a white background, an 8px radius, and the standard Locofy shadow (rgba 0,0,0,0.1, 19px blur)."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the computed style evidence.
- Error and success semantic tokens were not present on the analyzed marketing pages.
- The specific mobile breakpoint transition for the 50px radius was not captured.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://locofy.ai | Desktop 1440 | 2026-06-06 |
| Pricing | https://locofy.ai/pricing | Desktop 1440 | 2026-06-06 |
| Mobile Home | https://locofy.ai | Mobile 390 | 2026-06-06 |