# Nolab Design System — instructions for Lovable

Paste this whole file into Lovable as your prompt, and upload `nolab.css`,
`tailwind-nolab.config.js` and the `logos/` folder to the project.

---

## What to do

1. Add `nolab.css` to `src/` and import it once in `src/main.tsx` (after `index.css`).
2. Merge the `extend` block from `tailwind-nolab.config.js` into `tailwind.config.ts`.
3. Put the SVGs from `logos/` in `public/logos/`.
4. Restyle every existing screen to the rules below. Do not change app logic,
   routes, or data — this is a visual refit only.

## Brand

Nolab — cross-border luxury real-estate investment platform (Mexico, Spain, USA, Dubai).
Tagline: **Live Beyond. Belong.** Editorial, premium, sober, photography-led.
We are: premium, contemporary, sophisticated, international, editorial, selective, human.
We are not: ostentatious, trendy, generic, corporate, mass-market, cold, transactional.

## Color rules (non-negotiable)

Distribution: Porcelain `#F5F4F1` base **80%** · Charcoal `#12171B` dark sections **10%** ·
Graphite `#373C3F` text **7%** · Nolab Blue `#3A2FF2` accent **3%**.

- Nolab Blue is a **functional accent only**: links, active states, focus rings,
  microinteractions, the brand Dot. **Never** a section background, never a button fill,
  never a large surface.
- **Primary CTA is Charcoal, never blue.**
- Vertical colors: Terracotta `#9E654E` = Nolab Fractional · Forest `#2F4A3E` = Nolab Rentas.
- No gradients other than the photo protection veil. No noise, textures or patterns.

## Typography

- **Playfair Display** — headlines and property names. Emphasise a keyword with
  *italic*, never bold. In the tagline, "Live Beyond." is roman and "Belong." is
  **always italic**.
- **Plus Jakarta Sans** — all UI, body, labels, spec lines, and **every number**
  (prices, m², counts) — never the serif for figures.
- Eyebrows/overlines: uppercase, 11–12px, letter-spacing `0.14em`, muted grey.
- Max two families. Avoid heavy bold; editorial weight comes from size and space.

## Shape & elevation

- Radius: **buttons and images = 0px**, inputs 4px, cards 8px, special cards 16px,
  pills/tags 999px. Sharp reads luxury; nothing bubbly.
- Shadows: three cool-tinted tiers only (cards `0 2px 8px rgba(18,23,27,.06)`,
  menus `0 10px 30px rgba(18,23,27,.10)`, modals `0 24px 60px rgba(18,23,27,.16)`).
- Spacing on an 8px grid; sections 120–200px of vertical air; container max 1240px.
  Generous whitespace is part of the brand — do not fill it.

## Components (classes ship in nolab.css)

- `.nl-btn.nl-btn--primary` — outlined Charcoal, uppercase tracked label, **fills
  Charcoal on hover**. One primary per view.
- `.nl-btn.nl-btn--ghost` — borderless uppercase text, turns Nolab Blue on hover.
  Use for all secondary actions and in-card CTAs.
- `.nl-btn.nl-btn--paper-ghost` — the only button over photography / dark surfaces.
- `.nl-property` — property card: portrait 5:6 photo, frosted status pill,
  serif name → price (sans) → icon spec line → uppercase tracked location.
  Photo scales 1.04 on hover inside an `overflow:hidden` frame.
- `.nl-pill` — frosted status pill over photos ("Just Listed", "Nolab Exclusive",
  "Pre-sale", "Most Luxurious"). `.nl-chip` — solid vertical chip.
- `.nl-card` — white surface, hairline border, shadow lift on hover, for non-photo content.
- `.nl-section--dark` / `--paper` — alternate Charcoal and warm-paper bands for rhythm.

Tags classify supporting information only — never use a tag as a button, never
stack several on one element, never invent a fourth tag style.

## Icons

Thin line icons, 1.75px stroke, `currentColor`, sized 16/18/20/24. Use **lucide-react**.
Blue only when interactive/active. No emoji, ever.

## Imagery

Large full-bleed property photography is the hero device. Editorial not promotional,
natural light, warm neutrals, real spaces, people inhabiting them. When text sits on a
photo, protect it with the Charcoal veil (`.nl-photo-veil`, 0 → 78% over the lower
third) — only when contrast is low, never a flat tint on every image.

## Motion

Calm and editorial: fades and gentle slides, `cubic-bezier(0.22,1,0.36,1)`, ~260ms.
Image zoom on hover, primary button inverts, cards raise elevation, press = scale(0.98).
No bounce, no spring, no looping decorative animation.

## Copy

Spanish-first, bilingual ES/EN. Aspirational and place-led. Title Case for nav and
section headers; UPPERCASE tracked eyebrows. Short declarative sentences, two-to-four
word taglines. No exclamation marks, no emoji. Spec line: `4 Recs · 4 Baños · 460 m²`.
Prices: `$19,500,000 MXN` / `175.000 €`, always in Plus Jakarta Sans.
Keep place names native (Polanco, Bosques de las Lomas, Marbella).

## Logos

`logos/nolab-primary.svg` (Charcoal wordmark, blue dot) on light surfaces ·
`logos/nolab-reverse.svg` or `nolab-mono-light.svg` on Charcoal and photography ·
`nolab-fractional-primary.svg` / `nolab-rentas-primary.svg` for the verticals.
Never recolor, redraw, or retype the wordmark.