Design System

Voice & Content

Confident, plainspoken techno-optimism. Big future claims delivered with a builder's matter-of-factness. Never breathless or salesy; conviction over hype.

• Person. "We" for the org/community ("We bring creators…"). "You" to address the reader and recruit ("This is for you", "Quit your job").
• Casing. ALL-CAPS squared display for headline statements and section labels (WHAT IS IPÊ VILLAGE, WE'RE TECHNO-OPTIMISTS). Sentence case for body copy and value chips (Freedom of Speech). Title Case for proper nouns and program names (AI House, Founder Haus, Town Hall).
• Punchy fragments, manifesto cadence. Short declaratives stacked for rhythm: "We are living in the future. And in the past at the same time."
• Concrete over abstract. Real names, dates, places, numbers: April 6 – May 1, 2026, Jurerê Internacional, Florianópolis, Brazil, $10k+ in grants and prizes.
• Vocabulary. techno-optimist, frontier tech, onchain, parallel institutions, network state, pop-up city, prototype, coordination, governance, decentralization, builders & operators.
• Bold within sentences to spotlight the key phrase: "…we bring together builders, founders, researchers, creators, and techno-optimists…"
• No emoji. Tone is set with type, color and the chevron mark.

Color

Overall feel: clean, bright, optimistic and biophilic-futurist — sunlit greenhouse-city, not dark sci-fi. Lots of white space, crisp squared type, one electric green doing the heavy lifting.

Official brand palette

Extended palette (light/dark-first extensions)

Usage rules

• Lime #A2D729 is the brand. Solid banner fills, value chips, highlight marks, the icon mark.
• Grass #8DC50A for green headline text on white — more legible than bright lime.
• Blue #3AA5FF is the secondary accent — info chips, checkmarks, links, the cooler end of the gradient.
• Yellow #FFB600 is a sparing third accent.
• Navy #002642 is overlay text only — laid over light gradient or photo backgrounds. Never a flat page background.

Backgrounds — priority order

1. Light gradient (primary): lime → sky-blue, airy and luminous — often laid over a faded, desaturated grayscale photo of biophilic architecture. Text on these is navy or ink.
2. Solid light: white, off-white #F7F8F4, light-gray panels #EFF0EC.
3. Dark gradient (secondary): warm green-black → cool blue-black — not navy. Solid near-black #0B0C0A also fine.
4. Never a flat navy-blue background. Navy is reserved for overlay text.

Gradients

Signature CSS gradients, plus official full-resolution gradient backdrops (3204×2302 PNG) for slides and covers.

--grad-light — primary. Airy lime → sky wash for hero blocks and covers. Navy/ink text on top.

--grad-lime-blue — full-strength lime→blue wash for banners and accents.

--grad-dark — secondary. Warm green-black → cool blue-black. White/lime text on top.

• Use as full-bleed backgrounds for logo lockups and deck slides (titles, dividers).
• Watch contrast: add a subtle scrim behind text where needed.
• Photo treatment over gradients: desaturate to near-grayscale, low contrast, blend into the lime→blue wash so type stays readable.
• Do not stretch — crop to fill while preserving aspect.

Typography

Pairing logic: techno headline + calm grotesque body. Both faces are free on Google Fonts (DM Sans).

Green (#8DC50A on light, #A2D729 on dark) is applied to headline words and inline mark highlights.

Logos & Marks

The "ıpê" logotype is bespoke — always use the supplied files, never re-set it in a font. Do not stretch, rotate, recolor, or add effects.

Lockups & wordmarks

ipe-lockup-navy.svg · for light bg

ipe-lockup-light.svg · for dark bg

ipe-wordmark-dark.svg · for light bg

ipe-wordmark-light.svg · for dark bg

logo-black.svg · for light bg

logo-light.svg · for dark bg

The chevron — primary symbol

A single chunky, rounded upward chevron. Appears solo as an app/icon mark, and doubled/tripled pointing right (» ») as a directional "forward / let's go" motif in banners. Available in black, white, lime, navy, outline and gradient cuts.

chevron-black.png

chevron-white.png

chevron-lime.png

chevron-navy.png

chevron-gradient.png

chevron-outline.png

chevron-stack.png

chevron.svg · vector

Globe symbol

The triple-globe mark (three interlocking globe projections). Use as a secondary graphic device, not as the logo.

symbol-navy.svg · for light bg

symbol-white.svg · for dark bg

Imagery

The Architect — hero illustration

the-architect.png

• Black silhouette wearing an oversized lime/orange AR/VR visor, fine "signal" strokes radiating out, lime accent lines tracing the body — the human-meets-frontier-tech motif.
• Place on a dark background; pair with lime and yellow text accents.
• Keep text minimal: one bold statement alongside it.
• Do not crop the radiating lines above the head; do not recolor or add filters.

Architecture & photo treatment

• Lush, plant-covered terraced buildings — warm daylight, green-dominant, realistic. Used full-bleed or as the faded base of light gradients.
• Photos over gradients: desaturated to near-grayscale, low contrast, blended into the lime→blue wash so type stays readable. Cool-to-warm but always bright.

Layout

• Generous white space; strong left-alignment; a visible modular grid (thin registration lines as decoration).
• Big type anchors the top-left; supporting copy in a comfortable measure (~60ch).

Shape, Borders & Shadows

• Crisp, near-square. Value/info chips and banners are rectangular with a tiny 2–4px radius. Cards use a soft 12–18px radius. Pills (999px) only for tags & avatars.
• Cards: white surface, 1px hairline border #E2E4E0, soft neutral shadow 0 8px 24px rgba(13,13,13,.08) — no colored glows, no colored left-border accents.
• Borders: hairline neutral, or a 2px ink border for emphasis (buttons, focus).
• Shadows: soft, low, neutral gray; elevation via blur+offset only. On dark surfaces a deeper rgba(0,0,0,.45) lift. No neon glow, no inner-shadow skeuomorphism.
• Transparency & blur: sparing — light gradient washes over photos, occasional frosted panel. Default is solid and clean.

Iconography

• Primary mark: the Ipê chevron (see Logos & Marks).
• Decorative dots: a tiny ◎ ◎ ◎ target/aperture trio as a light divider accent on date lines and section ornaments.
• UI icons: the brand has no proprietary icon font — use Lucide (even ~1.75px stroke, rounded joins, geometric build). Ink by default; lime/blue when active.
• Program/category icons: a Lucide glyph in white on a blue or amber rounded-square tile.
• No emoji. No unicode-as-icon hacks.

Data & Charts

• Categorical order: lime #A2D729 → grass #8DC50A → sky #3AA5FF → amber #FFB600. For a single quantitative comparison (ranked bars), stay one hue (lime); reserve a second hue only to flag one item.
• Bars & tracks: filled bar is lime; empty track is #EFF0EC with a near-square corner. Value labels in mono, grass-deep on light.
• Big numbers / stats: display font — grass on light surfaces, lime on dark. Pair with a small mono/body label.
• Tables: hairline dividers, #EFF0EC header row, #F7F8F4 zebra, first column in the display font; wrap in a 12px-radius container with overflow:hidden.
• Maps: use world-dark.svg / world-light.svg. Markers are lime dots with a soft lime ring, placed as HTML overlays — not baked into the SVG. On dark, fade the map toward the text side with a gradient scrim.
• Diagram markers: the hero point is a lime dot; secondary points are neutral gray.

Motion & States

• Calm and confident — short fades & slides (120–220ms), easing cubic-bezier(.22,.61,.36,1). No bounce, no infinite loops.
• Hover: lime fills go slightly brighter; ink/ghost buttons gain a faint tint; cards lift one shadow step.
• Press: subtle darken + ~1px nudge (no large scale-shrink).
• Focus: 3px soft blue ring.

Asset Index

All URLs are relative to https://ipe.city and are direct download links. A machine-readable markdown companion lives at /brand.md; deck templates at /deck (spec: /deck.md).