# La-boite-immo Design System

> High-contrast professional real estate canvas anchored by a signature acid-lime primary and heavy Montserrat typography.

**Source:** https://la-boite-immo.com | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** None

## TL;DR
La-boite-immo utilizes a high-energy "monochrome plus one" system where a vibrant acid-lime primary (`#bed000`) punctures a strictly neutral foundation of white (`#ffffff`) and deep charcoal (`#393939`). The identity is defined by extreme typographic weight, frequently utilizing Montserrat at weight 800 for massive display headlines exceeding 100px. Component geometry favors a "pill" aesthetic with 50px radii on primary actions, contrasted against sharp 0px corners for structural containers. Depth is managed through high-contrast color blocking rather than complex gradients, using a specific lime-tinted shadow (`rgba(190, 208, 0, 0.1)`) to anchor interactive elements.

## Signature DNA
1. **Acid-Lime Punctuation:** The use of `#bed000` as the exclusive chromatic signal for CTAs, focus rings, and links against a high-contrast charcoal background.
2. **Heavyweight Display:** Massive Montserrat headlines at weight 800 (109px) that dominate the visual hierarchy and establish a bold, authoritative presence.
3. **The 50px Pill:** A consistent 50px border radius applied to all primary buttons and interactive "capsules," creating a soft, tactile contrast to sharp-edged section layouts.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--bs-body-bg` | `#ffffff` | Primary page background and card surfaces | 55 | 1 | Declared token |
| `--bs-emphasis-color` | `#393939` | Primary text, dark section backgrounds, and button text | 245 | 1 | Declared token |
| `--bs-body-color` | `#212529` | Secondary body text and UI labels | 12 | 1 | Declared token |
| `--bs-tertiary-bg` | `#f5f5f5` | Subtle section backgrounds and borders | 9 | 1 | Declared token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--bs-primary` | `#bed000` | Primary CTA background, active links, focus rings | 25 | 1 | Brand page |
| `--bs-primary-border-subtle` | `#e5ec99` | Decorative borders and light accents | 4 | 0.9 | Declared token |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--bs-form-valid-color` | `#18bc9c` | Success states and valid inputs |
| `--bs-form-invalid-color` | `#e74c3c` | Error states and validation |
| `--bs-warning-bg-subtle` | `#fdebd0` | Warning background alerts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Montserrat | 300, 400, 600, 700, 800 | All display, headings, and body copy | Montserrat (Google Fonts) | SIL Open Font License |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-hero` | 109px | 108.55px | normal | 800 | Homepage hero | `p` |
| `display-lg` | 64px | 76.8px | normal | 300 | Secondary heroes | `span.display-3` |
| `display-md` | 56px | 67.2px | normal | 300 | Section introductions | `span.display-4` |
| `heading-lg` | 40px | 52px | normal | 800 | Section titles | `h2` |
| `heading-md` | 32px | 36px | normal | 800 | Card group titles | `div.field--name-field-pa-title` |
| `body-bold` | 18px | 25.2px | normal | 700 | Navigation/Anchor items | `span.anchor-menu-item-text` |
| `body-md` | 14px | 19.6px | normal | 400 | Default running text | `a.anchor-scroll` |
| `button-label` | 13px | 13px | normal | 600 | CTA text | `a.btn.btn-primary` |
| `caption` | 11px | 12.6px | normal | 700 | Badges and labels | `div.badge` |

### Principles
1. **Weight Extremes:** Use weight 800 for primary impact and weight 300 for secondary display to create a sophisticated typographic rhythm.
2. **Tight Leading:** Large display sizes (100px+) use near 1:1 line height (108px) to keep word blocks cohesive.
3. **Functional Caps:** Small labels and badges frequently utilize bold weights (700) for legibility at 11px.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `--space-xs` | 8px | 3 |
| `--space-sm` | 12px | 4 |
| `--space-md` | 16px | 6 |
| `--space-lg` | 24px | 18 |
| `--space-xl` | 32px | 52 |
| `--space-xxl` | 40px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Main section containers, footer | 258 occurrences |
| `radius-sm` | 6px | Inputs and small cards | `role: input` |
| `radius-md` | 12px | Content cards and surfaces | `role: control` |
| `radius-pill` | 50px | Primary buttons and search bars | `role: panel` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-primary` | `rgba(190, 208, 0, 0.1) 0px 7px 9px 0px` | Primary CTA hover/active | 10 occurrences |
| `shadow-neutral` | `rgba(57, 57, 57, 0.15) 0px 8px 16px 0px` | Floating cards on white | 2 occurrences |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary call to action
**Pages observed:** All analyzed pages
**Spec:** Background: `#bed000` | Text: `#393939` | Radius: `50px` | Padding: `11px 24px` | Typography: `13px/600`
**States observed:** Default | Hover (Shadow: `rgba(190, 208, 0, 0.1)`) | Active: Captured

#### Secondary Pill
**Role:** Ghost/Outline action
**Pages observed:** https://la-boite-immo.com
**Spec:** Background: `transparent` | Text: `#393939` | Border: `1px solid #393939` | Radius: `50px`
**States observed:** Default | Hover: Captured

### Tier 2: Patterns
#### Content Card
**Role:** Feature display
**Pages observed:** https://la-boite-immo.com
**Spec:** Background: `#ffffff` | Border: `1px solid #f1f1f1` | Radius: `12px` | Padding: `24px` | Shadow: `rgba(57, 57, 57, 0.15) 0px 8px 16px 0px`

#### Status Badge
**Role:** Categorization
**Pages observed:** All analyzed pages
**Spec:** Background: `#393939` | Text: `#ffffff` | Radius: `0px` | Typography: `11px/700`

### Tier 3: Surface-specific
#### Dark Section Surface
**Role:** High-impact content bands
**Pages observed:** https://la-boite-immo.com
**Spec:** Background: `#393939` | Text: `#ffffff` | Radius: `0px`

## Layout
| Property | Value |
|---|---|
| Max-width | 1320px (standard container) |
| Section Gap | 72px |
| Column Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Display font-size reduces; 50px pill buttons become full-width. |
| Desktop | 1440px | Standard 12-column grid with 24px gutters. |

## Imagery & decoration
- **Graphics:** Uses lime-colored geometric accents (circles, semi-circles) to frame photography.
- **Photography:** High-quality, professional office and real estate imagery with natural lighting.
- **Avoidance:** No soft gradients or pastel colors; the brand stays strictly within the lime/charcoal/white triad.

## Do's
- Use `#bed000` for all primary interactive triggers.
- Apply `Montserrat` weight 800 for headlines to maintain brand authority.
- Use `50px` border radius for buttons to ensure a "pill" shape.
- Contrast `#393939` backgrounds with white text for maximum readability.
- Maintain sharp `0px` corners for large structural section blocks.

## Don'ts
- **Wrong:** Using `#bed000` for body text. **Right:** Use `#393939`. **Reason:** Accessibility; lime on white fails contrast for small text.
- Do not use rounded corners on main section containers.
- Do not use weights below 300 for Montserrat.
- Do not introduce secondary accent colors like blue or orange in UI components.

## Similar brands
- **Hess:** For the specific use of acid green against dark neutrals.
- **Shopify:** For the clean, high-contrast structural layout.
- **PropertyGuru:** For the professional real estate typographic hierarchy.

## Quick start
```css
/* CSS Variables */
:root {
  --primary: #bed000;
  --neutral-dark: #393939;
  --neutral-light: #f5f5f5;
  --font-main: 'Montserrat', sans-serif;
  --radius-pill: 50px;
  --shadow-primary: 0px 7px 9px 0px rgba(190, 208, 0, 0.1);
}
```

## Agent prompt examples
- "Generate a primary button using Montserrat 600, background #bed000, text #393939, and a 50px border radius."
- "Create a hero section with a Montserrat 800 headline at 109px and a background of #393939."
- "Design a feature card with a 12px border radius, white background, and a subtle #393939 shadow."

## Known gaps
- Hover states for tertiary links were not fully captured in the automated run.
- Mobile-specific navigation transitions were not analyzed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://la-boite-immo.com | 1440x900 | 2026-06-06 |
| Pricing | https://la-boite-immo.com/pricing | 1440x900 | 2026-06-06 |
| About | https://la-boite-immo.com/about | 390x844 | 2026-06-06 |