Little Maison

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/littlemaison.com -->
<!-- Extracted: 2026-08-30T00:43:50.187Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "Little Maison"
description: "Little Maison presents a professional web presence."
colors:
  primary: "#d9b76e"
  tertiary: "#31291c"
  neutral: "#6683a4"
  surface: "#ffffff"
  on-surface: "#31291c"
  on-surface-secondary: "#6683a4"
typography:
  display-lg:
    fontFamily: "Nib"
    fontSize: "45px"
    fontWeight: "400"
    lineHeight: "47.52px"
  body-md:
    fontFamily: "sans-serif"
    fontSize: "16px"
    fontWeight: "400"
rounded:
  md: "23px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-primary:
    backgroundColor: "#d9b76e"
    textColor: "#322a1d"
    rounded: "23px"
    padding: "12px 20px"
    fontSize: "13px"
    fontWeight: "400"
    borderColor: "#b0b57b"
    borderWidth: "1px"
---

# Little Maison — Design System

## Overview

The visual identity of Little Maison is defined by a rigorous commitment to professional clarity and understated elegance. The design atmosphere is clean, structured, and highly legible, prioritizing content hierarchy and spatial balance over decorative excess. This aesthetic draws from the precision of Swiss design principles, utilizing ample whitespace to create a sense of order and sophistication. The interface feels established and trustworthy, avoiding transient trends in favor of timeless structural integrity. Every element serves a functional purpose, contributing to a cohesive user experience that feels both modern and grounded.

The design is explicitly not playful, chaotic, or overly ornate. It rejects neon accents, heavy shadows, and cluttered layouts in favor of a minimalist approach that emphasizes readability and ease of navigation. The visual language is neutral yet warm, creating an environment where information is presented with authority and grace. The overall impression is one of calm competence, ensuring that the user’s attention remains focused on the core value proposition without distraction. This approach establishes a digital presence that is both inviting and distinctly professional, suitable for a brand that values precision and quality.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The color palette leverages #d9b76e as a strategic accent against a pure #ffffff surface to create a refined contrast. The primary gold tone conveys prestige and warmth without appearing ostentatious, while the white background ensures maximum readability and a sense of openness. This limited scheme reinforces a minimalist philosophy, using color sparingly to guide attention and highlight key interactions. The result is a clean, uncluttered interface that signals reliability and high standards through its restrained use of hue.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#d9b76e` | Burlywood |
| accent / tertiary | `#31291c` | Charcoal |
| background | `#ffffff` | White |
| text | `#31291c` | Charcoal |
| secondary text | `#6683a4` | Slate Gray |
| muted | `#6683a4` | Slate Gray |

## Typography

The type system relies exclusively on sans-serif fonts, specifically Nib, maison-neue-y0cn0o, and Helvetica, to ensure geometric consistency and modern legibility. This choice supports the brand’s professional archetype by favoring clarity and neutrality over decorative flair. The hierarchy is established through weight and scale rather than stylistic variation, creating a logical flow that guides the user effortlessly. The clean lines of these fonts reinforce the structured, orderly nature of the design, ensuring that text remains the primary vehicle for communication.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| sans-serif | body | system | 400 |
| Nib | heading | self-hosted | 400 |
| maison-neue-y0cn0o | body | self-hosted | 400 |
| Helvetica | body | system | 400 |
| AxelBold | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Nib | 45px | 400 | 47.52px | — |
| Body | sans-serif | 16px | 400 | — | — |

### Conventions

- Heading case — sentence-case

## Layout

- Base spacing unit — `2px`

## Shapes

Border-radius scale:

- `md` — 23px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Primary**

- Background — `#d9b76e`
- Text — `#322a1d`
- Radius — `23px`
- Padding — `12px 20px`
- Font size — `13px`
- Font weight — `400`
- Border — `1px solid #b0b57b`
- Sample copy — "Subscribe"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| favicon | — | ico | [link](brands/littlemaison.com/logo-0.ico) | 95% |

## Sources

- Official brand guidelines — https://www.notion.com/templates/brand-kit-template-notion-brand-guidelines-template?srsltid=AfmBOor4DFf9Caxu_4Rtd0MdsYIak9aOtFCfvKNSi9zDhv8-ov5erwE0
- Live brand page — https://extractvibe.com/brand/littlemaison.com
- Raw JSON — https://extractvibe.com/api/brand/littlemaison.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/littlemaison.com/design.md
- Extracted — 2026-08-30T00:43:50.187Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md