# Lapieza Design System

> High-contrast professional canvas utilizing deep slate foundations, vibrant red accents, and a geometric sans-serif hierarchy to signal recruitment authority.

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

## TL;DR
Lapieza is built on a high-contrast foundation of pure white (#ffffff) and deep slate (#2c3e50), punctuated by a high-voltage primary red (#d40000). The typography is dominated by **SofiaProRegularAz**, which handles massive display sizes up to 64px with heavy weights (700-800) for maximum impact. UI elements favor generous rounding, with cards utilizing a 16px radius and primary actions appearing as pill-shaped or 8px-radius blocks. The system uses a strict 4px base unit for spacing, often manifesting in large 80px section gaps to maintain a clean, professional atmosphere.

## Signature DNA
1. **The Power Red Accent** (#d40000 used for critical CTAs and semantic emphasis in headlines, creating a clear path for user conversion against neutral backgrounds).
2. **Heavyweight Geometric Display** (SofiaProRegularAz at weights 700+ and large 64px sizes creates a bold, trustworthy recruitment brand voice).
3. **Slate-to-White Contrast** (The interplay between #2c3e50 surfaces and #ffffff text ensures high legibility and a "corporate-modern" aesthetic).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Page background, primary surface | 97 | 0.8 | computed_style |
| `{color.ink}` | `#000000` | Primary body text | 76 | 0.8 | computed_style |
| `{color.slate}` | `#2c3e50` | Secondary surfaces, dark mode cards, headings | 22 | 0.8 | computed_style |
| `{color.charcoal}` | `#232323` | Footer background, deep text | 20 | 0.8 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#d40000` | Primary CTA background, text emphasis | 11 | 0.8 | computed_style |
| `{color.accent-blue}` | `#007aff` | Swiper theme color, interactive accents | 1 | 0.5 | declared_token |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|---|
| SofiaProRegularAz | 400, 500, 700, 800 | Display, Headings | Montserrat | Proprietary |
| Syne-SemiBold | 400, 800 | Sub-headings, UI labels | Syne (Google) | Open Source |
| Urbanist-Medium | 400 | Body copy | Urbanist (Google) | Open Source |
| Roboto | 400, 500 | Supplemental body | Roboto (Google) | Open Source |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|---|
| `{type.display-xl}` | 64px | 96px | normal | 700 | Hero H1 | `h1` |
| `{type.display-lg}` | 48px | 57.6px | normal | 800 | Section Display | `span.MuiTypography-sofia` |
| `{type.heading-md}` | 25px | 35px | normal | 800 | Sub-section head | `h4.sc-8060dfaa-3` |
| `{type.heading-sm}` | 20px | 25.6px | 0.18px | 400 | Card titles | `p.MuiTypography-body1` |
| `{type.body-lg}` | 18px | 24.3px | 0.16px | 400 | Lead paragraph | `p.MuiTypography-body1` |
| `{type.body-md}` | 16px | 24px | normal | 400 | Default body | `p.info-text-black` |
| `{type.body-sm}` | 15px | 23px | normal | 400 | Navigation links | `a` |
| `{type.caption}` | 12px | 17.25px | 0.10px | 400 | Small metadata | `p.MuiTypography-body1` |

### Principles
1. **Red for Emphasis:** Use `#d40000` for exactly one word in a headline to draw focus.
2. **Contrast Ratio:** Maintain at least 11:1 contrast for slate text on white backgrounds.
3. **Display Weight:** Headlines should never drop below 700 weight when using SofiaPro.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 16 |
| `{space.sm}` | 12px | 8 |
| `{space.md}` | 24px | 15 |
| `{space.lg}` | 32px | 4 |
| `{space.section}` | 80px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default containers | 131 occurrences |
| `{radius.sm}` | 8px | Primary Cards / Buttons | Card component |
| `{radius.md}` | 16px | Feature Cards | Card (observed_once) |
| `{radius.lg}` | 32px | Floating Panels | Card (observed_once) |
| `{radius.pill}` | 3996px | Global CTAs | pill role |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.08) 0px 4px 12px 0px` | Feature cards | Pricing/About pages |
| `{shadow.strong}` | `rgba(0, 0, 0, 0.2) 0px 2px 8px 0px` | Hovered/Active cards | Homepage |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** All
**Spec:** Background `{color.primary}` (#d40000) / Text `{color.canvas}` (#ffffff) / Radius `{radius.pill}` (3996px) / Typography `{type.body-md}`
**States observed:** Default: Captured | Hover: Not captured

#### Footer
**Role:** Global site navigation and legal
**Pages observed:** All
**Spec:** Background `{color.charcoal}` (#232323) / Text `{color.canvas}` (#ffffff) / Padding 80px top
**States observed:** Default: Captured

### Tier 2: Patterns

#### Feature Card
**Role:** Displaying community benefits or pricing tiers
**Pages observed:** Pricing, About
**Spec:** Background `{color.primary}` (#d40000) / Text `{color.canvas}` (#ffffff) / Radius 8px / Padding 20px 16px
**States observed:** Default: Captured

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** Homepage, About
**Spec:** Border-bottom 1px solid #e5e5e5 / Text `#000000` / Icon color `{color.primary}` (#d40000)
**States observed:** Default: Captured

### Tier 3: Surface-specific

#### Dark Feature Block
**Role:** High-impact content sections
**Pages observed:** Homepage
**Spec:** Background `{color.slate}` (#2c3e50) / Text `{color.canvas}` (#ffffff) / Radius 16px / Padding 80px 24px
**States observed:** Default: Captured

#### Logo Carousel
**Role:** Social proof
**Pages observed:** Homepage
**Spec:** Background `{color.canvas}` (#ffffff) / Border 1px solid #eeeeee / Radius 12px
**States observed:** Default: Captured

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

## Do's
- Use `#d40000` for the primary "Sign Up" or "Apply" actions.
- Set main headlines in SofiaProRegularAz at 700 weight or higher.
- Apply 80px vertical spacing between major content sections.
- Use 16px radius for large slate-colored feature containers.
- Ensure all body text uses Urbanist-Medium for maximum legibility.

## Don'ts
- **Wrong:** Using `#007aff` for primary buttons. **Right:** Use `#d40000`. **Reason:** Blue is reserved for swiper/technical tokens, not brand CTAs.
- **Wrong:** Using sharp corners for cards. **Right:** Use 8px or 16px radius. **Reason:** The brand identity relies on soft geometric containers.
- **Wrong:** Mixing SofiaPro and Urbanist in the same text block. **Right:** SofiaPro for heads, Urbanist for body.

## Quick start

```css
:root {
  --lp-color-primary: #d40000;
  --lp-color-slate: #2c3e50;
  --lp-color-canvas: #ffffff;
  --lp-font-display: 'SofiaProRegularAz', sans-serif;
  --lp-font-body: 'Urbanist-Medium', sans-serif;
  --lp-radius-card: 16px;
  --lp-shadow-subtle: rgba(0, 0, 0, 0.08) 0px 4px 12px 0px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using #d40000 background, white text, and a pill-shaped border radius."
- "Create a feature section with a #2c3e50 background, 16px border radius, and 80px of internal top padding."
- "Style an H1 headline using SofiaProRegularAz at 64px with a 96px line height and weight 700."

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