Home Listings Cities Guides Get Matched

Brazilkeys design system v1

The components, tokens, and rules that hold the site together.

Compass-influenced, Sotheby's-disciplined, Mansion-Global-readable. Listings-first, foreign-buyer-first, paid-listing-platform infrastructure.

01 · Principles

The five rules.

If these contradict anything else in the system, these win.

01

Listing photo first.

The photo carries the listing. Type, price, and metadata are deliberately quiet so the image does the selling.

02

Serif for the soul, sans for the work.

Fraunces handles all editorial display + listing titles. Inter handles UI, navigation, forms, metadata. Never mix on the same word.

03

Hairlines, not boxes.

1px rules in --rule on cream. We don't surround content with shadows or heavy borders. The rule's job is to align, not divide.

04

Gold is the signal, not the surface.

Muted gold (#b8924a) is reserved for accent — eyebrows, hover states, gold rule under listing titles. Never used as a background.

05

Plainspoken broker.

No Condé Nast cosplay. Don't write "this residence presents..." — write "five bedrooms, six bathrooms, the Atlantic in front." Numbers and named places do the work.

02 · Color

Palette.

Sophisticated, warm, restrained. No flag-green Brazil clichés; no jewel-tone saturation. A premium broker's wall, not a tropical brochure.

Inks

Midnight
--ink, --midnight
#0c1726
Ink 2
--ink-2
#2a3344
Muted
--ink-3
#6b7080
Caption
--ink-4
#a4a8b3

Surface

Bone (page bg)
--bone
#faf7f0
Bone 2 (alt section)
--bone-2
#f4efe3
Paper
--paper
#ffffff
Rule (1px hairline)
--rule
#e4dfd3

Accent

Gold (signal)
--gold
#b8924a
Gold-2 (on dark)
--gold-2
#d4a958
Emerald (avatar)
--emerald
#2d5a4f
Terracotta (negative)
--terracotta
#c97064

03 · Type

Type scale.

Two families. Fraunces serif for display + editorial. Inter sans for UI + metadata. Sizes use clamp() for fluid scaling.

Display H1
Property in Rio.
Fraunces 300
clamp(2.8rem, 6vw, 5.2rem)
Section H2
Sixty seconds. Live MLS.
Fraunces 300
clamp(2rem, 4vw, 3.4rem)
Card title H3
Joá cliffside villa, five suites.
Fraunces 400
1.4rem–1.8rem
Lede (italic serif)
The Atlantic in front, Pedra da Gávea behind, nine hundred square meters between.
Fraunces 300 italic
1.15rem–1.45rem
Body
Brazilkeys is a multi-broker listings platform. The first listings are Art de Vivre's Rio inventory; the platform expands market by market.
Inter 400
1.04rem · 1.7 lh
Eyebrow
ART DE VIVRE · CRECI RJ 009278/O
Inter 600 caps
0.72rem · 0.22em tracking
Metadata / UI
5 bd · 7 ba · 848 m² · R$ 28,000,000
Inter 400/500
0.84rem

04 · Spacing & layout

Rhythm.

Generous whitespace, large section gutters. The layout breathes; nothing crowds.

--max1320px (standard container); 1560px wide variant for listings grid
--gutterclamp(1.2rem, 3vw, 2.4rem) — horizontal page gutter
section paddingclamp(4rem, 8vw, 8rem) vertical
--radius4px (cards, buttons) · 8px (form inputs only)
grid gap (listings)2rem (row) · 1.6rem (col)
grid gap (cities)1.4rem

05 · Buttons

Buttons.

Four variants. Uppercase, letter-spaced, 2px radius, generous padding. Never use mixed-case button labels.

.btnpadding 1rem 2rem · text 0.82rem · letter-spacing 0.16em · uppercase · weight 600
.btn--primary--ink bg, --bone text — primary CTA (always one per section)
.btn--gold--gold bg, --bone text — secondary CTA, used on dark hero
.btn--ghosttransparent, --ink border — tertiary
.btn--smallpadding 0.7rem 1.4rem · text 0.72rem
.btn--blockwidth 100%, used in forms + side cards

06 · Listing card

The card that does all the work.

The most-rendered component on the site. 4:3 photo, hairline meta row, three numeric specs. Hovering lifts and zooms the photo.

ADV101 Joá villa Villa
Joá · Rio de Janeiro
Joá cliffside villa, five suites above the Atlantic
$2,984,000 R$ 15,000,000
5bd8ba800m²
.listing-card__photoaspect-ratio 4/3 · object-fit cover · hover: scale(1.06) 1s ease
.listing-card__tagtop:14 left:14 · backdrop-blur · 0.66rem caps · property type
.listing-card__favtop:14 right:14 · 36×36 circle · localStorage-backed heart toggle
.listing-card__locationeyebrow style · neighborhood · city
.listing-card__titleFraunces 300 · 1.4rem · 2-line max preferred
.listing-card__priceFraunces 400 · USD primary, BRL secondary in <small>
.listing-card__metahairline top border · 3 numeric pills · bd/ba/m²

07 · City tile

City tile.

4:5 portrait with photo + gradient overlay. Used on homepage to navigate to market hubs.

RJ · Rio de Janeiro

Rio de Janeiro

$2,730/m²11.4% STR

08 · Forms

Forms.

Label above input, all-caps eyebrow style. Inputs sit on --bone, 1px --rule border, focus state shifts to --gold border.

Get in touch

60 seconds. We reply within 2 business days.

09 · Editorial

Long-form article style.

Max-width 720px, two-tier hierarchy (Fraunces H2 sections, Inter H3 subsections), italic blockquotes, callout blocks for warnings, hairline FAQ.

The buying process, in plain English

Brazil treats foreign and domestic buyers identically on residential real estate. You need a CPF, funds wired in through a registered FX operation, and a signed escritura at the cartório.

Step 1 — Get a CPF

The CPF is the Brazilian tax ID. You cannot wire money, sign a contract, or register an escritura without it.

An advogado who knows foreign-buyer transactions will charge more than a generalist. They're worth it.

The sinal is binding.

Walk away after signing the preliminary contract and you forfeit the 10% deposit.

10 · Voice

Voice rules.

Plainspoken broker, not luxury magazine. Numbers and named places, not adjectives.

Don't write

"This breathtaking residence presents an unparalleled opportunity to experience the very essence of Brazilian coastal living."

Write this

"Five suites, six bathrooms, 900 m². The Atlantic in front, Pedra da Gávea behind. $4,000 / night."

Don't write

"You don't visit Brazil — you inhabit it."

Write this

"Most foreign buyers we work with spend 60–90 days a year in country. The investor visa accommodates that."

The voice tests.

Before publishing any copy, three checks: (1) Would a CRECI broker say this on a phone call? (2) Does it contain at least one number or named place per paragraph? (3) Could you remove the adjective without losing meaning? If yes — remove it.