# Ladezign Design System

> Sharp monochrome foundations punctuated by high-contrast serif headlines and circular geometric overlays.

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

## TL;DR
Ladezign utilizes a strict monochrome palette where absolute black (#000000) and pure white (#ffffff) define the structural boundaries. The system relies on a high-contrast typographic pairing of Times New Roman for authoritative display headers and Myriad Pro/PT Sans for functional UI and body text. Visual interest is generated through large-scale photographic backgrounds treated with color overlays and circular "lens" icons. Geometry is predominantly sharp (0px radius), with the notable exception of perfect circles (50px/50% radius) used for feature highlights and social iconography.

## Signature DNA
1. **The Circular Lens** (Large white circular outlines containing high-contrast icons, used to anchor the primary service tri-grid on the homepage).
2. **Serif Authority** (Times New Roman at 32px weight 700 used for primary conversion headlines, creating a traditional "agency" feel against a modern digital grid).
3. **Achromatic Depth** (Use of #cecfd2 and #454545 to create hierarchy without introducing hue, maintaining a professional, neutral canvas).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.black}` | `#000000` | Primary text, branding, icons | 37 | 0.8 | computed_style |
| `{color.white}` | `#ffffff` | Page background, button text, hero icons | 20 | 0.8 | computed_style |
| `{color.gray.dark}` | `#454545` | Secondary body text | 15 | 0.8 | computed_style |
| `{color.gray.mid}` | `#cecfd2` | Surface backgrounds, card fills | 6 | 0.6 | computed_style |
| `{color.ink}` | `#141412` | Alternative deep text | 6 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.orange}` | `#ff4704` | Decorative logo element (observed in screenshot) | <5 | 0.4 | screenshot_analysis |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Times New Roman | 400, 700 | Primary Display | Tinos | System |
| MyriadPro-Light | 300, 400, 700 | Body, UI Labels | Source Sans Pro | Licensed |
| PT Sans | 400 | Navigation, Body | PT Sans | Open Source |
| MyRiad Pro | 400 | Subheadings | Source Sans Pro | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.h1}` | 32px | normal | normal | 700 | Hero Heading | `h1:nth-of-type(1)` |
| `{text.h2}` | 30px | normal | normal | 400 | Section Heading | `span.leftarrow` |
| `{text.body.lg}` | 18px | normal | normal | 400 | Feature Text | `div.mhover.second` |
| `{text.nav}` | 17px | 17px | normal | 400 | Navigation Links | `a` |
| `{text.h3}` | 16px | normal | normal | 400 | Subheadings | `h3` |
| `{text.body}` | 15px | normal | normal | 400 | Header/Footer UI | `header#masthead` |
| `{text.menu}` | 15px | normal | normal | 400 | Menu Items | `li#menu-item-39` |
| `{text.caption}` | 14px | normal | normal | 400 | Small Links | `a` |

### Principles
1. **Serif for Impact:** Use Times New Roman only for high-level conversion headlines to signal authority.
2. **Sans for Utility:** All interactive elements and long-form body text must use PT Sans or Myriad Pro.
3. **Tight Verticality:** Navigation items use fixed line-heights (17px) matching their font size for a compact header footprint.

## Spacing
**Base unit:** 4px (approximated)
Table: | Token | Value | Occurrences |
|---|---|---|---|
| `{space.xs}` | 5px | 15 |
| `{space.sm}` | 8px | 12 |
| `{space.md}` | 12px | 9 |
| `{space.lg}` | 16px | 5 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default for sections, images, and containers | 75 occurrences |
| `{radius.full}` | 50px / 50% | Service icons, circular badges | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elev.flat}` | none | All cards and sections | 100% of analyzed components |

## Components

### Tier 1: Foundational

#### Service Icon
**Role:** Primary visual anchor for service categories.
**Pages observed:** https://ladezign.com
**Spec:** Background transparent / Border 2px #ffffff / Radius 50% / Padding 20px (approx)
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Service Card
**Role:** Large-scale navigation blocks in the hero section.
**Pages observed:** https://ladezign.com
**Spec:** Background #cecfd2 (or image overlay) / Text #ffffff / Radius 0px / Typography {text.body.lg}
**States observed:** Default: captured | Hover: captured (color shift observed in screenshot)

#### Social Icon Group
**Role:** Footer and contact section social links.
**Pages observed:** https://ladezign.com, https://ladezign.com/about
**Spec:** Background #cecfd2 / Text #ffffff / Radius 50% / Size 32px
**States observed:** Default: captured | Hover: not captured

### Tier 3: Surface-specific

#### Masthead Navigation
**Role:** Global site header.
**Pages observed:** https://ladezign.com, https://ladezign.com/about
**Spec:** Background #ffffff / Text #454545 / Height 60px / Typography {text.nav}
**States observed:** Default: captured | Active: captured (red/orange text color shift)

#### Footer Attribution
**Role:** Legal and copyright section.
**Pages observed:** https://ladezign.com
**Spec:** Background #ffffff / Text #000000 / Border-top 1px #cecfd2 / Typography {text.caption}
**States observed:** Default: captured

#### Contact Badge
**Role:** Phone number highlight in header.
**Pages observed:** https://ladezign.com
**Spec:** Text #ff4704 / Typography {text.nav} / Weight 700
**States observed:** Default: captured

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1170px |
| Section Padding | 40px - 60px |
| Grid | 3-column (Services), 4-column (Footer) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Service tri-grid stacks vertically; Navigation collapses to hamburger menu. |

## Imagery & decoration
- **Overlays:** Uses semi-transparent color washes (blue, green, gray) over photography to ensure text legibility.
- **Icons:** Thin-stroke white line art contained within circles.
- **Avoids:** Drop shadows, gradients, and rounded corners on rectangular containers.

## Do's
- Use #000000 for primary headings to ensure maximum contrast (21:1).
- Apply `{radius.full}` only to decorative icons and social links.
- Maintain sharp 0px corners for all structural layout boxes.
- Use Times New Roman 700 for the main "Ready to Grow" style headlines.
- Ensure 15px PT Sans is used for standard menu items.

## Don'ts
- **Wrong:** Using a sub-brand accent color for body text. **Right:** Use #454545 for body. **Reason:** Maintains parent brand's monochrome neutrality.
- **Wrong:** Applying border-radius to the Service Card containers. **Right:** Keep corners at 0px.
- **Wrong:** Using Times New Roman for navigation links. **Right:** Use PT Sans 17px.

## Similar brands
- Huge Inc (Monochrome, bold type)
- Design Within Reach (Achromatic, grid-heavy)
- Pentagram (Typography-first, high contrast)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-gray-dark: #454545;
  --color-gray-light: #cecfd2;
  --font-display: "Times New Roman", serif;
  --font-sans: "PT Sans", sans-serif;
  --radius-sharp: 0px;
  --radius-circle: 50%;
}
```

## Agent prompt examples
- "Generate a service section using a 3-column grid with #cecfd2 background cards and 0px border radius."
- "Create a hero headline using Times New Roman at 32px, weight 700, in #000000."
- "Design a circular icon button with a 2px white border and a transparent background."

## Known gaps
- Detailed hover states for the primary navigation were not fully captured in the style trace.
- Specific mobile breakpoint pixel values are inferred from standard responsive patterns as they were not explicitly declared in tokens.

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