# Lookfar Design System

> High-contrast monochrome utility punctuated by aggressive primary-color flood zones and geometric gradients.

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

## TL;DR
Lookfar utilizes a "monochrome-plus" strategy where a stark white canvas (`#ffffff`) and black ink (`#000000`) provide the structural framework, while high-saturation flood colors define major sections. The system is characterized by heavy typographic emphasis, often using black background blocks with white text for headers to create a "label" effect. Visual energy is derived from large-scale geometric gradients—specifically a cyan-to-lime transition—and rounded container shapes that break the standard grid. Interactive elements are strictly functional, utilizing outlined buttons with arrow affordances and high-contrast hover states.

## Signature DNA
1. **The Block Label** (White text on a black rectangular background block, used for section sub-headers to create immediate visual hierarchy).
2. **Geometric Flood Sections** (Full-width background floods using high-saturation tokens like `--lf-orange` (#f9bb00) or custom gradients to categorize content areas).
3. **Pill & Arrow CTAs** (Buttons use a consistent `rounded-pill` geometry often paired with a trailing `→` character to signal progression).

## Family Map
| Sub-brand | Primary color | Graphics motif | Inherits | Overrides |
|-----------|---------------|----------------|----------|-----------|
| None | #000000 | Geometric Gradients | N/A | N/A |

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--wp--preset--color--white` | `#ffffff` | Primary Page Canvas | High | High | Declared Token |
| `--wp--preset--color--black` | `#000000` | Primary Text & UI Accents | High | High | Declared Token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `--lf-orange` | `#f9bb00` | Section Flood (Expertise) | 1 | High | Declared Token |
| `--lf-red` | `#e64c3f` | Secondary Accent / Decorative | 1 | High | Declared Token |
| `--lf-yellow` | `#fae900` | Decorative Accent | 1 | High | Declared Token |
| `--lf-teal` | `#62fff0` | Gradient Stop | 1 | High | Declared Token |

### Semantic
Not captured in source.

## Typography
### Fonts
Table: | Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|-----------------------|---------|
| Sans-Serif (System) | 400, 700, 900 | All UI and Display | Inter | Proprietary/System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `display-xl` | 48px | 1.1 | -0.02em | 900 | Hero Headlines | `h1` |
| `display-lg` | 32px | 1.2 | normal | 700 | Section Headers | `h2` |
| `label-md` | 18px | 1.0 | 0.05em | 700 | Block Labels | `.expertise-label` |
| `body-lg` | 18px | 1.6 | normal | 400 | Intro Paragraphs | `.hero p` |
| `body-md` | 16px | 1.5 | normal | 400 | Standard Body | `p` |
| `card-title` | 16px | 1.3 | normal | 700 | Component Titles | `.card h3` |
| `nav-link` | 14px | 1.0 | normal | 500 | Top Navigation | `nav a` |
| `button-text` | 14px | 1.0 | normal | 700 | CTA Labels | `button` |

### Principles
1. **Heavyweight Headers:** Display type uses maximum weights (800-900) to anchor the page.
2. **Inverted Labels:** Small-scale headers are frequently inverted (white on black) to act as visual anchors.
3. **Generous Leading:** Body text maintains a 1.5-1.6 line-height for readability against high-saturation backgrounds.

## Spacing
**Base unit:** 8px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `space-xs` | 8px | Card internal padding |
| `space-md` | 24px | Element grouping |
| `space-xl` | 64px | Section vertical padding |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `radius-sm` | 4px | Form inputs / small cards | Observed on Expertise cards |
| `radius-pill` | 9999px | CTA Buttons | Observed on "Let's Connect" |
| `radius-lg` | 24px | Section containers | Observed on Hero gradient mask |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `flat` | none | Default state | All sections |
| `raised` | 0 4px 20px rgba(0,0,0,0.05) | Content Cards | Expertise cards |

## Components
### Tier 1: Foundational
#### Primary Button
**Role:** Main call to action
**Pages observed:** Homepage
**Spec:** Background: transparent / Text: `#e64c3f` / Border: 1px solid `#e64c3f` / Radius: `9999px` / Typography: 14px Bold
**States observed:** Default captured.

### Tier 2: Patterns
#### Expertise Card
**Role:** Service categorization
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` / Text: `#000000` / Radius: `8px` / Padding: `24px` / Shadow: `raised`
**States observed:** Default captured.

#### Section Label
**Role:** Categorical anchor
**Pages observed:** Homepage
**Spec:** Background: `#000000` / Text: `#ffffff` / Typography: 18px Bold / Padding: `4px 12px`
**States observed:** Static.

### Tier 3: Surface-specific
#### Hero Gradient Mask
**Role:** Visual brand signature
**Pages observed:** Homepage
**Spec:** Background: Linear-gradient(to bottom right, `#62fff0`, `#fae900`) / Radius-bottom-left: `120px`
**States observed:** Static.

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1280px |
| Column Grid | 12-column |
| Section Gap | 80px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | < 768px | Header navigation collapses to hamburger; Hero text aligns center. |
| Desktop | > 1024px | Multi-column card layouts (2-up or 3-up). |

## Imagery & decoration
*   **Gradients:** Uses smooth, high-vibrancy transitions (Teal to Lime).
*   **Icons:** Simple 2px stroke weight line icons in accent colors.
*   **Avoids:** Drop shadows on text, low-contrast gray-on-gray UI.

## Do's
*   Use `#000000` for all primary headlines.
*   Apply `radius-pill` to all interactive buttons.
*   Invert text to `#ffffff` when placing on dark background blocks.
*   Use the teal-to-lime gradient for large-scale decorative masks.
*   Maintain 1.6 line-height for body copy on saturated backgrounds.

## Don'ts
*   **Wrong:** Using `#007cba` (WP Admin Blue) as a primary brand color. **Right:** Use `#000000`. **Reason:** The brand is monochrome-led; admin tokens are for backend utility only.
*   Do not use border-radii on the "Block Label" components; they must remain sharp rectangles.
*   Do not use saturated colors for body text; keep text strictly `#000000` or `#ffffff`.
*   Avoid placing primary buttons on top of complex gradients without a high-contrast container.

## Similar brands
*   Vercel (Monochrome utility)
*   Stripe (Gradient usage)
*   Linear (High-contrast UI)

## Quick start
```css
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-accent-red: #e64c3f;
  --color-flood-orange: #f9bb00;
  --radius-pill: 9999px;
  --font-main: 'Inter', sans-serif;
}
```

## Agent prompt examples
*   "Create a section header using the Lookfar Block Label style: white text on a black rectangular background with 18px bold sans-serif type."
*   "Generate a primary CTA button with a red outline, pill shape, and a trailing arrow."
*   "Design a card component with a white background, 8px border radius, and a subtle 5% black shadow."

## Known gaps
*   Hover and Active states for buttons were not explicitly captured in the static evidence.
*   Specific font family names were not declared in the provided token list.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://lookfar.com | 1440px | 2026-06-06 |