--- name: campus-design description: Use this skill to generate well-branded interfaces and assets for CAMPUS — the Digital Tourism Think Tank's flagship sustainability programme (CAMPUS 2026, Turku Archipelago, Finland). Contains essential design guidelines, colors, type, fonts, assets, and UI kit components for prototyping marketing pages, member dashboards, the event companion mobile app, transactional emails, and keynote slides. user-invocable: true --- # CAMPUS Design Skill Start by reading `README.md` — it covers brand context, content fundamentals (voice/tone), visual foundations (colors / type / spacing / shadows / animation / hover states / texture), and iconography. ## Files in this skill - `README.md` — brand context, content + visual foundations, iconography - `colors_and_type.css` — drop-in design tokens (CSS custom properties + base type rules) - `assets/` — real brand assets (logos, the 7 "Chunky Icons", venue photos, experience photos, archipelago map) - `source/campus-2026-source.html` — the original Webflow marketing page (canonical source of truth) - `preview/*.html` — small specimen cards (Type / Color / Spacing / Components / Brand) - `ui_kits/marketing-website/` — recreation of the CAMPUS 2026 marketing page, plus modular JSX components (Nav, Hero, IconBanner, ProgrammeJourney, VenueGrid, ThemeGrid, ExperienceGrid, Outcomes, Tickets, Footer) - `ui_kits/web-app/` — DTTT member dashboard prototype (Sidebar, EventCard, ProgressRing, ThemeLibrary) - `ui_kits/mobile-app/` — CAMPUS event companion app prototype (Today screen, Programme, Map, Notes) - `ui_kits/email/` — transactional email templates - `slides/index.html` — 16:9 slide template with title, agenda, theme, quote, journey-day, photo-story, outcomes, closing layouts ## What to do when invoked If creating visual artifacts (slides, mocks, throwaway prototypes, marketing concepts, mood boards): 1. Import `colors_and_type.css` and add `class="campus"` to ``. 2. Copy assets you need from `assets/` into your output, **do not draw new SVG icons** for theme metaphors — use the Chunky Icon PNGs. 3. Match the voice: declarative sentence-case headings with a final period, eyebrows in ALL CAPS green, calm "we'll" future tense, no exclamation marks, no emoji, British English. 4. Match the visual rhythm: alternate `--cream` / `--sand` light sections with `--forest` dark sections; apply `.grain` on every dark section; lift cards on hover with a green-tinted shadow; left-align everything. 5. Use Playfair Display italic *only* for em-emphasis spans inside hero/title headings — never for body or labels. 6. For UI metaphor icons (lightbulb, gear, users), link Lucide from CDN. For thematic icons (the seven CAMPUS themes), use the Chunky Icon PNGs in `assets/`. If working on production code, lift the tokens from `colors_and_type.css` into the codebase's variable system, and use the JSX components in `ui_kits/` as a structural reference (cosmetic only — they aren't production-grade). If the user invokes this skill without further guidance, ask: - **What surface?** Marketing landing page · in-product screen · email · slide deck · social card · printed handout - **What CAMPUS edition?** 2026 (Turku Archipelago) is the canonical brand. Future editions inherit the same system but swap host-partner / location copy. - **What level of fidelity?** Sketch · clickable prototype · production-ready Then act as an expert designer with deep knowledge of the CAMPUS system, outputting HTML artifacts or production code as appropriate. ## Quick reference — the rules that matter most 1. Primary green: `#1E5D00` (`--forest`). Page bg: `#f7f3ec` (`--cream`). 2. Display family: Playfair Display. Body family: DM Sans (substitute for Effra). 3. Body weight is **300**. Not 400. 4. Section alternation: light cream/sand → dark forest → light → dark. 5. Every dark section gets `.grain`. 6. Headings end in a period. 7. Italic Playfair emphasis is the brand's signature heading move. 8. No emoji. No gradients except the hero. No drop shadows at rest. 9. Cards lift 4px on hover with a green-tinted shadow. 10. Iconography: Chunky Icon PNGs for themes; Lucide stroke SVGs for UI metaphors. Never mix.