--- version: alpha name: Vivificar description: A civic-cultural identity for rural revitalization in the Douro — electric chartreuse-yellow canvas accents against deep midnight-navy ink, a vivid orange action color, and ABC Favorit grotesque set with confident weight. Bold, warm, editorial, community-facing. colors: # Canvas + ink background: "#ffffff" surface: "#ffffff" surface-soft: "#f3f4f6" ink: "#172640" # midnight navy — primary text ink-deep: "#091221" # near-black navy ink-warm: "#2b0b00" # warm dark brown ink (on yellow) # Brand accents signal-yellow: "#faed5f" # the brand chartreuse — theme-color, hero panels signal-yellow-soft: "#fcf164" primary: "#ff4e10" # vivid orange — the action color primary-hover: "#ff6146" ember: "#ff8c37" # Secondary accents (playful supporting palette) mint: "#3fbe9b" mint-light: "#61e2be" pink: "#ffc0f6" violet: "#6d55ff" # Neutral scale gray-900: "#111827" gray-700: "#374151" gray-600: "#4b5563" gray-500: "#6b7280" gray-400: "#9ca3af" gray-300: "#d1d5db" gray-200: "#e5e7eb" gray-100: "#ebebeb" gray-50: "#f3f4f6" # Links / interactive link: "#2563eb" # On-color on-primary: "#ffffff" on-yellow: "#172640" on-ink: "#ffffff" # Borders border: "#e5e7eb" typography: display-hero: fontFamily: "ABC Favorit, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif" fontSize: 60px fontWeight: 800 lineHeight: 1.05 letterSpacing: -1.5px display: fontFamily: "ABC Favorit, ui-sans-serif, system-ui, sans-serif" fontSize: 54px fontWeight: 700 lineHeight: 1.1 letterSpacing: -1px section-heading: fontFamily: "ABC Favorit, ui-sans-serif, system-ui, sans-serif" fontSize: 40px fontWeight: 700 lineHeight: 1.15 letterSpacing: -0.5px sub-heading: fontFamily: "ABC Favorit, ui-sans-serif, system-ui, sans-serif" fontSize: 30px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.25px card-title: fontFamily: "ABC Favorit, ui-sans-serif, system-ui, sans-serif" fontSize: 24px fontWeight: 600 lineHeight: 1.25 letterSpacing: 0px body-large: fontFamily: "ABC Favorit, ui-sans-serif, system-ui, sans-serif" fontSize: 20px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px body: fontFamily: "ABC Favorit, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 400 lineHeight: 1.6 letterSpacing: 0px body-medium: fontFamily: "ABC Favorit, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 500 lineHeight: 1.5 letterSpacing: 0px button-ui: fontFamily: "ABC Favorit, ui-sans-serif, system-ui, sans-serif" fontSize: 16px fontWeight: 600 lineHeight: 1.0 letterSpacing: 0px caption: fontFamily: "ABC Favorit, ui-sans-serif, system-ui, sans-serif" fontSize: 14px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0px label-mono: fontFamily: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace" fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.5px spacing: xs: 4px sm: 8px md: 12px lg: 16px xl: 24px 2xl: 40px 3xl: 64px 4xl: 96px rounded: none: 0px xs: 2.5px sm: 5px md: 6px lg: 10px pill: 9999px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px button-primary-hover: backgroundColor: "{colors.primary-hover}" textColor: "{colors.on-primary}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px button-yellow: backgroundColor: "{colors.signal-yellow}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px button-secondary: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.button-ui}" rounded: "{rounded.pill}" padding: 14px 28px borderColor: "{colors.ink}" badge: backgroundColor: "{colors.signal-yellow}" textColor: "{colors.ink-warm}" typography: "{typography.caption}" rounded: "{rounded.pill}" padding: 4px 12px card: backgroundColor: "{colors.surface}" textColor: "{colors.ink}" rounded: "{rounded.lg}" padding: 24px borderColor: "{colors.border}" card-feature: backgroundColor: "{colors.signal-yellow}" textColor: "{colors.ink-warm}" typography: "{typography.card-title}" rounded: "{rounded.lg}" padding: 32px input: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body}" rounded: "{rounded.md}" padding: 10px 14px borderColor: "{colors.gray-300}" input-focus: backgroundColor: "{colors.background}" borderColor: "{colors.primary}" nav-bar: backgroundColor: "{colors.background}" textColor: "{colors.ink}" typography: "{typography.body-medium}" padding: 16px 24px borderColor: "{colors.border}" --- # Vivificar Design System ## Overview Vivificar is the visual identity of a civic-cultural program tackling rural depopulation across four low-density municipalities in Portugal's Douro region. The name fuses "animar" (to animate), "viver" (to live) and "ficar" (to stay), and the design carries that same warmth and vitality — this is community-facing design that wants to feel alive, not institutional. The system pairs a deep midnight-navy ink (`{colors.ink}`) with an electric chartreuse-yellow (`{colors.signal-yellow}`) and a vivid orange action color (`{colors.primary}`), producing a palette that reads as both editorial and joyful. The typographic voice is ABC Favorit, a contemporary Swiss grotesque with subtly humanist details — set heavy (700–800) at display sizes for a confident, poster-like presence. Headlines compress with slight negative tracking; body copy stays generous and readable at 1.6 line-height. The single typeface across the whole interface keeps the system coherent while the bold weights do the expressive work. Color is the loudest move. The brand yellow (`{colors.signal-yellow}`, also the page `theme-color`) appears as full-bleed panels and feature cards, always carrying dark warm-brown or navy text for contrast rather than white. Orange owns every primary action. A playful supporting cast — mint (`{colors.mint}`), pink (`{colors.pink}`), violet (`{colors.violet}`) — surfaces in illustration and accent moments, signaling the program's creative, optimistic character without crowding the core navy-and-yellow structure. **Key Characteristics:** - ABC Favorit grotesque set heavy (700–800) at display, generous 1.6 line-height in body - Electric chartreuse-yellow (`{colors.signal-yellow}`) as the signature panel/canvas accent — the `theme-color` - Vivid orange (`{colors.primary}`) reserved for primary actions - Midnight-navy ink (`{colors.ink}`), warm-brown ink (`{colors.ink-warm}`) on yellow surfaces - Pill-shaped buttons (`{rounded.pill}`) and badges - A playful supporting palette (mint, pink, violet) for illustration accents - Editorial, warm, community-facing tone over corporate polish ## Colors ### Primary - **Midnight Navy** (`{colors.ink}`): Primary text, headings, ink on light surfaces. - **Pure White** (`{colors.background}`): Page background, card surfaces. - **Signal Yellow** (`{colors.signal-yellow}`): The brand chartreuse — hero panels, feature cards, theme color. ### Action - **Vivid Orange** (`{colors.primary}`): Primary buttons and calls to action. - **Orange Hover** (`{colors.primary-hover}`): Hover state for the action color. - **Warm Ink** (`{colors.ink-warm}`): Dark warm-brown text used on yellow surfaces. ### Supporting Accents - **Mint** (`{colors.mint}`) / **Mint Light** (`{colors.mint-light}`): Illustration and accent moments. - **Pink** (`{colors.pink}`): Soft accent in graphics. - **Violet** (`{colors.violet}`): Playful accent in graphics. ### Neutral Scale - **Gray 900** (`{colors.gray-900}`): Strong secondary text. - **Gray 600** (`{colors.gray-600}`): Body secondary text. - **Gray 500** (`{colors.gray-500}`): Muted/tertiary text. - **Gray 400** (`{colors.gray-400}`): Placeholder, disabled. - **Gray 200** (`{colors.gray-200}`): Borders, dividers. - **Gray 50** (`{colors.gray-50}`): Subtle surface tint. ### Interactive - **Link** (`{colors.link}`): Inline hyperlinks. ## Typography ### Font Family - **Primary**: `ABC Favorit`, with system grotesque fallbacks (`ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif`). - **Monospace**: `ui-monospace, SFMono-Regular, Menlo, Monaco` for small technical labels. ### Hierarchy The complete type scale lives in the `typography:` token block above. Reference tokens directly (`{typography.display-hero}`, `{typography.body}`). | Token | Use | |---|---| | `display-hero` | 60px hero — poster-weight headline | | `display` | 54px large display | | `section-heading` | Section titles | | `sub-heading` | Sub-sections | | `card-title` | Card headings | | `body-large` | Lead paragraphs | | `body` | Standard reading text | | `body-medium` | Navigation, emphasized text | | `button-ui` | Buttons | | `caption` | Metadata, badges | | `label-mono` | Small technical labels | ### Principles - **One typeface, weight does the work**: ABC Favorit across everything; expression comes from weight (400 body → 800 display), not from mixing families. - **Heavy display, generous body**: Headlines go 700–800 with slight negative tracking; body stays 400 at 1.6 line-height for readability. - **Confident, not corporate**: The grotesque reads warm and human, fitting a community program rather than a tech product. ## Layout ### Spacing System The complete scale lives in the `spacing:` token block above. Base rhythm around 8px with large jumps (`{spacing.3xl}` 64px, `{spacing.4xl}` 96px) between full-bleed color sections. ### Grid & Container - Generous centered content column with comfortable margins. - Full-bleed colored panels (yellow, navy) used to chunk the page into bold editorial blocks. - Card grids for projects/events, collapsing to single column on mobile. ### Whitespace Philosophy - **Color blocks as structure**: Sections separate by switching full-bleed background color, not just spacing. - **Breathing room**: Large vertical padding between panels keeps the bold palette from feeling crowded. ## Shapes | Token | Value | Use | |---|---|---| | `none` | 0px | Full-bleed panels, edges | | `xs` | 2.5px | Tiny chips | | `sm` | 5px | Small containers | | `md` | 6px | Inputs | | `lg` | 10px | Cards | | `pill` | 9999px | Buttons, badges, avatars, dots | ## Components The full component spec lives in the `components:` token block above. Reference tokens directly (`{components.button-primary}`, `{components.card}`). ### Buttons - **`button-primary`** — Vivid orange fill, white text, full pill. - **`button-yellow`** — Signal-yellow fill, navy text, full pill (for use on light/white). - **`button-secondary`** — White with navy outline, full pill. ### Badges - **`badge`** — Yellow surface, warm-brown text, full pill. ### Cards - **`card`** — White surface, light border, `{rounded.lg}`. - **`card-feature`** — Full yellow panel with warm-brown text for highlight blocks. ### Inputs - **`input`** — White surface, gray border, `{rounded.md}`. Focus shifts border to orange (`{colors.primary}`). ### Navigation - **`nav-bar`** — White header, navy links, bottom border. ## Do's and Don'ts ### Do - Use signal-yellow (`{colors.signal-yellow}`) as full-bleed panels and feature cards. - Pair yellow surfaces with warm-brown or navy text — never white. - Reserve orange (`{colors.primary}`) for primary actions only. - Keep ABC Favorit as the single typeface; vary weight for hierarchy. - Use full pill radius for buttons and badges. ### Don't - Don't put white text on the yellow panels — contrast fails. - Don't introduce a second typeface; weight carries the expression. - Don't use orange decoratively — it marks actions. - Don't let the supporting palette (mint/pink/violet) overwhelm the navy-and-yellow core. - Don't square off the buttons — pills are the brand shape. --- ## Responsive Behavior ### Breakpoints | Name | Width | Key Changes | |------|-------|-------------| | Mobile | <600px | Single column, stacked panels | | Tablet | 600–1024px | 2-column card grids | | Desktop | >1024px | Full multi-column layout, centered column | ### Collapsing Strategy - Hero display scales down while keeping weight and tracking proportion. - Navigation collapses to a menu toggle on mobile. - Card grids 3-col → 2-col → single column. - Full-bleed color panels maintain edge-to-edge treatment at all sizes. --- ## Agent Prompt Guide ### Quick Color Reference - Primary CTA: Vivid Orange `{colors.primary}`, white text - Background: White `{colors.background}` - Heading text: Midnight Navy `{colors.ink}` - Highlight panel: Signal Yellow `{colors.signal-yellow}` with warm-brown text `{colors.ink-warm}` - Body text: Gray 600 `{colors.gray-600}` ### Example Component Prompts - "Hero on a full-bleed signal-yellow panel. Headline 60px ABC Favorit weight 800, navy `{colors.ink}`, slight negative tracking. Orange pill CTA `{colors.primary}`." - "Card: white surface, light border `{colors.border}`, radius 10px. Title 24px weight 600, body 16px weight 400 in `{colors.gray-600}`." - "Badge: signal-yellow background, warm-brown text `{colors.ink-warm}`, full pill, 14px weight 500." ### Iteration Guide 1. Yellow panels always carry dark text (navy or warm-brown), never white. 2. Orange is for actions only; keep it scarce. 3. One typeface — change weight, not family. 4. Pills for buttons and badges; cards get a soft 10px radius. --- ## Attribution Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Vivificar. Brand names and trademarks belong to their respective owners.