Flow Hotels · Brand System

FlowSystem

Everything that makes the site look like the site — the logos, the color, the type, the pieces — in one place you can lift from.

v1 · draft · built from flowhotels.mx · not public

01 · The marks

Logos

The W monogram and the five logotypes. Click SVG to copy the vector; use the small links to download black, white and with‑W versions.

02 · The palette

Color

Click any swatch to copy its hex. Two families: the Frame holds the page together; the Street is lifted from CDMX photos and lives in objects and light — never in the type or the layout.

The Frame structure · cream, wood, ink, gold

The Street sampled from the city · lives in the photos

03 · The three faces

Type

Three typefaces, three jobs — plus one display face for the experience shelf. All self‑hosted. The whole system is tracked −3% (letter-spacing:-.03em) on brand and display type.

Google Sans Flex— the brand · lockup, headlines, UI
FlowCondesa
200 ExtraLight300 Light400500700 Bold

The value is the weight axis: Flow set Bold 700, the place‑word ExtraLight 200, solid, no space. Variable 1–1000.

Newsreader— the story · long‑form, captions
The brand talks about how the city is lived, not about the rooms.

The only place the brand sounds literary. Composes Spanish well.

Space Mono— the proof · prices, hours, addresses, dates
$2,480 MXN · 15:00 → 12:00 · 19.412, −99.171

Monospace says “this is data, verify it.” 400 and 700.

Bebas Neue— the shelf · experience‑card names
LUCHA LIBRE NIGHT · MERCADO MEDELLÍN

The condensed display face used only on the Biajeros “departures” cards.

04 · The pieces

Components

Live pieces straight from the site. Copy code gives you the self‑contained HTML + CSS for each one.

Booking CTA .go
WhatsApp pill .fWa
FlowCondesa
Section kicker .kicker
Before you book
Room card .card
Junior Suite Junior Suite36 m² · king · street‑facing

05 · The doctrine

Rules

The few things that aren’t up for taste. Deeper versions live in brand/ in the vault.

The lockup

Flow + place

“Flow” Bold 700, the place‑word ExtraLight 200 — set solid, no space, hyphen or period. FlowCondesa · FlowPolanco · FlowWTC.

Tracking

−3%

All brand and display type is tracked -.03em. Labels and eyebrows invert to positive tracking.

Color

Lifted, not chosen

Every color comes from a real CDMX photo. Color lives in the light and the objects — the type and the layout stay neutral.

Voice · five words

Sardónico · Cálido · Pro‑ciudad · Anti‑trampa‑turística · Bilingüe solo cuando se lo gana

Photography · the Funk

Hard direct flash, visible grain, punchy saturated color, slightly‑too‑close framing. A 2001 music magazine, not a hotel brochure. The one sin is glossy.

Governance

Nothing ships on taste. Three tests: COST (did it cost something to make), OVERHEAR (would a local repeat it), GIFT (does it give before it asks).

Copied