# Nolab Design System — always-on rules

Nolab is a cross-border luxury real-estate investment platform (Mexico, Spain,
USA, Dubai). The brand is editorial, sober, and place-led: **Live Beyond. Belong.**

Build with the system's components and CSS custom properties. Never invent raw
hex, px type sizes, or ad-hoc spacing when a token exists.

## Hard constraints (never violate)

1. **Nolab Blue `--blue-500` is a functional accent only (~3% of any surface).**
   Allowed: active states, secondary navigation, links, focus rings,
   microinteractions, emphasis indicators, the Dot. Forbidden: section
   backgrounds, button fills, large surfaces, general fills, gradients.
2. **Primary CTAs are Charcoal, never blue.** `<Button variant="primary">` is the
   conversion action — one per view. Everything secondary is `variant="ghost"`;
   over photography use `variant="paper-ghost"`.
3. **Every numeral is set in Plus Jakarta Sans (`var(--font-sans)`).** Prices,
   currency, price labels, stats, dates, counts, chart values, spec lines.
   Never Playfair Display. Use `font-variant-numeric: tabular-nums` in tables,
   axes, and aligned comparisons.
4. **Tagline lockup:** "Live Beyond." in Playfair Display roman, "Belong." in
   Playfair Display *italic*. Always. The same roman + italic-keyword treatment
   is the house headline pattern.
5. **Logo clear space:** keep 1× the logo height free on all four sides. The
   Instagram Story lockup is fixed at 32px tall with ≥32px clearance.
6. **No emoji. No exclamation marks.** The luxury register does not shout.
7. **Palette distribution:** Porcelain base ~80%, Charcoal dark sections ~10%,
   Graphite text ~7%, Nolab Blue ~3%.

## Typography

- `--font-display` (Playfair Display): headlines, property names, editorial
  messages. Italicise the keyword for emphasis.
- `--font-sans` (Plus Jakarta Sans): body, UI, and all figures.
- Eyebrows and overlines: uppercase, `--tracking-wider`, `--text-xs`.
- Body runs generous: `--leading-body` (1.62).

## Shape and surface

- Radii are restrained: images and primary buttons are square (`--radius-none`);
  inputs and cards `--radius-sm` / `--radius-md`; pills and tags `--radius-full`.
- Shadows are cool and low-spread: `--shadow-sm` (cards), `--shadow-md`
  (menus), `--shadow-lg` (overlays). Never harsh black.
- Over photography use the frosted materials (`--glass-soft-*`,
  `--glass-status-*`) and the `--photo-overlay` scrim for legibility.
- Spacing follows the scale: 4–8 micro, 12–24 between elements, 32–80 between
  sections, 120–200 page margins.

## Voice

Aspirational, editorial, confident — never salesy. Speaks to *you*. Short
declarative sentences, two-to-four-word taglines. Title Case for navigation,
section headers, and status tags. Spanish-first bilingual (ES/EN); keep place
names native. Spec lines use a middot: `4 Recs · 4 Baños · 460 m²`. Prices carry
a trailing currency: `$19,500,000 MXN`, `175.000 €`.

We are: Premium · Contemporary · Sophisticated · International · Editorial ·
Selective · Technological · Human.
We are not: Ostentatious · Trendy · Inaccessible · Generic · Corporate ·
Mass-market · Cold · Transactional.

## Accessibility

Semantic elements always (`<button>`, `<a>`, `<label>`). Visible focus using
`--focus-ring` / `--shadow-focus`. Icon-only controls need an accessible name.
Text over photography requires the scrim.

## Setup

Import `src/design-system/nolab/theme.css` once at the app root. It carries the
fonts, tokens, and base reset. Components are imported from the barrel and are
styled with inline style objects reading CSS custom properties — there is no
Tailwind or CSS-in-JS runtime to configure.