Live the City — Descubra a cidade em tempo real

01 · Cores

Paleta calibrada para o dia-a-dia

Uma única cor de marca (coral) acompanhada de uma escala neutra quente e cores semânticas discretas.

Coral — Primária

--ltc-coral-*

50

--ltc-coral-50

100

--ltc-coral-100

200

--ltc-coral-200

300

--ltc-coral-300

400

--ltc-coral-400

500

--ltc-coral-500

600

--ltc-coral-600

700

--ltc-coral-700

800

--ltc-coral-800

900

--ltc-coral-900

Ink — Neutros quentes

--ltc-ink-*

25

--ltc-ink-25

50

--ltc-ink-50

100

--ltc-ink-100

150

--ltc-ink-150

200

--ltc-ink-200

300

--ltc-ink-300

400

--ltc-ink-400

500

--ltc-ink-500

600

--ltc-ink-600

700

--ltc-ink-700

800

--ltc-ink-800

900

--ltc-ink-900

Semânticas

Success--ltc-success

Warning--ltc-warning

Error--ltc-error

Info--ltc-info

Vibe — Energia do lugar

Calmo

Ideal para concentrar

Médio

Balanceado

Animado

Alta energia

02 · Tipografia

Geist + Instrument Serif

Geist Sans para voz de produto; Instrument Serif para momentos editoriais. Escala construída em passos de 1.25 com tracking negativo nos grandes.

Display LG

72 · Instrument Serif

Viva a cidade

Display

56 · Instrument Serif

Descubra o agora

H1

40 · Geist Sans

Lugares para viver hoje

H2

32 · Geist Sans

Experiências no seu ritmo

H3

24 · Geist Sans

O que está rolando agora

H4

20 · Geist Sans

Café na Vila Madalena

Body LG

18 · Geist Sans

Uma plataforma viva que mapeia a energia dos lugares em tempo real.

Body

16 · Geist Sans

Encontre bares, cafés, mirantes e experiências pela cidade.

Body SM

14 · Geist Sans

Suporte ao dia a dia — listas, descrições, formulários.

Caption

12 · Geist Sans

Rótulos auxiliares, metadados e micro-textos.

Overline

11 · Geist Sans

Descobrir agora

03 · Forma & profundidade

Bordas suaves, sombras quase imperceptíveis

Elevação é sinal, não decoração. Cards ficam discretos em repouso e ganham peso só em interação.

Border radius

xs

6px

sm

8px

md

12px

lg

16px

xl

24px

2xl

32px

full

∞px

Elevation

xs

sm

md

lg

xl

04 · Componentes base

Blocos de construção

Tudo abaixo é composto dos mesmos tokens e variantes. Um componente — muitas vozes.

Button

Variantes: primary, secondary, outline, ghost, link, destructive. Tamanhos sm → xl.

Input

Clean. Foco com anel discreto. Estados default, hover, focus, error, disabled.

Buscar lugar

Busca inteligente por vibe, região ou horário.

Seu email

Informe um email válido.

Disabled

Badge

Para categorias, vibes, estados e metadados.

NeutralSolidCoralOutlineAberto agoraLotadoFechadoNovoPill coralPill grande

Avatar

Fallback automático com iniciais. Agrupamento com empilhamento.

Card — variantes

Flat

Hairline border, sem sombra. Base para feeds densos.

Raised

Sombra sutil. Para módulos em superfícies neutras.

Interactive

Hover com leve elevação. Para cards clicáveis.

05 · Produto

Componentes específicos do Live the City

Construídos sobre a base para criar a personalidade do produto: PlaceCard, ExperienceCard, MapOverlayCard e VibeIndicator.

PlaceCard

Médio

Guilhermina Café

4.8

Café de especialidade·$$·320 m

BrunchWi-Fi

Animado

Rooftop Aurora

4.6

Bar · Coquetelaria·$$$·1.2 km

VistaDJ

Calmo

Livraria do Pátio

4.9

Livraria · Café·$·540 m

SilenciosoLiterário

Animado

Mercado São Jorge

4.7

Mercado · Gastronomia·$$·2.4 km

FeiraFood Hall

ExperienceCard

Ao ar livre

Pôr do sol no mirante secreto

por Clara Mendes

2hAté 6 pessoas

Gastronomia

Rota do café na Vila Madalena

por Coletivo Grão

3hAté 10 pessoas

Música ao vivo

Noite de jazz no subterrâneo

por Studio Corvo

4hAté 40 pessoas

MapOverlayCard

Aparece sobre o mapa quando um pin é selecionado. Vidro leve, elevação alta, ação primária clara.

VibeIndicator

calm

Calmobadge

bars

Calmodot

medium

Médiobadge

bars

Médiodot

lively

Animadobadge

bars

Animadodot

06 · Layout

Split view: mapa + feed

Estrutura base da tela de descoberta. Feed rolável à esquerda, mapa sticky à direita.

Abrir exemplo

Feed

Lista de PlaceCards + filtros sticky. Scroll independente.

Mapa sticky