Feira do Rolo de Conquista Design SystemLegacy format
Local classifieds marketplace for Vitória da Conquista, Brazil with shared brand red across public site and dashboard surfaces
Color Palette
Brand
Public site neutrals
Dashboard: light theme (default)
Dashboard: dark theme (`.dark` class, defined but not enabled yet)
Semantic / status
Gradients
Typography
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.
Spacing
Base: 4pxLocal classifieds marketplace for Vitória da Conquista, Brazil with shared brand red across public site and dashboard surfaces
Components
Buttons
Inputs
Elevation & Depth
Do's & Don'ts
Do
Don't
Guidelines
Do
• Reserve #DF3333 for the single most important action per view and for "featured" signals. Never use it for errors (use #EF4444).
• Let photos lead on the public site: 4:3 images, white cards, hairline borders, minimal chrome.
• Use pill shapes (rounded-full) for header actions and chips, and 10–12px radii for inputs and cards.
• Keep tap targets ≥ 44px on mobile, and use 16px nav text so the site stays readable on small phones.
• Use the CSS variables (bg-background-surface, text-text-secondary, border-background-border) in the dashboard so the dark theme works once it is enabled.
• Write copy in pt-BR that is direct and friendly: "Anunciar grátis", "Entrar na conta", "Gerencie anúncios e mensagens".
• Format money as BRL (R$ 1.234,56) and show installments under featured prices.
Don't
• Don't mix the two type systems: Alexandria stays on the public site and Instrument Sans in the dashboard.
• Don't use the fdr-* hex tokens inside the dashboard, or the dashboard CSS variables on the public site.
• Don't add heavy shadows to resting cards. Elevation appears only on hover and for overlays.
• Don't introduce new accent hues. The palette is red, teal and neutrals only, plus status colors.
• Don't rely on dark mode for the public site. It is light-only by design.
Tone: local, trustworthy, practical. "The neighborhood flea market, organized." The UI feels like a clean classifieds board, not a flashy e-commerce store.
Use with MCP
Don't have the MCP? Install it here