From pledges to practice, in one design system.
The complete brand and product toolkit for CAMPUS — the Digital Tourism Think Tank's flagship sustainability programme. Built for marketing, product, communications and event teams to ship work that feels unmistakably CAMPUS, every time.
Voice & content fundamentals.
CAMPUS copy is assured but unhurried. It writes like a curated retreat brochure, not a tech-conference landing page. First-person plural, future tense, British English, no exclamation marks, no emoji.
Tonal guideposts
Do — write like this
- "From pledges to practice. This is sustainability in the field."
- "Every venue has been picked carefully to connect with each of the themes we are going to explore together."
- "Travelling together from Helsinki to the Turku Archipelago will be our first opportunity to connect."
Don't — write like this
- "Unlock the future of tourism! 🌿"
- "Join 80+ industry leaders for the must-attend event of 2026."
- "PROVEN frameworks. REAL results. Don't miss out."
Casing & punctuation rules
Not Title Case. Capitalise only proper-noun-style brand terms — "Turku Manifesto", "Seven Strategic Themes".
Adds a calm, declarative finality. Match it.
Used for meta info: "DAY 1 WELCOME", "30 SEPTEMBER", "HOST PARTNER".
Synthesise, organisation, programme, characterise. Ties us to our European DMO audience.
Use "—" not "-" or "--" for parenthetical asides. "80—100 Delegates."
Only special character used decoratively is "✓" for ticket-include bullets.
Logos & lockups.
The CAMPUS wordmark always pairs with a host-partner mark. The CAMPUS colour version sits on cream and warm surfaces; the white version sits on forest, sea and dark photography. The Turku partner mark mirrors the same light/dark logic.
·
·
Clear space & sizing
Color: greens, neutrals, one gradient.
A seven-step primary green scale, a small set of cream and mist neutrals, and a single hero-only gradient. Sections alternate cream → forest → sand → forest. Only one green per section. Greens are flat, not gradient — except the hero.
Primary green scale
Neutrals & surfaces
Semantic role map
The one gradient — hero only
Typography — Playfair, set against Effra.
Two families. Playfair Display for headings, with italic 400 reserved for emphasis spans inside h1s — the brand's signature move. Effra (Dalton Maag) for body, UI, eyebrows. Both families are self-hosted from /fonts. Body weight defaults to 300 (Light).
Display — Playfair Display
Display weights — all 6 + italics
Body — Effra (Dalton Maag)
Scale & usage
Spacing, layout, and rhythm.
Sections breathe. 8rem of vertical padding on desktop, 4rem on mobile, with 6vw of horizontal air. Cards prefer 2–2.5rem padding inside. Grids on dark sections use internal borders, never gaps; light sections use real gaps. Body text wraps with text-wrap: pretty by default.
Section padding
Card & component spacing
Corner radius
Shadows — always green-tinted, hover-only
Motion
ease-out · cubic-bezier(.2,.7,.2,1). No bounces, no springs, no overshoot.
0.3s for hovers · 0.4s for image scale · 0.8s for entry / fadeUp.
translateY(-4px) + green-tinted shadow. Image scale to 1.05 on hover.
0.05s × index between sibling cards via IntersectionObserver.
Grain — applied to every dark section.
An inline SVG turbulence noise overlay at 30% opacity, mix-blend-mode overlay. Sits on top of forest, sea and deep-sea surfaces — the section you're reading right now uses it. This is essential to the brand's papery, "tactile retreat" feel. Don't ship a dark section without it.
CSS recipe
.grain { position: relative; } .grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 3; background-image: url("data:image/svg+xml,…feTurbulence…"); background-size: 180px 180px; opacity: 0.3; mix-blend-mode: overlay; }
Chunky Icons — the seven theme glyphs.
A hand-rendered set of seven PNG glyphs. One per strategic theme. Always raster — never recreate as flat SVG, the slight roughness is the point. Used three ways: a 44px slot in card corners, a 130px low-opacity watermark behind copy, and full-size icons on slides and social art.
Drawn from a Figma library exported as Chunky Icons=<Shape>. Don't tint them — the PNGs ship with their native palette.
Stroke icons — for UI metaphors
Lucide (Feather-family) stroke icons at 24×24, stroke-width 2, no fill. Inside a 48×48 mist-coloured circle. Used for proposition-list metaphors only — lightbulbs, gears, users, documents. Never mixed with chunky icons in the same composition.
Buttons.
Three button styles, mapped to three contexts. Primary forest button on light surfaces, white "light" button on photography/dark, and a pill-style nav CTA in nav bars over hero photography.
Labels, eyebrows & pill badges.
Small typographic moves that earn their place. Eyebrows track 0.2em above titles. Meta labels mark dates and days. Pill badges live on top of photography. Theme tags live in card corners.
Cards.
The workhorses. Venue cards (photo + capsule label + warm body). Theme cards (chunky icon corner + watermark + question). Experience cards (3:4 photo + gradient mask + theme tag). Proposition list rows (stroke icon in mist circle + heading + supporting line).
Venue card
Day 1 & 2 Seminars
Ruissalo Boatyard
Founded in 1889 and once the largest boatyard in the Nordic countries, with beautifully preserved wooden halls, nestled on Ruissalo Island — home to Finland's oldest oak forests.
Theme card
Circular Economy
How can we lay the groundwork for process change in tourism supply chains, whilst creating incentives and conditions to drive consumer demand?
Experience card
Sauna Culture & Wellbeing
Forest Foraging
Local Food Systems
Proposition list
-
Experiential Learning
Strategy sessions embedded in the landscape, not lecture halls.
-
Peer-to-Peer Exchange
Learn alongside fellow DMO professionals facing the same challenges.
Ticket cards.
The single place a 2px border appears in the system — the featured ticket gets a moss-green stroke. Standard ticket sits on white; featured swaps to forest with sage accents. Both use ✓ glyphs for include-bullets.
- Day 0 Welcome Evening
- Day 1 – 4 full programme
- All meals and transfers
- Turku Manifesto + Playbook
- 2 tickets to CAMPUS 2026
- Full year-round benefits
- All published research
- Member-only briefings
Journey grid — internal borders, not gaps.
On dark sections, day-cards and outcome-cards stitch together with 1px white-15% internal borders. No gap, no card-shadow at rest. Numerals are Playfair italic in sage at 0.75 opacity. Used for the five-day programme and the three outcomes grid.
UI kits — the system, in production.
Six surfaces. Marketing website (the public CAMPUS 2026 page), member dashboard (the year-round DTTT portal), event companion app (the on-site mobile), email templates, slide template (16:9 keynote deck), and social UI kit (1080×1350 posts + 1080×1920 stories).
Event landing page
The public CAMPUS 2026 site — nav, hero, themes, venues, experiences, outcomes, tickets, footer.
Member dashboard
DTTT member portal — countdown, theme progress rings, library, cohort directory.
Event companion app
Today · Programme · Map · Notes screens for delegates on-site.
Email templates
Booking confirmation · pre-read weekly · Day 0 arrival.
Slide template
8 layouts: title, intro, agenda, theme, quote, photo, outcomes, closing.
Social UI kit
4 posts (1080×1350) and 4 stories (1080×1920) — theme, speaker, quote, save-the-date, diptych.
Token catalogue.
The full set of CSS custom properties exposed by colors_and_type.css. Lift them into Tailwind, lift them into your component library, lift them into Figma variables.
Color tokens
| Token | Value | Role |
|---|---|---|
| --forest | #1E5D00 | Primary green |
| --deep-green | #4D7D00 | Hover state |
| --moss | #4E9B01 | Featured stroke |
| --sage | #79A400 | Accent on dark |
| --green-5 | #008344 | Eyebrow / label |
| --sea | #008172 | Hero gradient |
| --deep-sea | #005F65 | Hero gradient end |
| --cream | #F7F3EC | bg-page |
| --sand | #F5F0E8 | bg-page-warm |
| --mist | #E2EEDA | card tint |
| --slate | #4A5568 | fg-2 |
| --ink | #1A1A1A | fg-1 |
Type tokens
| Token | Value | Role |
|---|---|---|
| --font-display | Playfair Display | Headings |
| --font-body | Effra | Body / UI |
| --font-mono | SF Mono / Menlo | Code, meta |
| --fs-hero | clamp(3, 6vw, 5.5rem) | Hero |
| --fs-h1 | clamp(2, 4vw, 3.2rem) | Section title |
| --fs-lead | 1.05rem | Lead paragraph |
| --fs-body | 1rem | Body |
| --fs-eyebrow | 0.75rem | Eyebrows |
| --tracking-eyebrow | 0.2em | Eyebrows |
| --tracking-meta | 0.15em | Meta |
| --lh-tight | 1.2 | Headings |
| --lh-body | 1.7 | Body |
Radius & surface
| Token | Value | Role |
|---|---|---|
| --radius-xs | 0.3rem | Badges |
| --radius-sm | 0.5rem | Buttons |
| --radius-md | 0.8rem | Theme cards |
| --radius-lg | 1rem | Venue, ticket |
| --radius-pill | 999px | Nav CTA |
| --border-soft | rgba(30,93,0,0.10) | Dividers on light |
| --border-on-dark | rgba(255,255,255,0.15) | Grid borders |
Motion & shadow
| Token | Value | Role |
|---|---|---|
| --ease-out | cubic-bezier(.2,.7,.2,1) | Default ease |
| --t-fast | 0.3s | Hovers |
| --t-mid | 0.4s | Images |
| --t-slow | 0.8s | Entry |
| --shadow-soft | 0 2 8 / black .04 | Hairline rise |
| --shadow-card-rise | 0 12 40 / forest .06 | Card hover-light |
| --shadow-card-hover | 0 20 60 / forest .08 | Card hover |
| --shadow-img-hover | 0 12 32 / forest .10 | Image card hover |
Downloads & handoff.
Everything in one place. Drop the stylesheet into a codebase, the font files into a project, or this whole document into a wiki. The system is built to travel.
All tokens + @font-face for both families. Drop into any project; reference via <link rel="stylesheet">.
Effra (9 weights + italics) and Playfair Display (6 weights + italics). Self-host these — Effra is licensed.
Logos (white + colour CAMPUS · light + dark Turku), 7 chunky icons, venue + experience photography, archipelago map.
Working HTML for all six surfaces. Clone, fork, or copy the markup directly into production.
For a single self-contained file you can publish on a static site, ask Claude to bundle this page (and its referenced assets, fonts and styles) into a standalone HTML using the inline-html tooling. The output works offline and from any URL.