The design system for FDB 2026.
Editorial, restrained, declarative. One typeface, one accent colour, a stacked-square mark and a tight set of components used consistently across the marketing site, slide decks, social posts and the X. Awards programme.
Written in British English. The cream canvas is the default treatment; an alternate ink treatment is available for evening, X. Awards and contrast moments.
#8239C1 for emphasis. Magenta-pink on ink. Everything else is greyscale on cream..fdb-dark) is a selective alternate, used for evening, the X. Awards moment, and high-contrast accents — not the everyday surface.Voice & content fundamentals.
FDB copy is editorial, restrained, declarative. It writes like a private memo to a knowledgeable peer, not a conference landing page. British English, sentence case, full stops that carry weight, no emoji, no exclamation marks.
Do — write like this
- "The question is not whether to engage. It is whether leadership is ready."
- "The format is a meeting, not a conference. Boardroom arrangement, no stage, no panels, no commercial agenda."
- "What participants bring to this table does not stay in the room."
- "Places are by personal invitation only. To discuss participation, please get in touch."
Don't — write like this
- "Unlock the future of destination marketing!"
- "Join 100+ industry leaders for the must-attend AI summit of 2026."
- "PROVEN frameworks. REAL results. Don't miss out."
- "We're so excited to announce 🎉"
Not Title Case. Capitalise only proper nouns and the brand's own programme names — "X. Awards", "Future. Destination. Brand."
Adds a calm, declarative finality. The brand's wordmark itself ends "Brand." Match it.
Used for meta info: "DAY ONE · LEADERSHIP PROGRAMME", "DATE", "FORMAT", "POLICY OUTPUT".
Programme, organisation, colour, behaviour, recognise, centre. Ties FDB to its European audience.
"Dublin · December 2026" — use · (U+00B7) for breadcrumbs and meta lines. Never the pipe character.
The only punctuation flourish is the trailing full stop on the wordmark "Brand." and on hero titles.
Inline emphasis is bold + purple on a 2–5-word fragment. Never italic for emphasis.
Avoid "we". Name the sector or audience directly — "the sector", "destinations", "the room", "participants".
Used only for TBC placeholder names ("Senior representative · TBC") and the X. Awards italic x. glyph. Not for ordinary emphasis.
"eight to ten active contributors" in flowing prose; "08:30", "30 to 40 participants" for ranges and timetables.
Logos & lockups.
The FDB wordmark sits beside its stacked-square mark. The colour version appears on cream; the white version appears on ink, including the X. Awards evening. X. Awards is a sub-brand using the same brand purple as FDB, not a separate visual identity.
Hero · 180px
Card · 72px
UI · 30px
Footer · 20px
Colour: one purple, everything else greyscale.
A five-step purple, a four-step ink scale, three canvas tones. No second hue. On the ink treatment the purple shifts to a hot magenta-pink so the brand stays vivid against ink.
Typography — Geist, every weight.
One typeface: Geist, weights 100 through 900. Tight tracking on display, generous leading on body. Self-hosted from /fonts. Display reaches for 800 (ExtraBold) at hero scale; body sits at 400 (Regular). Micro-labels are 700 (Bold) UPPERCASE with 0.10em–0.14em tracking — they do an enormous amount of structural work on the page.
in the Age of AI.
Spacing, layout, and rhythm.
Sections breathe. Long-form pages use a 1000px max-width, centred, with generous vertical rhythm — hero padding at 5rem, section labels with 2.5rem of air above. Density comes from internal hierarchy, never from cramming content into the canvas.
Editorial reading width, centred. Marketing site, slide chrome and programme tables all respect this.
Vertical breathing room is generous. Hero blocks aren't cramped — they hold the page open.
The uppercase eyebrow sits high in its own air, never crowding the body copy below.
Most cards use 1rem–2rem padding inside. The canvas does the heavy lifting on whitespace.
Most layouts are 1-col or 50/50 splits with a 2–4rem gutter. Heavier grids are reserved for the participants table and stat rows.
Long-form body uses pretty wrap so orphans don't dangle at the end of paragraphs.
Corner radii — small, almost square.
No fully-rounded shapes anywhere. The only circle in the system is the dot on the X. Awards x. glyph. Buttons, cards, callouts all live between 2px and 6px.
Motion & elevation.
The brand is intentionally still. No bounces, no springs, no overshoot. Hover states swap colours and borders; press states do nothing. Elevation is almost never used — the brand is flat. Shadows are reserved for floating overlays only.
Plain ease on color, border-color, background. Never on transform.
Hover and focus colour changes resolve in 150ms. Fast enough to feel direct, slow enough to register.
Buttons do not scale down. Cards do not lift. The brand is editorial, not playful.
No fade-up, no stagger, no scroll-triggered reveals. Content arrives composed.
On cards, programme rows, and most surfaces, the answer is no shadow at all. Use a hairline border or a faint tint instead. Reach for elevation only when an element genuinely floats above the page.
The mark, and a tight UI set.
FDB uses very few icons. The stacked-square mark is the signature glyph, used at four scales. For functional UI metaphors we use Lucide stroke icons at 2px weight — chat bubble, arrows, calendar, map pin. No emoji, no unicode pictograms. The middle dot · is the only typographic ornament.
Hero · 180px
Card · 72px
UI · 30px
Footer · 20px
Functional UI glyphs are drawn from Google Material Symbols (Outlined). Weight 400, optical size 24, fill 0. Stroke matches the brand's hairline border weight; currentColor lets the icon flow with the parent text colour.
Load the font at the top of any page: <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined">. Then use <span class="material-symbols-outlined">event</span>. Size with font-size, colour with color.
The middle dot · (U+00B7) is the only ornament used. Apply it freely as a separator.
The three purple steps are fixed. Don't tint, don't gradient, don't add a fourth.
Match the cap height of the surrounding label. Never wrap in a coloured circle — that's not the FDB language.
Every other shape in the system is square or square-with-tiny-radius.
Component library.
Twelve patterns used across the marketing site, slide decks, and social posts. Each shown live below. Toggle the theme in the banner to see the ink alternate.
in the Age
of AI.
Dublin · December 2026
Future. Destination. Brand. 2026 · Hosted by Fáilte Ireland · DTTT
Templates in use.
The full marketing site UI kit and the slide-template deck. Both have their own light/dark switches inside — use them to inspect the same surfaces in either mode.
Social posts — Instagram 4:5.
Six post templates plus reusable isolated elements — scaffold, offset-frame stack, banner row, photo frame and squares heat-map — shown in both cream and ink treatments.
Token catalogue.
Every CSS custom property exposed by colors_and_type.css. Import the file at the top of any artefact and reach for these directly. Dark-mode tokens are remapped under the .fdb-dark scope so existing components flip automatically.
| Token | Value | Role |
|---|---|---|
| --fdb-cream | #F5F0E9 | Default page canvas |
| --fdb-cream-deep | #E6E2DA | Subtle block fill, rare |
| --fdb-white | #FFFFFF | On purple · raised card surfaces |
| --fdb-ink | #1A1A1A | Headlines · primary text |
| --fdb-ink-mid | #3A3A3A | Body text on cream |
| --fdb-ink-muted | #7A7A7A | Captions · secondary |
| --fdb-ink-faint | #B0B0B0 | Labels · dividers · TBC |
| --fdb-purple | #8239C1 | Brand · CTAs · emphasis |
| --fdb-purple-deep | #5B1FBF | Hover · pressed |
| --fdb-purple-mid | #9B6FE0 | Middle square of the mark |
| --fdb-purple-soft | #C9AAEE | Front square · chip borders · frames |
| --fdb-purple-tint | #EDE5F8 | Chip backgrounds · tinted fills |
| --fdb-border | rgba(26,26,26,.10) | Dividers · hairline outlines |
| --fdb-border-strong | rgba(26,26,26,.18) | Card outlines · label separators |
| Token | Value | Role |
|---|---|---|
| --fdb-dark-bg | #1A1A1A | Page canvas |
| --fdb-dark-bg-elev | #242424 | Cards · raised blocks |
| --fdb-dark-bg-deep | #0E0E0E | Footer · extreme contrast |
| --fdb-dark-fg | #F0F0F0 | Primary text |
| --fdb-dark-fg-mid | #B8B0A4 | Body text — warm grey |
| --fdb-dark-fg-muted | #7A7A7A | Captions |
| --fdb-dark-fg-faint | #4A4A4A | Labels · TBC |
| --fdb-dark-accent | #E070F0 | Brand on ink — hot magenta-pink |
| --fdb-dark-accent-mid | #9040A0 | Middle square · hover base |
| --fdb-dark-accent-deep | #502070 | Back square · deep emphasis |
| --fdb-dark-accent-tint | rgba(224,112,240,.14) | Chip backgrounds |
| --fdb-dark-accent-soft | rgba(224,112,240,.35) | Chip borders · decorative frames |
| Token | Value | Role |
|---|---|---|
| --fdb-space-1 | 4px | Hairline gap |
| --fdb-space-2 | 8px | Inline gap |
| --fdb-space-3 | 12px | Inner element spacing |
| --fdb-space-4 | 16px | Card-padding minimum |
| --fdb-space-5 | 24px | Default card padding |
| --fdb-space-6 | 32px | Block separation |
| --fdb-space-7 | 48px | Major section spacing |
| --fdb-space-8 | 64px | Hero vertical air |
| --fdb-space-9 | 96px | Page-level rhythm |
| --fdb-radius-xs | 2px | Tags · pills |
| --fdb-radius-sm | 3px | Buttons |
| --fdb-radius-md | 4px | Cards · callouts |
| --fdb-radius-lg | 6px | Mark squares |
| Token | Value | Role |
|---|---|---|
| --fdb-font-sans | 'Geist', system-ui, … | Body, headings — Geist self-hosted |
| --fdb-font-mono | ui-monospace, … | Token references, captions |
| --fdb-fs-display | clamp(2.8rem, 5.5vw, 4.2rem) | Hero titles |
| --fdb-fs-h1 | 2.4rem | Section title |
| --fdb-fs-h2 | 1.75rem | Subsection |
| --fdb-fs-h3 | 1.25rem | Card heading |
| --fdb-fs-statement | 1.45rem | Pull-quote · lead paragraph |
| --fdb-fs-body | 0.92rem | Default body |
| --fdb-fs-small | 0.83rem | Captions |
| --fdb-fs-eyebrow | 0.68rem | Uppercase section labels |
| --fdb-fs-micro | 0.62rem | Uppercase micro labels |
| --fdb-tracking-tight | −0.03em | Display headlines |
| --fdb-tracking-wider | 0.12em | Hero eyebrows |
| --fdb-tracking-widest | 0.14em | Micro section labels |
Downloads & handoff.
Files to take away. The whole project is also available as a single standalone HTML for the FDB marketing site, suitable for offline review.
| File | What's in it |
|---|---|
| colors_and_type.css | All tokens · semantic type classes · .fdb-dark scope |
| fonts/Geist-*.ttf | Nine Geist weights, self-hosted |
| assets/logos/ | Full lockup · wordmark · mark · X. Awards lockup — light + dark variants |
| assets/social/ | Reference Instagram-format brand frames |
| ui_kits/marketing-site/ | React JSX UI kit · 4 screens, shared components |
| slides/ | 9 slide templates in a deck-stage shell |
| social/ | 6 Instagram-post templates · isolated reusable elements |
| preview/ | Specimen cards for the Design System review pane |
| README.md | Full brand book · voice · visual foundations · iconography |
| SKILL.md | Claude Code skill manifest — drop into .claude/skills/fdb-design/ |