ARCO PASS · documentação viva

Design system

Resort de praia no sul da Bahia com herança italiana. Sol, areia e mar. O arco-íris aparece só como detalhe: faixa fina e barra de progresso. Cores laranja, amarelo e ciano vêm do site oficial do resort. Arquivos: ds/tokens.css, ds/components.css, ds/arco.js.

Cores

Faixa arco-íris

Tipografia

Fraunces (títulos, eixo óptico) · Manrope (texto)

Bem-vindos ao Arco

Sunset no Terrazzo às 18h30

Roteiro do dia da família

Texto corrido em Manrope. Escala fluida com clamp(), de 320px a 2560px sem quebrar.

Texto pequeno para legendas e apoio.

Espaço e raio

Base 4: 4 · 8 · 12 · 16 · 24 · 32 · 48 · 64

Raio: 12 · 20 · 28 · pill

122028pill

Componentes

Botões

Chips de filtro

Badge Arco Coins · selo dado simulado

320 Arco Coinsdado simulado
Deck de frente para o mar

Sunset Terrazzo

18h30Terrazzo Al Mare
+120
foto: arvorismo

Card com placeholder

Quando falta foto oficial

Barra de progresso arco-íris

640 de 1.000 para Embaixador Arco

Selos de conquista

🌳
Arvorismo
📸
Pôr do sol
⭐
Avaliação

Timeline do roteiro

  1. 09h30

    Canoagem

    Praia de Taperapuan

  2. 16h

    Hidratação pós-sol

    Horário especial no salão

  3. 18h30

    Sunset Terrazzo

    Pizza, burger e crepe com o pôr do sol

Seletor de horário

Raspadinha digital

Chaveiro do Arcoretire na lojinha

Cartão de membro

ARCO PASSArco Gold
Família Souza
ARCO 0214 2026
dado simulado Receita do salão (30 dias) R$ 13.153 ▲ 32,9%
Base
R$ 9.899
Meta
+30%

Slider do simulador

Toast

Bottom nav do app

Moldura de celular (desktop)

Conteúdo do app aqui