# CAMPUS Design System A working design system for **CAMPUS** — the Digital Tourism Think Tank's flagship sustainability programme. The 2026 edition is hosted in the Turku Archipelago, Finland (29 Sept – 3 Oct 2026), in partnership with **Visit Turku Archipelago**. CAMPUS is an immersive working programme — keynotes, experiential workshops in the field, and AI-synthesised strategic outputs — built for ~80–100 DMO and destination professionals. --- ## Index — files in this project ``` README.md ← you are here SKILL.md ← entry point when imported as a Claude skill colors_and_type.css ← design tokens (custom properties + base type) source/ campus-2026-source.html ← the original CAMPUS 2026 marketing page HTML assets/ ← real brand assets (logos, icons, photos) logo-campus-white.png CAMPUS wordmark (white) logo-turku-partner.png Visit Turku Archipelago logo icon-*.png 7 "Chunky Icons" — the brand's signature shape set venue-* Forum Marinum, Ruissalo, Tårget, Herrankukkaro exp-* 5 experience photos (mushroom foraging, sauna, etc) photo-pledges.webp Workshop hero photo archipelago-map.png Stylised map used as a hero accent preview/ ← Design System tab cards (Type / Color / Spacing / Components / Brand) ui_kits/ marketing-website/ CAMPUS 2026 event site — recreation of source web-app/ DTTT member dashboard — speculative product surface mobile-app/ CAMPUS event companion app — speculative product surface email/ Transactional & marketing email templates slides/ 16:9 slide template used for keynote decks ``` Each `ui_kits//index.html` is a click-through prototype; each folder also contains modular JSX components. --- ## What CAMPUS is | | | |--|--| | **Producer** | Digital Tourism Think Tank (DTTT) — `thinkdigital.travel` | | **Event** | CAMPUS 2026 — Sustainability Strategies in the Field | | **Host partner** | Visit Turku Archipelago | | **Dates** | 29 September – 3 October 2026 (Day 0 → Day 4) | | **Audience** | 80–100 DMO professionals, destination leaders, industry partners | | **Pricing model** | €1,200 non-member ticket · or included with DTTT membership from €1,450/yr | | **Format** | Keynotes (mornings) + experiential field workshops (afternoons) + 2-day archipelago retreat | | **Seven strategic themes** | Circular Economy · Collaborative Progress · Climate Change Mitigation · Regenerative Action · Futures Thinking · Visitor Flows · Value & Impact | --- ## Sources I worked from - **`uploads/Campus HTML Code.txt`** — the full Webflow-exported marketing site HTML/CSS/JS. Saved as `source/campus-2026-source.html`. All design tokens, copy, and visual rules in this system are derived from it. - **CDN assets** were pulled from `cdn.prod.website-files.com` (Webflow) at the URLs referenced in the source HTML. They are copied into `assets/` so the system works offline. No Figma, no separate brand guidelines doc, no logo source files (the wordmark is the public white PNG). If you can supply the Effra font files, the master logo SVG, or a brand book, this system gets sharper — see CAVEATS at the bottom. --- ## CONTENT FUNDAMENTALS CAMPUS copy is **assured but unhurried**. It writes like a curated retreat brochure rather than a tech-conference landing page. ### Voice - **First person plural — collective and inclusive.** "*We'll begin by clearing the mind*", "*our setting is Finland's extraordinary Turku Archipelago*", "*we are going to focus on shaping…*" The reader is positioned as part of the group, not an audience. - **Future tense for the programme arc.** Almost every programme description uses "will" / "we'll". This makes the page feel like an invitation to a journey that's already planned, not a sales pitch. - **Second person sparingly, and only for outcomes.** Switches to "you" when describing what the participant takes home: "*You'll go back to your organisation with tested approaches*", "*You gain a first-hand perspective*". Voice ≠ value; the value comes through "you". - **British English spelling.** *Synthesise, organisation, programme, focussed, characterise.* Maintain this — it ties the brand to its European DMO audience. ### Tone - **Practical over poetic, but earnest.** No "revolutionary", no "game-changing", no "unlock your potential". The signature move is naming the *concrete* — "*the world's largest smoke sauna*", "*Finland's oldest oak forests*", "*a traditional fisherman's homestead transformed into a unique conference centre*" — and letting the reader infer the gravitas. - **Tagline pattern: short clause + lower-stakes elaboration.** *"From pledges to practice. This is sustainability in the field."* / *"The landscape is the classroom"* / *"Strategy, evidence and connections to take action"*. Two beats: a sharp statement, then a quiet expansion. - **Quietly confident, never loud.** No exclamation marks anywhere in the source. No all-caps in copy (the wordmark is the only thing shouting). No "🔥" or hype emoji. ### Casing & punctuation - **Sentence case for headings and titles.** Not Title Case. "Five days of insights and impact." (with full stop). "Defining our Seven Strategic Themes" (capital only on proper-noun-like brand terms — "Seven Strategic Themes", "Turku Manifesto"). - **Eyebrows / labels: ALL CAPS, tracked 0.15–0.2em.** Used for meta info: `DAY 1 WELCOME`, `30 SEPTEMBER`, `HOST PARTNER`. - **The wordmark itself is set in ALL CAPS, tracked wide** (`CAMPUS 2026`), bold weight on the brand name and light/50%-opacity on the year. Never lowercase, never mixed-case. - **Headings often end in a period.** This is intentional — it gives them a calm, declarative finality. Match it. - **Em dashes (—) used for parenthetical asides**, never hyphens or "--". "*80—100 Delegates*". Use a real em dash. - **Numerals: words for "five days", "seven themes" when in flowing prose. Digits for dates, ranges, prices.** ### Emoji & special characters - **No emoji.** Not in headings, not in body, not even in the icon banner (icons are abstract PNG shapes, not emoji). - **No unicode dingbats** except a single check `✓` used for ticket-include bullets. That's it. - **Real typographic characters** — em dash (—), curly apostrophes (it's, we'll), proper en dashes in ranges. ### Specific examples to mirror Good: - "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 at CAMPUS, so you will experience sustainability in a hands-on, immersive way." - "Travelling together from Helsinki to the Turku Archipelago will be our first opportunity to connect and exchange ideas." Off-brand (do not write): - ❌ "Unlock the future of tourism! 🌿" - ❌ "Join 80+ industry leaders for the must-attend event of 2026." - ❌ "PROVEN frameworks. REAL results. Don't miss out." --- ## VISUAL FOUNDATIONS ### The big picture CAMPUS visually feels like a high-end nature retreat: **deep forest greens, warm cream paper, a tactile grain texture, generous breathing room, and one assertive serif against a quiet humanist sans**. It is not a "tech conference" aesthetic — there are no neon gradients, no glass-morphism, no AI sparkles. It reads more like an organic-farming cooperative's annual report than a SaaS landing page. ### Colors **Primary brand greens** (numbered scale + semantic aliases): | Token | Hex | Where it lives | |---------------|----------|-----------------------------------------------------| | `--forest` | `#1E5D00`| Primary brand green. Headings on light, dark section backgrounds, footer, primary button. | | `--deep-green`| `#4D7D00`| Hover state for primary buttons. | | `--moss` | `#4E9B01`| Featured-ticket border, brighter accent. | | `--sage` | `#79A400`| Day-number numerals, accent on dark sections, "lichen-gold" alternate. | | `--green-5` | `#008344`| Eyebrow / section-label text. Also aliased as `--charcoal` (yes, it's green — the brand uses "charcoal" as the body text role). | | `--sea` | `#008172`| Secondary tone — appears in hero gradient. | | `--deep-sea` | `#005F65`| Hero gradient stop, darkest cool green. | **Neutrals**: | Token | Hex | Where | |---------------|----------|-------| | `--cream` | `#f7f3ec`| Default page background. | | `--sand` | `#f5f0e8`| Warmer cream — Venues, Membership, pre-register sections. | | `--mist` | `#e2eeda`| Card surface tint behind green icons; theme/ticket card borders. | | `--lichen` | `#a8c5b0`| Quiet muted green, used sparingly. | | `--slate` | `#4a5568`| Secondary body text on light. | | white | `#ffffff`| Cards, hero text, dark-bg text. | **Rules of thumb** - **Only ONE green per section.** Dark sections use `--forest`. Light sections use `--cream` or `--sand`. The whole site alternates these like pages of a book. - **Greens are flat, not gradient.** The only gradient is the hero (`forest → forest → green-5 → green-5 → deep-sea` at 165deg — see source). Don't reach for gradients elsewhere. - **No purples, no blues, no warm accent colours** other than the cream/sand neutrals. ### Type - **Display**: `Playfair Display` (700; italic 400 for emphasis spans). All `h1–h3`. Reach for it whenever a heading needs to feel hand-crafted or editorial. - **Body / UI**: `Effra` (Dalton Maag) — the licensed brand body face, self-hosted from `/fonts` via `@font-face` in `colors_and_type.css`. Full 9-weight family with italics is wired up. Weights used: **300 (default body)**, 400 (regular), 500 (nav, small caps), 600 (small headings), 700 (eyebrows, day titles, h4). - **No third family.** Don't introduce mono / handwritten / display alternatives. - **Light is the default body weight.** Body text is `font-weight: 300` — important for the "calm retreat" tonality. Don't bump to 400 for body. - **Hero h1 has italic emphasis** on a key phrase (`around natural landscapes`). This is the brand's single most recognizable type move. Use it on hero/title slides. ### Spacing & layout - **Sections: `padding: 8rem 6vw`** on desktop, `4rem 5vw` on tablet. Generous vertical rhythm — sections rarely feel cramped. - **Max content width** is unbounded; the page uses `vw` padding, so columns expand on wide screens. - **Grids are square / corner-to-corner.** Day cards in the Journey grid use *internal borders* (1px white at 15% opacity), not gaps. Outcomes grid does the same. Venues / Themes / Experiences use a real `gap: 2rem` between cards. - **Card padding: 2–2.5rem on desktop**, 1.5rem on mobile. - **Text-wrap: pretty** is set on every body paragraph globally. Use it. ### Corner radius - Buttons & pills: `0.5rem` (8px) or fully rounded (`2rem` / 999px) for nav CTA. - Cards (venue, ticket): `1rem` (16px). - Theme cards: `0.8rem` (12.8px). - Image masks inside cards: `12px`. - Badges: `0.3rem` (4.8px). - Icons-banner asset has 50% radius (circle bg behind chunky icons). ### Shadows - **No drop shadows at rest.** Cards sit flat. - **On hover only**: `0 20px 60px rgba(30,93,0,0.08)` — a soft *green-tinted* shadow, never neutral grey. This is signature: shadows carry the brand colour. - Lighter rise: `0 12px 40px rgba(30,93,0,0.06)`. - Image-card hover: `0 12px 32px rgba(26,60,40,0.10)`. ### Borders - **Light dividers:** `1px solid rgba(30, 93, 0, 0.10)` between proposition list items. - **Dark dividers:** `1px solid rgba(255,255,255,0.15)` — used as internal grid borders on dark sections, between hero details, in footer. - **Card stroke:** `1px solid var(--mist)` (`#e2eeda`) on theme & ticket cards. - **Featured card stroke:** `2px solid var(--moss)` — the only place a 2px border appears. ### Backgrounds & texture - **Grain texture** (`.grain` utility) overlays the hero, the Journey section, and the Outcomes section. It's an inline SVG `feTurbulence` noise at 30% opacity, `mix-blend-mode: overlay`. Use it on every dark-green background. It is essential to the brand's "papery" feel. - **Radial glow on hero** — three soft elliptical radial gradients layered over the base hero gradient (sage at top-left, sea at bottom-right, sea at centre). Don't reuse this glow elsewhere; it's hero-only. - **Mapped accent** — the hero uses an opacity-25 archipelago map as a right-side mask. A nice motif to repeat in slide-deck title screens. - **No repeating patterns. No photographic backgrounds** behind text. Photos live inside cards, masked. ### Imagery - **Warm, naturalistic, slightly grainy.** Look at `exp-mushroom.jpg`, `venue-ruissalo.webp`, `venue-herrankukkaro.jpg` — green dominant, soft Nordic light, real people / real places, no stock-photo gloss. - **Always cropped 3:4 (experience cards) or 16:10 (venue cards).** Use `object-fit: cover`. - **Photo cards have a bottom-gradient overlay** (`linear-gradient(to top, rgba(0,0,0,0.7), transparent)` from 60% up) so white captions read on any image. - **Hover: scale image to 1.05 over 0.4s**. Card itself rises `translateY(-4px)`. ### Animation - **Default ease**: `ease` or `ease-out`. No bounces, no spring, no overshoot. - **Standard transition**: `0.3s` for hovers, `0.4s` for image scale, `0.8s` for entry. - **Entry animation**: `fadeUp` — translateY(30px) → 0, opacity 0 → 1, over 0.8s. Used on hero content and via IntersectionObserver on every card. - **Stagger**: `0.05s × index` between sibling cards. Subtle. - **Hover lifts**: cards translate up by 4px on hover. - **Touch devices**: all hover transforms are disabled via `@media (hover: none)`. - **Smooth scroll**: enabled globally on `html`. ### Hover & press states - **Buttons**: bg shifts to a deeper shade (e.g. `forest → deep-green`); no scale, no shadow change. - **Nav CTA pill**: inverts — white bg with forest text on hover. - **Nav links**: opacity goes from `rgba(255,255,255,0.85)` → solid `white`. - **Cards**: lift `-4px` + add the green-tinted shadow. - **No "press" / `:active` distinct state** in the source — buttons just stay in the hover colour. Keep it minimal. ### Transparency & blur - **Nav uses `backdrop-filter: blur(10px)`** with `rgba(30,93,0,0.95)` background once scrolled past 80px. This is the only blur in the system. Use it for *floating* surfaces over content; not for cards on solid backgrounds. - **Text on photo cards is supported by a 60%-tall gradient mask**, not by a blur. - **Venue labels** (`Day 0 Welcome` pills inside venue images) use `rgba(255,255,255,0.8) + backdrop-filter: blur(4px)`. A second valid use case. ### Fixed elements - Nav (`position: fixed; top: 80px`) — sits 80px from the top of the viewport on load, then locks to `top: 0` once scrolled. Transparent over the hero, solid forest-green once scrolled. This top-offset-then-stick is a brand signature; preserve it. - Typeform widget floats in the bottom-right corner (`data-tf-live`). On product surfaces we drop this. - Footer is *not* fixed; it's the natural bottom of the page. ### Layout rules — what "looks CAMPUS" 1. Left-aligned text. **Everything is `text-align: left`** including the Membership section (the only exception is the optional centered pre-register CTA). 2. Body weight is **300 (light)**. 3. Sections alternate **cream → forest → sand → forest → cream**. Light-light-dark or dark-dark in a row is off-brand. 4. Every dark section gets `.grain`. 5. Headings end in a period. 6. Eyebrows in ALL CAPS green, tracked 0.2em, sat above titles. 7. Cards never have icons floating in space; icons live inside a `48px` mist-coloured circle, or as a 130px background watermark on theme cards. --- ## ICONOGRAPHY CAMPUS has a small, deliberate icon vocabulary made of **two distinct families**: the brand "Chunky Icons" (signature shapes) and **inline Feather-style stroke SVGs** (UI metaphors). They never appear in the same composition. ### 1. Chunky Icons — the brand mark set The signature visual asset. **Seven hand-rendered shape icons** with a soft, slightly textured fill: - ⬤ Circle — Circular Economy - ◗ Semi Circles — Collaborative Progress - ▢ Square — Value & Impact (overarching) - ☰ Lines — Regenerative Action - ✕ X — Climate Change Mitigation - △ Triangle — Futures Thinking - ∿ Squiggle — Visitor Flows They are **PNG raster assets** at `assets/icon-*.png`, exported from a Figma library with the naming convention `Chunky Icons=`. Each represents one of the **seven strategic themes**. The icon-banner section scrolls them horizontally as a hero motif (`@keyframes scrollIcons` over 25s, masked with edge gradients). Usage: - **Always raster PNG**. Never recreate as flat CSS / SVG — the slight roughness is the point. - **Two roles on a card**: a 44×44px "icon slot" in the bottom-right of theme cards, AND a 130×130px low-opacity (`0.06`) watermark version of the same icon further down-and-right. The watermark gives the card a quiet "fingerprint" without competing with copy. - **In dark contexts** (slides, dark sections), the icons stand alone at full opacity, often at 80–150px. - **One icon per concept.** Don't mix more than 2 chunky icons in one composition (banner aside). - **No colour treatment.** The PNGs ship with their native palette; don't tint them. ### 2. Stroke SVG icons — UI / proposition metaphors The Proposition section uses **inline 24×24 stroke SVGs** with `stroke-width: 2`, no fill. They are the **Lucide / Feather** vocabulary: lightbulb, gear, users, mortarboard, document. Inside a `48×48` mist-coloured circle (`background: var(--mist); border-radius: 50%`). For new UI metaphors (web app, mobile app, email) link **Lucide** from CDN: ```html ``` Lucide is the closest match to the inline SVGs in the source — same stroke weight, same join radius. **Substitution flagged**: the source ships raw inline paths, not the Lucide library. Visual match is exact. - Stroke: `currentColor` so the icon picks up the surrounding text colour. Inside the circle, that's `var(--forest)`. - Stroke width: 2. - 24×24 viewBox. - No filled icons. No coloured icons. No "Heroicons solid" style. ### 3. Emoji & dingbats **Effectively zero.** The only special character used decoratively in the source is `✓` (U+2713) as the ticket-include bullet, coloured `--green-3` or `--lichen-gold` depending on card variant. Use that exact pattern; don't substitute "check" SVGs there. ### 4. Logos - **`assets/logo-campus-white.png`** — CAMPUS wordmark, all-caps, bold/light split (the year "2026" sits in lighter weight). White. The only version on hand — no dark version, no full-colour version. Use it on `--forest` or `--green-5` backgrounds. - **`assets/logo-turku-partner.png`** — Visit Turku Archipelago logo, also white-on-dark. Always appears beside a `HOST PARTNER` ALL CAPS label tracked at 0.15em. If you need the wordmark on a *light* background, render it inside a forest-green pill or rectangle. **Do not recolour the PNG.** --- ## CAVEATS & open questions See the end of this file or the closing message — there are a handful of items the source materials don't pin down (Effra font files, dark/coloured logo variants, official non-marketing surfaces, etc).