# Lookingforwardconsulting Design System

> Corporate blue and slate foundations punctuated by high-contrast crimson actions and rounded geometry.

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

## TL;DR
Lookingforwardconsulting utilizes a professional, high-trust palette anchored by Slate Blue `#334155` and a vibrant Signal Blue `#046bd2`. The system’s primary energy comes from a bold Crimson `#b42424` used exclusively for critical calls-to-action and emphasis. Typography is strictly **Roboto**, leveraging weights from 300 to 700 to create hierarchy without switching families. Layouts favor generous white space on a pure `#ffffff` canvas, utilizing rounded containers (12px to 20px) and pill-shaped buttons to soften the corporate aesthetic.

## Signature DNA
1. **The Crimson Pivot** (Primary actions use `#b42424` to break the blue/slate corporate monotony, specifically for "Schedule a Consultation" buttons across all pages).
2. **Rounded Professionalism** (Softened geometry using `{radii.card}` 16px and `{radii.pill}` 9999px to distinguish from traditional sharp-edged consultancy sites).
3. **Roboto-Only Hierarchy** (Total reliance on a single sans-serif family, using 600 weight for display and 400 for high-readability body text).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.canvas}` | `#ffffff` | Primary page background and card surfaces | 91 | 1.0 | Computed Style |
| `{colors.slate}` | `#334155` | Primary text and decorative borders | 96 | 1.0 | `--ast-global-color-3` |
| `{colors.dark-slate}` | `#1e293b` | Secondary headings and input labels | 5 | 1.0 | `--ast-global-color-2` |
| `{colors.muted}` | `#6d6e75` | De-emphasized text and subtle borders | 14 | 0.8 | Computed Style |
| `{colors.surface-soft}` | `#f0f1f2` | Section backgrounds and code blocks | 17 | 1.0 | `--ast-title-layout-bg` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{colors.primary}` | `#b42424` | Primary CTA background and emphasis text | 20 | 0.8 | Computed Style |
| `{colors.action-blue}` | `#046bd2` | Link text and secondary brand accents | 43 | 1.0 | `--ast-global-color-0` |
| `{colors.deep-blue}` | `#1a3c6e` | Dark section backgrounds (About page) | 10 | 0.6 | Computed Style |
| `{colors.sky-border}` | `#f1f5f9` | Light borders and style guide backgrounds | 4 | 1.0 | `--ast-global-color-5` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Roboto | 300, 400, 500, 600, 700 | All display, heading, and body text | N/A (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display-lg}` | 60px | 60px | normal | 600 | Hero counters | `span.elementor-counter-number-prefix` |
| `{type.display-md}` | 48px | 60px | normal | 600 | Main section headers | `h2.elementor-heading-title` |
| `{type.heading-lg}` | 36px | 36px | normal | 600 | Statistics numbers | `span.elementor-counter-number` |
| `{type.heading-md}` | 32px | 32px | normal | 600 | Sub-section headers | `span.elementor-counter-number` |
| `{type.heading-sm}` | 22px | 30.8px | normal | 500 | Feature titles | `h3.elementor-heading-title` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Lead paragraphs | `p.elementor-heading-title` |
| `{type.body-md}` | 16px | 26.4px | normal | 400 | Default body text | `header.elementor` |
| `{type.button}` | 16px | 16px | normal | 500 | Primary CTA labels | `a.elementor-button` |
| `{type.caption}` | 12px | 16px | normal | 500 | Role labels, metadata | `div.lfc-acc-role` |

### Principles
1. **Weight-Based Hierarchy**: Use weight 600 for all major headings; never use 400 for display text.
2. **Standard Tracking**: Letter spacing remains "normal" for almost all tokens, except for specific small labels at 1.4px.
3. **Tight Display Leading**: Large display sizes (48px+) use a 1.0 or 1.25 line-height ratio to keep headlines compact.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 32 |
| `{space.sm}` | 12px | 3 |
| `{space.md}` | 16px | 24 |
| `{space.lg}` | 24px | 21 |
| `{space.xl}` | 32px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radii.none}` | 0px | Default containers, sharp sections | 279 occurrences |
| `{radii.input}` | 4px | Form fields | 5 occurrences |
| `{radii.card}` | 16px | Feature cards, testimonials | 15 occurrences |
| `{radii.panel}` | 30px | Large content blocks | 12 occurrences |
| `{radii.pill}` | 9999px | Primary CTA buttons | 4 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.flat}` | none | Default state for cards and buttons | Observed on 90% of elements |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.05) 0px 1px 2px 0px` | Hover states and specific About page buttons | 5 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main conversion point (Consultation)
**Pages observed:** Homepage, About
**Spec:** Background: `{colors.primary}` (#b42424) | Text: `{colors.canvas}` (#ffffff) | Radius: 35px | Padding: 10px 26px | Typography: `{type.button}`
**States observed:** Default: Captured | Hover: Not captured

#### Surface Container
**Role:** Content grouping and sectioning
**Pages observed:** Homepage, About
**Spec:** Background: `{colors.canvas}` (#ffffff) | Border: 0px | Radius: `{radii.none}` | Padding: 0px
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying services or solutions
**Pages observed:** Homepage
**Spec:** Background: `{colors.canvas}` (#ffffff) | Border: 1px `{colors.sky-border}` (#f1f5f9) | Radius: 16px | Padding: 24px
**States observed:** Default: Captured

#### Testimonial Card
**Role:** Social proof sections
**Pages observed:** Homepage
**Spec:** Background: `{colors.canvas}` (#ffffff) | Radius: 16px | Shadow: none | Typography: `{type.body-lg}`
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Dark Hero Section
**Role:** High-impact introduction (About page)
**Pages observed:** About
**Spec:** Background: `{colors.deep-blue}` (#1a3c6e) | Text: `{colors.canvas}` (#ffffff) | Radius: 0px
**States observed:** Default: Captured

#### Icon Box
**Role:** Benefit or "Superpower" listing
**Pages observed:** Homepage
**Spec:** Background: transparent | Border: 1px `{colors.muted}` (#6d6e75) | Radius: 0px | Padding: 25px 0px
**States observed:** Default: Captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px - 1200px |
| Section Padding | 80px - 100px (vertical) |
| Grid Gap | 24px |

## Do's
- Use `#b42424` for the "Schedule a Consultation" button to maintain conversion hierarchy.
- Apply `{radii.card}` (16px) to all white cards sitting on light gray backgrounds.
- Keep all body text in Roboto 400 at 16px for optimal legibility.
- Use `{colors.slate}` (#334155) for primary text to avoid the harshness of pure black.
- Ensure 24px spacing between grid items in feature sections.

## Don'ts
- **Wrong:** Using `#046bd2` (Signal Blue) for primary conversion buttons. **Right:** Use `#b42424`. **Reason:** Crimson is the designated high-voltage action color.
- Do not use sharp corners (0px) for cards; always use at least 12px or 16px.
- Avoid using Roboto weights below 400 for body text.
- Do not introduce secondary serif fonts; the system is strictly sans-serif.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #b42424;
  --color-slate: #334155;
  --color-action-blue: #046bd2;
  --color-canvas: #ffffff;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --font-main: 'Roboto', sans-serif;
}
```

## Known gaps
- Hover and Active states for the primary crimson button were not explicitly captured in the token data.
- Mobile-specific navigation transitions were not analyzed.
- Success/Error semantic colors were not present in the analyzed page fragments.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://lookingforwardconsulting.com | Desktop 1440 | 2026-06-06 |
| About Us | https://lookingforwardconsulting.com/about | Desktop 1440 | 2026-06-06 |