liseberg-design

Design system skill for liseberg. Activate when building UI components, pages, or any visual elements. Provides exact color tokens, typography scale, spacing grid, component patterns, and craft rules. Read references/DESIGN.md before writing any CSS or JSX. Includes ultra-mode visual journey: read references/ANIMATIONS.md, references/LAYOUT.md, references/COMPONENTS.md, and references/INTERACTIONS.md for full motion and layout details.

Karlmit 0 Updated 1w ago

Resources

GitHub

Install

npx skillscat add karlmit/kampkollen

Install via the SkillsCat registry.

SKILL.md

liseberg Design System

You are building UI for liseberg. Light-themed, neutral palette, sans-serif typography (LL Brown Black), compact density on a 4px grid, expressive motion.

Visual Reference

IMPORTANT: Study ALL screenshots below before writing any UI. Match colors, typography, spacing, layout, and motion exactly as shown.

Homepage

liseberg Homepage

Scroll Journey (Cinematic Visual States)

These screenshots capture the website at different scroll depths. The design changes dramatically as you scroll — each frame shows a different cinematic state. Replicate these exact visual transitions.

0% — Hero / Above the fold

Scroll 0%

17% — Mid-page at 17% scroll

Scroll 17%

33% — Mid-page at 33% scroll

Scroll 33%

50% — Mid-page at 50% scroll

Scroll 50%

67% — Mid-page at 67% scroll

Scroll 67%

83% — Mid-page at 83% scroll

Scroll 83%

100% — Footer / End of page

Scroll 100%

Read references/DESIGN.md for full token details. Read references/ANIMATIONS.md for motion specs. Read references/LAYOUT.md for layout structure. Read references/COMPONENTS.md for component patterns.

Ultra Reference Files

This package includes extended documentation. Read these files before implementing:

File	Contents
`references/DESIGN.md`	Full design system tokens, colors, typography, spacing
`references/VISUAL_GUIDE.md`	START HERE — Master visual guide with all screenshots embedded
`references/ANIMATIONS.md`	CSS keyframes, scroll triggers, motion library stack, video specs
`references/LAYOUT.md`	Flex/grid containers, page structure, spacing relationships
`references/COMPONENTS.md`	DOM component patterns, HTML structure, class fingerprints
`references/INTERACTIONS.md`	Hover/focus states with before/after style diffs
`screens/scroll/`	7 scroll journey screenshots showing cinematic states

Design Philosophy

Layered depth — use shadow tokens to create a sense of physical layering. Each elevation level has a specific shadow.
Gradient accents — gradients are used thoughtfully for emphasis, not decoration.
Type pairing — LL Brown Black for body/UI text, LL Brown for headings/display. Never introduce a third typeface.
compact density — 4px base grid. Every dimension is a multiple of 4.
neutral palette — the color temperature runs neutral, matching the sans-serif typography.
Expressive motion — animations are an integral part of the experience. Use spring physics and layout animations.

Color System

Core Palette

Role	Token	Hex	Use
Background	`--background`	`#ffffff`	Page/app background
Surface	`--surface`	`#f8f1ff`	Cards, panels, modals
Text Primary	`--text-primary`	`#0c4433`	Headings, body text
Text Muted	`--text-muted`	`#464442`	Captions, placeholders
Border	`--border`	`#313a27`	Dividers, card borders

Status Colors

Status	Hex	Use
Success	`#ecfff3`	Confirmations, positive trends
Warning	`#efebd8`	Caution states, pending items
Danger	`#ffecec`	Errors, destructive actions

Extended Palette

#05253f
#d7283d — Warm accent — hover glow or decorative highlight
#4f002f
#e1f5f5 — Light surface or highlight color
#00752f
#000000 — Deep background layer or shadow color
#000b5e
#544f4b

Typography

Font Stack

LL Brown Black — Heading 1, Heading 2, Heading 3
LL Brown — Body, Caption
Mabry Mono — Code

Font Sources

@font-face {
  font-family: "LL Brown";
  src: url("fonts/LLBrown-Regular.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "LL Brown Black";
  src: url("fonts/LLBrownBlack-700.woff") format("woff");
  font-weight: 700;
}
@font-face {
  font-family: "Mabry Mono";
  src: url("fonts/MabryMono-Regular.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "Value serif";
  src: url("fonts/Valueserif-700.otf") format("opentype");
  font-weight: 700;
}

Type Scale

Role	Family	Size	Weight
Heading 1	LL Brown Black	5rem	700
Heading 2	LL Brown Black	80px	700
Heading 3	LL Brown Black	72px	700
Body	LL Brown	16px	400
Caption	LL Brown	14px	400
Code	Mabry Mono	14px	400

Typography Rules

Body/UI: LL Brown Black, Headings: LL Brown — these are the only display fonts
Max 3-4 font sizes per screen
Headings: weight 600-700, body: weight 400
Use color and opacity for text hierarchy, not additional font sizes
Line height: 1.5 for body, 1.2 for headings

Spacing & Layout

Base Grid: 4px

Every dimension (margin, padding, gap, width, height) must be a multiple of 4px.

Spacing Scale

2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24 px

Spacing as Meaning

Spacing	Use
4-8px	Tight: related items (icon + label, avatar + name)
12-16px	Medium: between groups within a section
24-32px	Wide: between distinct sections
48px+	Vast: major page section breaks

Border Radius

Scale: .25em, 2px, 3px, 3em, 4px, 5px, 6px, 8px, 10px, 13px, 14px, 16px, 23px, 25px, 32px, 40px, 50px, 100%, 100px
Default: 13px

Container

Max-width: 1024px, centered with auto margins.

Breakpoints

Name	Value
xs	360px
xs	374px
xs	375px
xs	400px
xs	480px
sm	600px
md	670px
md	708px
md	719px
md	720px
lg	839px
lg	840px
lg	972px
lg	1023px
lg	1024px
xl	1086px
xl	1280px
2xl	1439px
2xl	1440px
2xl	1920px
2xl	2400px
2xl	2810px

Mobile-first: design for small screens, layer on responsive overrides.

Component Patterns

Card

.card {
  background: #f8f1ff;
  border: 1px solid #313a27;
  border-radius: 13px;
  padding: 16px;
  box-shadow: 0 0 5px 2px rgba(0,0,0,0.1);
}

<div class="card">
  <h3>Card Title</h3>
  <p>Card content goes here.</p>
</div>

Button

/* Primary */
.btn-primary {
  background: #cccccc;
  color: #0c4433;
  border-radius: 13px;
  padding: 8px 16px;
  font-weight: 500;
  transition: opacity 150ms ease;
}
.btn-primary:hover { opacity: 0.9; }

/* Ghost */
.btn-ghost {
  background: transparent;
  border: 1px solid #313a27;
  color: #0c4433;
  border-radius: 13px;
  padding: 8px 16px;
}

<button class="btn-primary">Get Started</button>
<button class="btn-ghost">Learn More</button>

Input

.input {
  background: #ffffff;
  border: 1px solid #313a27;
  border-radius: 13px;
  padding: 8px 12px;
  color: #0c4433;
  font-size: 14px;
}
.input:focus { border-color: var(--accent); outline: none; }

<input class="input" type="text" placeholder="Search..." />

Badge / Chip

.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  background: #f8f1ff;
  color: #464442;
}

<span class="badge">New</span>
<span class="badge">Beta</span>

Modal / Dialog

.modal-backdrop { background: rgba(0, 0, 0, 0.6); }
.modal {
  background: #f8f1ff;
  border: 1px solid #313a27;
  border-radius: 100px;
  padding: 24px;
  max-width: 480px;
  width: 90vw;
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

<div class="modal-backdrop">
  <div class="modal">
    <h2>Dialog Title</h2>
    <p>Dialog content.</p>
    <button class="btn-primary">Confirm</button>
    <button class="btn-ghost">Cancel</button>
  </div>
</div>

Table

.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  padding: 8px 12px;
  font-weight: 500;
  font-size: 12px;
  color: #464442;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid #313a27;
}
.table td {
  padding: 12px;
  border-bottom: 1px solid #313a27;
}

<table class="table">
  <thead><tr><th>Name</th><th>Status</th><th>Date</th></tr></thead>
  <tbody>
    <tr><td>Item One</td><td>Active</td><td>Jan 1</td></tr>
    <tr><td>Item Two</td><td>Pending</td><td>Jan 2</td></tr>
  </tbody>
</table>

Navigation

.nav {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid #313a27;
}
.nav-link {
  color: #464442;
  padding: 8px 12px;
  border-radius: 13px;
  transition: color 150ms;
}
.nav-link:hover { color: #0c4433; }

<nav class="nav">
  <a href="/" class="nav-link active">Home</a>
  <a href="/about" class="nav-link">About</a>
  <a href="/pricing" class="nav-link">Pricing</a>
  <button class="btn-primary" style="margin-left: auto">Get Started</button>
</nav>

Extracted Components

These components were found in the codebase:

Button (html)

Card (html)

Variants: -only-linked, -fluid-width, container, container__heading, container__intro

Badge (html)

List (html)

Page Structure

The following page sections were detected:

Navigation — Top navigation bar (113 items)
Hero — Hero/banner section with headline and CTAs
Features — Feature/benefit cards grid (50 items)
Faq — FAQ/accordion section
Footer — Page footer with links and info (95 items)

When building pages, follow this section order and structure.

Animation & Motion

This project uses expressive motion. Animations are part of the design language.

CSS Animations

fadeIn
ripple
show-nested-multiple
fadeInNotification
opacityGridAnimation

Motion Tokens

Duration scale: 0ms, 1.5s, 150ms, 175ms, 200ms, 250ms, 300ms, 340ms, 400ms, 500ms, 600ms, 700ms, 1500ms
Easing functions: cubic-bezier(0.34,1,0.84,1), ease, linear, ease-out, ease-in-out, cubic-bezier(0,0,0.5,1), cubic-bezier(0.165,0.84,0.44,1), ease-in, cubic-bezier(0.4,0,0.2,1)
Animated properties: opacity

Motion Guidelines

Duration: Use values from the duration scale above. Short (0ms) for micro-interactions, long (1500ms) for page transitions
Easing: Use cubic-bezier(0.34,1,0.84,1) as the default easing curve
Direction: Elements enter from bottom/right, exit to top/left
Reduced motion: Always respect prefers-reduced-motion — disable animations when set

Depth & Elevation

Shadow Tokens

Subtle: 0 2px 2px 0 rgba(33,33,33,0.16)
Subtle: 0 2px 2px 0 rgba(0,0,0,0.16)
Subtle: 0 0 2px rgba(0,0,0,0.3)
Subtle: 0px 2px 2px rgba(0,0,0,0.16)
Subtle: 0 2px 2px rgba(0,0,0,0.15)
Subtle: 0 2px 2px 0#abbbcc

Z-Index Scale

0, 1, 2, 3, 4, 5, 10, 11, 20, 100, 101, 111, 150, 999, 1000, 9999

Use these exact values — never invent z-index values.

Anti-Patterns (Never Do)

No blur effects — no backdrop-blur, no filter: blur()
No zebra striping — tables and lists use borders for separation
No invented colors — every hex value must come from the palette above
No arbitrary spacing — every dimension is a multiple of 4px
No extra fonts — only LL Brown Black and LL Brown and Mabry Mono are allowed
No arbitrary border-radius — use the scale: .25em, 2px, 3px, 3em, 4px, 5px, 6px, 8px, 10px, 13px
No opacity for disabled states — use muted colors instead

Workflow

Read references/DESIGN.md before writing any UI code
Pick colors from the Color System section — never invent new ones
Set typography — LL Brown Black, LL Brown, Mabry Mono only, using the type scale
Build layout on the 4px grid — check every margin, padding, gap
Match components to patterns above before creating new ones
Apply elevation — use shadow tokens
Validate — every value traces back to a design token. No magic numbers.

Brand Spec

Favicon: /apple-touch-icon.png
Site URL: https://www.liseberg.se
Brand typeface: LL Brown Black

Quick Reference

Background:     #ffffff
Surface:        #f8f1ff
Text:           #0c4433 / #464442
Accent:         (not extracted)
Border:         #313a27
Font:           LL Brown Black
Spacing:        4px grid
Radius:         13px
Components:     10 detected

When to Trigger

Activate this skill when:

Creating new components, pages, or visual elements for liseberg
Writing CSS, Tailwind classes, styled-components, or inline styles
Building page layouts, templates, or responsive designs
Reviewing UI code for design consistency
The user mentions "liseberg" design, style, UI, or theme
Generating mockups, wireframes, or visual prototypes

Full Reference Files

Every output file is embedded below. Claude has full design system context from /skills alone.

Design System Tokens (DESIGN.md)

liseberg DESIGN.md

Auto-generated design system — reverse-engineered via static analysis by skillui.
Frameworks: None detected
Colors: 20 · Fonts: 3 · Components: 10
Icon library: not detected · State: not detected
Primary theme: light · Dark mode toggle: no · Motion: expressive

Visual Reference

Match this design exactly — study colors, fonts, spacing, and component shapes before writing any UI code.

liseberg Homepage

1. Visual Theme & Atmosphere

This is a light-themed interface with a neutral, approachable feel. The light background emphasizes content clarity. Typography pairs LL Brown for display/headings with LL Brown Black for body text, creating clear visual hierarchy through type contrast. Spacing follows a 4px base grid (compact density), with scale: 2, 4, 6, 8, 10, 12, 14, 16px. Motion is expressive — spring physics, layout animations, and staggered reveals are part of the visual language.

2. Color Palette & Roles

Token	Hex	Role	Use
background	`#ffffff`	background	Page background, darkest surface
surface	`#f8f1ff`	surface	Card and panel backgrounds
text-primary	`#0c4433`	text-primary	Headings and body text
text-muted	`#464442`	text-muted	Captions, placeholders, secondary info
border	`#313a27`	border	Dividers, card borders, outlines
danger	`#ffecec`	danger	Error states, destructive actions
success	`#ecfff3`	success	Success states, positive indicators
warning	`#efebd8`	warning	Warning states, caution indicators
info	`#05253f`	info	Informational highlights
unknown	`#d7283d`	unknown	Palette color
unknown	`#4f002f`	unknown	Palette color
unknown	`#e1f5f5`	unknown	Palette color
unknown	`#00752f`	unknown	Palette color
unknown	`#000000`	unknown	Palette color
unknown	`#000b5e`	unknown	Palette color
unknown	`#544f4b`	unknown	Palette color
unknown	`#fffdea`	unknown	Palette color
unknown	`#280c61`	unknown	Palette color
unknown	`#e0d1f0`	unknown	Palette color
unknown	`#fd9c54`	unknown	Palette color

3. Typography Rules

Font Stack:

LL Brown Black — Heading 1, Heading 2, Heading 3
LL Brown — Body, Caption
Mabry Mono — Code

Font Sources:

@font-face {
  font-family: "LL Brown";
  src: url("fonts/LLBrown-Regular.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "LL Brown Black";
  src: url("fonts/LLBrownBlack-700.woff") format("woff");
  font-weight: 700;
}
@font-face {
  font-family: "Mabry Mono";
  src: url("fonts/MabryMono-Regular.woff") format("woff");
  font-weight: 400;
}
@font-face {
  font-family: "Value serif";
  src: url("fonts/Valueserif-700.otf") format("opentype");
  font-weight: 700;
}

Role	Font	Size	Weight
Heading 1	LL Brown Black	5rem	700
Heading 2	LL Brown Black	80px	700
Heading 3	LL Brown Black	72px	700
Body	LL Brown	16px	400
Caption	LL Brown	14px	400
Code	Mabry Mono	14px	400

Typographic Rules:

Limit to 3 font families max per screen
Use LL Brown Black for body/UI text, LL Brown for display/headings
Maintain consistent hierarchy: no more than 3-4 font sizes per screen
Headings use bold (600-700), body uses regular (400)
Line height: 1.5 for body text, 1.2 for headings
Use color and opacity for secondary hierarchy, not additional font sizes

4. Component Stylings

Layout (1)

Footer — html

Navigation (1)

Navigation — html

Data Display (3)

Card — html

Variants: -only-linked, -fluid-width, container, container__heading, container__intro

Badge — html

List — html

Data Input (2)

Button — html

Animation:

Input — html

State: :focus, :placeholder

Overlay (1)

Modal — html

Media (2)

Image — html

Icon — html

5. Layout Principles

Base spacing unit: 4px
Spacing scale: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24
Border radius: .25em, 2px, 3px, 3em, 4px, 5px, 6px, 8px, 10px, 13px, 14px, 16px, 23px, 25px, 32px, 40px, 50px, 100%, 100px
Max content width: 1024px

Spacing as Meaning:

Spacing	Use
4-8px	Tight: related items within a group
12-16px	Medium: between groups
24-32px	Wide: between sections
48px+	Vast: major section breaks

6. Depth & Elevation

Flat — subtle depth hints

0 2px 2px 0 rgba(33,33,33,0.16)
0 2px 2px 0 rgba(0,0,0,0.16)
0 0 2px rgba(0,0,0,0.3)

Raised — cards, buttons, interactive elements

0 0 5px 2px rgba(0,0,0,0.1)
0px 4px 4px 0#043044
0px 1px 4px -1px rgba(0,0,0,0.3)

Floating — dropdowns, popovers, modals

0 5px 10px rgba(0,0,0,0.2)
0 8px 16px 0 rgba(3,53,76,0.16)
0px 16px 16px 0px rgba(0,0,0,0.16)

Overlay — full-screen overlays, top-level dialogs

0px 0px 32px 0px black

Z-Index Scale

0, 1, 2, 3, 4, 5, 10, 11, 20, 100, 101, 111, 150, 999, 1000, 9999

7. Animation & Motion

This project uses expressive motion. Animations are an integral part of the experience.

CSS Animations

@keyframes fadeIn
@keyframes ripple
@keyframes show-nested-multiple
@keyframes fadeInNotification
@keyframes opacityGridAnimation
@keyframes pnlm-mv
@keyframes toTop
@keyframes fromTop

Animated Components

Button:

Motion Guidelines

Duration: 150-300ms for micro-interactions, 300-500ms for page transitions
Easing: ease-out for enters, ease-in for exits
Always respect prefers-reduced-motion

8. Do's and Don'ts

Do's

Use #ffffff as the primary page background
Pair LL Brown Black (body) with LL Brown (display) — these are the only allowed fonts
Follow the 4px spacing grid for all margins, padding, and gaps
Use the defined shadow tokens for elevation — see Section 6
Use border-radius from the scale: .25em, 2px, 3px, 3em, 4px
Reuse existing components from Section 4 before creating new ones

Don'ts

Don't introduce colors outside this palette — extend the design tokens first
Don't introduce additional font families beyond LL Brown Black and LL Brown and Mabry Mono
Don't use arbitrary spacing values — stick to multiples of 4px
Don't create custom box-shadow values outside the system tokens
Don't use arbitrary border-radius values — pick from the defined scale
Don't duplicate component patterns — check Section 4 first
Don't use backdrop-blur or blur effects

Anti-Patterns (detected from codebase)

No blur or backdrop-blur effects
No zebra striping on tables/lists

9. Responsive Behavior

Name	Value	Source
xs	360px	css
xs	374px	css
xs	375px	css
xs	400px	css
xs	480px	css
sm	600px	css
md	670px	css
md	708px	css
md	719px	css
md	720px	css
lg	839px	css
lg	840px	css
lg	972px	css
lg	1023px	css
lg	1024px	css
xl	1086px	css
xl	1280px	css
2xl	1439px	css
2xl	1440px	css
2xl	1920px	css
2xl	2400px	css
2xl	2810px	css

Approach: Use @media (min-width: ...) queries matching the breakpoints above.

10. Agent Prompt Guide

Use these as starting points when building new UI:

Build a Card

Background: #f8f1ff
Border: 1px solid #313a27
Radius: 13px
Padding: 16px
Font: LL Brown Black
Use shadow tokens from Section 6.

Build a Button

Primary: bg var(--accent), text white
Ghost: bg transparent, border #313a27
Padding: 8px 16px
Radius: 13px
Hover: opacity 0.9 or lighter shade
Focus: ring with var(--accent)

Build a Page Layout

Background: #ffffff
Max-width: 1024px, centered
Grid: 4px base
Responsive: mobile-first, breakpoints from Section 9

Build a Stats Card

Surface: #f8f1ff
Label: #464442 (muted, 12px, uppercase)
Value: #0c4433 (primary, 24-32px, bold)
Status: use success/warning/danger from Section 2

Build a Form

Input bg: #ffffff
Input border: 1px solid #313a27
Focus: border-color var(--accent)
Label: #464442 12px
Spacing: 16px between fields
Radius: 13px

General Component

1. Read DESIGN.md Sections 2-6 for tokens
2. Colors: only from palette
3. Font: LL Brown Black, type scale from Section 3
4. Spacing: 4px grid
5. Components: match patterns from Section 4
6. Elevation: shadow tokens

Visual Guide — Screenshots (VISUAL_GUIDE.md)

liseberg — Visual Guide

Master visual reference. Study every screenshot carefully before implementing any UI.
Match colors, layout, typography, spacing, and motion states exactly.

Scroll Journey

The page has cinematic scroll animations. Each screenshot below shows the exact visual state at that scroll depth.
Replicate these transitions precisely — the design changes dramatically as you scroll.

Hero — Above the fold

Scroll position: 0px of 7132px total

Hero — Above the fold

17% scroll depth

Scroll position: 1059px of 7132px total

17% scroll depth

33% scroll depth

Scroll position: 2057px of 7132px total

33% scroll depth

50% scroll depth

Scroll position: 3116px of 7132px total

50% scroll depth

67% scroll depth

Scroll position: 4175px of 7132px total

67% scroll depth

83% scroll depth

Scroll position: 5173px of 7132px total

83% scroll depth

Footer — End of page

Scroll position: 6232px of 7132px total

Footer — End of page

Full Page Screenshots

Liseberg - en värld av upplevelser

URL: https://www.liseberg.se

Liseberg - en värld av upplevelser

Öppettider och program | Liseberg

URL: https://www.liseberg.se/kalender/

Öppettider och program | Liseberg

Logga in - Liseberg Konto

URL: https://www.liseberg.se/ExternalAccount/Login?returnUrl=https%3A%2F%2Fmitt.liseberg.se%2F

Logga in - Liseberg Konto

Parkbiljetter & priser | Liseberg

URL: https://www.liseberg.se/parken/biljetter-priser/

Parkbiljetter & priser | Liseberg

Lisebergsparken | Liseberg

URL: https://www.liseberg.se/till-lisebergsparken/

Lisebergsparken | Liseberg

Section Screenshots

Clipped sections showing individual components in context.

Section 2 — `main > div`

1440×720px

Section 2

Section 3 — `main > div`

1440×242px

Section 3

Section 4 — `main > div`

1440×454px

Section 4

Section 2 — `main > div`

1440×1011px

Section 2

Section 2 — `main > div`

1440×1200px

Section 2

Section 4 — `[class*="section"]`

1440×1200px

Section 4

Section 2 — `main > div`

1440×863px

Section 2

Animations & Motion (ANIMATIONS.md)

Animation Reference

Cinematic motion design extracted from live DOM. Follow these specs exactly to recreate the experience.

Motion Technology Stack

Pure CSS animations — no external animation libraries detected.

Scroll Journey

The page is 7,132px tall. Each frame below shows what the user sees at that scroll depth.

Use these screenshots to understand WHAT animates, WHEN it animates, and HOW it moves.

0% — Top / Hero

Scroll position: 0px

Scroll 0%

17% — Opening Section

Scroll position: 1,059px

Scroll 17%

33% — First Feature Section

Scroll position: 2,057px

Scroll 33%

50% — Mid-Page

Scroll position: 3,116px

Scroll 50%

67% — Lower Content

Scroll position: 4,175px

Scroll 67%

83% — Near Footer

Scroll position: 5,173px

Scroll 83%

100% — Bottom / Footer

Scroll position: 6,232px

Scroll 100%

CSS Keyframes (45 extracted)

`@keyframes countDownFadeIn`

Duration: 0.7s · Easing: ease · Delay: 0s · Iteration: 1 · Fill: none

Used by: .count-down-fade-in, .count-down__animated-card--show

@keyframes countDownFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Opacity fade

`@keyframes cb-score-rating-d271f0eb`

Duration: 0.4s · Easing: ease-out · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .cb-score-rating[data-v-d271f0eb] span::before, .cb-score-rating[data-v-d271f0eb] span::after

@keyframes cb-score-rating-d271f0eb {
  0%, 50% {
    width: 0px;
    opacity: 0;
  }
}

Opacity fade · Dimension expand/collapse

`@keyframes cb-dialog-fade-in-d4b4adbd`

Duration: 0.3s · Easing: ease-in · Delay: 0s · Iteration: 1 · Fill: none

Used by: .cb-dialog[open][data-v-d4b4adbd]::backdrop, [data-v-d4b4adbd] .cb-dialog__close

@keyframes cb-dialog-fade-in-d4b4adbd {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Opacity fade

`@keyframes cb-dialog-fade-in-9c53922f`

Duration: 0.3s · Easing: ease-in · Delay: 0s · Iteration: 1 · Fill: none

Used by: .cb-dialog[open][data-v-9c53922f]::backdrop, [data-v-9c53922f] .cb-dialog__close

@keyframes cb-dialog-fade-in-9c53922f {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Opacity fade

`@keyframes cb-score-rating-d271f0eb`

Duration: 0.4s · Easing: ease-out · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .cb-score-rating[data-v-d271f0eb] span::before, .cb-score-rating[data-v-d271f0eb] span::after

@keyframes cb-score-rating-d271f0eb {
  0%, 50% {
    width: 0px;
    opacity: 0;
  }
}

Opacity fade · Dimension expand/collapse

`@keyframes imboxFadeUp`

Duration: 0.25s · Easing: cubic-bezier(0.4, 0, 0.2, 1) · Iteration: 1

Used by: #oFRAME_FRAMECOMMS_75663_00205 .imbox-frame.imbox-show:not(.imbox-notification), #oFRAME_FRAMECOMMS_75663_00205 .imbox-frame.imbox-show-proactive:not(.imbox-noti

@keyframes imboxFadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

Fade + motion enter animation

`@keyframes imboxFadeUp`

Duration: 0.25s · Easing: cubic-bezier(0.4, 0, 0.2, 1) · Iteration: 1

Used by: #oFRAME_FRAMECOMMS_75663_00205 .imbox-frame.imbox-show:not(.imbox-notification), #oFRAME_FRAMECOMMS_75663_00205 .imbox-frame.imbox-show-proactive:not(.imbox-noti

@keyframes imboxFadeUp {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

Fade + motion enter animation

`@keyframes imboxFadeDown`

Duration: 0.15s · Easing: cubic-bezier(0.4, 0, 0.2, 1) · Iteration: 1 · Fill: both

Used by: #oFRAME_FRAMECOMMS_75663_00205 .imbox-frame.imbox-leave:not(.imbox-notification), #oFRAME_FRAMECOMMS_75663_00205 .imbox-frame.imbox-notification.imbox-leave

@keyframes imboxFadeDown {
  0% {
    opacity: 1;
    transform: translateY(0px);
  }
  100% {
    opacity: 0;
    transform: translateY(20px);
  }
}

Fade + motion enter animation

`@keyframes fadeIn`

Duration: 0.5s · Easing: ease · Delay: 0s · Iteration: 1 · Fill: none

Used by: .fade-in

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translateY(5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

Fade + motion enter animation

`@keyframes ripple`

Duration: 0.35s · Easing: linear · Delay: 0s · Iteration: 1 · Fill: none

Used by: .button__ripple--animate

@keyframes ripple {
  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

Fade + motion enter animation

`@keyframes show-nested-multiple`

Duration: 200ms · Easing: ease · Delay: 0s · Iteration: 1 · Fill: none

Used by: .accommodation-booking__multiple .accommodation-booking__multiple

@keyframes show-nested-multiple {
  0% {
    opacity: 0;
    transform: translateY(-1em);
  }
}

Fade + motion enter animation

`@keyframes fadeInNotification`

Duration: 0.8s · Easing: ease · Delay: 0s · Iteration: 1 · Fill: none

Used by: .card-grid__notification

@keyframes fadeInNotification {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Opacity fade

`@keyframes opacityGridAnimation`

Duration: 0.5s · Easing: ease · Delay: 0.3s · Iteration: 1 · Fill: forwards

Used by: .card-grid__list-item .card__figure

@keyframes opacityGridAnimation {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Opacity fade

`@keyframes pnlm-mv`

Duration: 1.5s · Easing: linear · Iteration: infinite

Used by: .pnlm-loading

@keyframes pnlm-mv {
  0% {
    left: 0px;
    top: 0px;
  }
  25% {
    left: 10px;
    top: 0px;
  }
  50% {
    left: 10px;
    top: 10px;
  }
  75% {
    left: 0px;
    top: 10px;
  }
  100% {
    left: 0px;
    top: 0px;
  }
}

`@keyframes toTop`

Duration: 0.5s · Easing: ease · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .header-nav-secondary--to-top

@keyframes toTop {
  0% {
    transform: translateY(0px);
  }
  99% {
    transform: translateY(-100%);
    position: fixed;
  }
  100% {
    transform: translateY(0px);
    position: absolute;
  }
}

Transform/motion animation

`@keyframes fromTop`

Duration: 0.5s · Easing: ease · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .header-nav-secondary--from-top

@keyframes fromTop {
  0% {
    position: absolute;
  }
  1% {
    transform: translateY(-100%);
    position: fixed;
  }
  100% {
    transform: translateY(0px);
  }
}

Transform/motion animation

`@keyframes fold`

Duration: 0.6s · Easing: cubic-bezier(0.455, 0.03, 0.515, 0.955) · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .count-down__animated-card--fold

@keyframes fold {
  0% {
    transform: rotateX(0deg);
  }
  100% {
    transform: rotateX(-180deg);
  }
}

Transform/motion animation

`@keyframes unfold`

Duration: 0.6s · Easing: cubic-bezier(0.455, 0.03, 0.515, 0.955) · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .count-down__animated-card--unfold

@keyframes unfold {
  0% {
    transform: rotateX(180deg);
  }
  100% {
    transform: rotateX(0deg);
  }
}

Transform/motion animation

`@keyframes animateSearchResult`

Duration: 0.4s · Easing: ease · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .search-result__list-item

@keyframes animateSearchResult {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

Opacity fade

`@keyframes cb-dialog-shake-d4b4adbd`

Duration: 0.82s · Easing: cubic-bezier(0.36, 0.07, 0.19, 0.97) · Delay: 0s · Iteration: 1 · Fill: both

Used by: .cb-dialog .cb-dialog--shake[data-v-d4b4adbd]

@keyframes cb-dialog-shake-d4b4adbd {
  10%, 90% {
    transform: translate3d(-1px, 0px, 0px);
  }
  20%, 80% {
    transform: translate3d(2px, 0px, 0px);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0px, 0px);
  }
  40%, 60% {
    transform: translate3d(4px, 0px, 0px);
  }
}

Transform/motion animation

`@keyframes cb-dialog__close-text-in-d4b4adbd`

Duration: 0.4s · Easing: ease-out · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: [data-v-d4b4adbd] .cb-dialog__close:hover .cb--text

@keyframes cb-dialog__close-text-in-d4b4adbd {
  0% {
    width: 0px;
    padding-right: 0px;
    color: transparent;
  }
  100% {
    width: 100%;
    padding-right: 15px;
    color: rgb(255, 255, 255);
  }
}

Dimension expand/collapse · Text color shift

`@keyframes cb-dialog__close-text-out-d4b4adbd`

Duration: 0.4s · Easing: ease-out · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: [data-v-d4b4adbd] .cb-dialog__close .cb--text

@keyframes cb-dialog__close-text-out-d4b4adbd {
  0% {
    width: 100%;
    padding-right: 15px;
    color: rgb(255, 255, 255);
  }
  100% {
    width: 0px;
    padding-right: 0px;
    color: transparent;
  }
}

Dimension expand/collapse · Text color shift

`@keyframes cb-dialog-enter-d4b4adbd`

Duration: 0.3s · Easing: cubic-bezier(0.075, 0.82, 0.165, 1) · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .cb-dialog[open][data-v-d4b4adbd]

@keyframes cb-dialog-enter-d4b4adbd {
  0% {
    transform: translate3d(0px, 200px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-leave-d4b4adbd`

Duration: 0.3s · Easing: cubic-bezier(0.55, 0.055, 0.675, 0.19) · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .cb-dialog.cb-dialog--leave[data-v-d4b4adbd]

@keyframes cb-dialog-leave-d4b4adbd {
  0% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 200px, 0px);
    opacity: 0;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-fade-out-d4b4adbd`

Duration: 0.3s · Easing: ease-out · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .cb-dialog.cb-dialog--leave[data-v-d4b4adbd]::backdrop

@keyframes cb-dialog-fade-out-d4b4adbd {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Opacity fade

`@keyframes cb-dialog-shake-9c53922f`

Duration: 0.82s · Easing: cubic-bezier(0.36, 0.07, 0.19, 0.97) · Delay: 0s · Iteration: 1 · Fill: both

Used by: .cb-dialog .cb-dialog--shake[data-v-9c53922f]

@keyframes cb-dialog-shake-9c53922f {
  10%, 90% {
    transform: translate3d(-1px, 0px, 0px);
  }
  20%, 80% {
    transform: translate3d(2px, 0px, 0px);
  }
  30%, 50%, 70% {
    transform: translate3d(-4px, 0px, 0px);
  }
  40%, 60% {
    transform: translate3d(4px, 0px, 0px);
  }
}

Transform/motion animation

`@keyframes cb-dialog__close-text-in-9c53922f`

Duration: 0.4s · Easing: ease-out · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: [data-v-9c53922f] .cb-dialog__close:hover .cb--text

@keyframes cb-dialog__close-text-in-9c53922f {
  0% {
    width: 0px;
    padding-right: 0px;
    color: transparent;
  }
  100% {
    width: 100%;
    padding-right: 15px;
    color: rgb(255, 255, 255);
  }
}

Dimension expand/collapse · Text color shift

`@keyframes cb-dialog__close-text-out-9c53922f`

Duration: 0.4s · Easing: ease-out · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: [data-v-9c53922f] .cb-dialog__close .cb--text

@keyframes cb-dialog__close-text-out-9c53922f {
  0% {
    width: 100%;
    padding-right: 15px;
    color: rgb(255, 255, 255);
  }
  100% {
    width: 0px;
    padding-right: 0px;
    color: transparent;
  }
}

Dimension expand/collapse · Text color shift

`@keyframes cb-dialog-enter-9c53922f`

Duration: 0.3s · Easing: cubic-bezier(0.075, 0.82, 0.165, 1) · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .cb-dialog[open][data-v-9c53922f]

@keyframes cb-dialog-enter-9c53922f {
  0% {
    transform: translate3d(0px, 200px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-leave-9c53922f`

Duration: 0.3s · Easing: cubic-bezier(0.55, 0.055, 0.675, 0.19) · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .cb-dialog.cb-dialog--leave[data-v-9c53922f]

@keyframes cb-dialog-leave-9c53922f {
  0% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate3d(0px, 200px, 0px);
    opacity: 0;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-fade-out-9c53922f`

Duration: 0.3s · Easing: ease-out · Delay: 0s · Iteration: 1 · Fill: forwards

Used by: .cb-dialog.cb-dialog--leave[data-v-9c53922f]::backdrop

@keyframes cb-dialog-fade-out-9c53922f {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

Opacity fade

`@keyframes fade-06a2ca85`

Easing: ease · Fill: forwards

Used by: .vgo-slideshow__slide.active[data-v-06a2ca85]

@keyframes fade-06a2ca85 {
  0% {
    opacity: 0.1;
  }
  100% {
    opacity: 1;
  }
}

Opacity fade

`@keyframes zoom-out-06a2ca85`

Easing: ease-in-out · Fill: forwards

Used by: .vgo-slideshow__slide.active .vgo-slideshow__cell[data-v-06a2ca85]

@keyframes zoom-out-06a2ca85 {
  0% {
    transform: scale3d(1.25, 1.25, 1.25);
  }
  100% {
    transform: scale3d(1, 1, 1);
  }
}

Transform/motion animation

`@keyframes marker`

Duration: 1s · Easing: ease · Delay: 0s · Iteration: 1 · Fill: none

Used by: #CookieConsent .cookie-popup .actions > div #cc-b-custom.accentuated

@keyframes marker {
  100% {
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0.224em;
  }
  35%, 45% {
    box-shadow: 0 0 0 0.224em var(--color_primary);
  }
  100% {
    box-shadow: rgba(255, 255, 255, 0) 0px 0px 0px 0.224em;
  }
}

Dimension expand/collapse · Shadow pulse/glow effect

`@keyframes test`

@keyframes test {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(0deg);
  }
}

Transform/motion animation

`@keyframes cb-dialog-fade-out-left-d4b4adbd`

@keyframes cb-dialog-fade-out-left-d4b4adbd {
  0% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50px, 0px, 0px);
    opacity: 0;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-fade-out-right-d4b4adbd`

@keyframes cb-dialog-fade-out-right-d4b4adbd {
  0% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate3d(50px, 0px, 0px);
    opacity: 0;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-fade-in-right-d4b4adbd`

@keyframes cb-dialog-fade-in-right-d4b4adbd {
  0% {
    transform: translate3d(50px, 0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-fade-in-left-d4b4adbd`

@keyframes cb-dialog-fade-in-left-d4b4adbd {
  0% {
    transform: translate3d(-50px, 0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-summary-height-d4b4adbd`

@keyframes cb-dialog-summary-height-d4b4adbd {
  0% {
    height: 0px;
    opacity: 0;
  }
  100% {
    height: calc(-140px + 100vh);
    opacity: 1;
  }
}

Opacity fade · Dimension expand/collapse

`@keyframes cb-dialog-fade-out-left-9c53922f`

@keyframes cb-dialog-fade-out-left-9c53922f {
  0% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate3d(-50px, 0px, 0px);
    opacity: 0;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-fade-out-right-9c53922f`

@keyframes cb-dialog-fade-out-right-9c53922f {
  0% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
  100% {
    transform: translate3d(50px, 0px, 0px);
    opacity: 0;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-fade-in-right-9c53922f`

@keyframes cb-dialog-fade-in-right-9c53922f {
  0% {
    transform: translate3d(50px, 0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-fade-in-left-9c53922f`

@keyframes cb-dialog-fade-in-left-9c53922f {
  0% {
    transform: translate3d(-50px, 0px, 0px);
    opacity: 0;
  }
  100% {
    transform: translate3d(0px, 0px, 0px);
    opacity: 1;
  }
}

Fade + motion enter animation

`@keyframes cb-dialog-summary-height-9c53922f`

@keyframes cb-dialog-summary-height-9c53922f {
  0% {
    height: 0px;
    opacity: 0;
  }
  100% {
    height: calc(-140px + 100vh);
    opacity: 1;
  }
}

Opacity fade · Dimension expand/collapse

Global Transition Declarations

These transition values were extracted from CSS rules across the site:

transition: revert;
transition: initial;
transition: opacity 0.2s;
transition: transform 0.2s cubic-bezier(0.34, 1, 0.84, 1);
transition: opacity 200ms, visibility 200ms, transform 200ms;
transition: color 200ms linear;
transition: background 0.15s ease-out, color 0.2s ease-out;
transition: opacity 600ms;
transition: background 200ms;
transition: opacity 500ms, visibility 500ms;
transition: opacity 400ms ease-out;
transition: opacity 0.3s;

How to Recreate This Motion Design

Step 2 — Scroll-Reveal Pattern

Elements that animate into view follow this pattern:

/* Initial hidden state */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

Step 3 — Key Motion Principles

Duration scale: 0.2s · 200ms — use these values, never invent new durations
Always add @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }

Step 4 — Scroll Journey Reference

Match what happens at each scroll position:

0% (0px) → screens/scroll/scroll-000.png
17% (1059px) → screens/scroll/scroll-017.png
33% (2057px) → screens/scroll/scroll-033.png
50% (3116px) → screens/scroll/scroll-050.png
67% (4175px) → screens/scroll/scroll-067.png
83% (5173px) → screens/scroll/scroll-083.png
100% (6232px) → screens/scroll/scroll-100.png

Layout & Grid (LAYOUT.md)

Layout Reference

Auto-extracted from live DOM. Use this to understand how the site is structured spatially.

Spacing System

Base grid: 4px

Scale: 2, 4, 6, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30 px

Spacing	Semantic Use
4px	Tight — within a component
8px	Medium — between sibling items
16px	Wide — between sections
32px	Vast — major section breaks

Flex Layouts

Element	Direction	Justify	Align	Gap	Children
`div.package-card-container`	column	center	center	—	4
`div.hero__inner.hero__inner--fixed-height`	row	center	end	—	3
`a.button.package-card-container__more-offers-btn`	row	center	center	8px	1
`div.footer-container__grid.footer-container__grid--links`	row	—	—	—	4
`div.container.footer-container__container`	row	center	—	—	1
`ul.card-carousel__items`	row	—	—	—	14
`div.grid-container.grid-container--gutter`	row	—	—	—	4

Grid Layouts

Element	Template Columns	Gap	Children
`div.package-card-container__card-grid.package-card-container`	`590px 590px`	24px	2

Structural Containers

`<header>` (`header#header.header`)

display:          block
children:         1

`<main>`

display:          block
children:         11

`<footer>` (`footer.footer-container`)

display:          block
children:         3

Layout Rules

Container max-width: 1920px — always center with margin: auto
Primary layout system: Flexbox
Secondary layout system: CSS Grid (used for card grids and multi-column layouts)
Every spacing value must be a multiple of 4px
Never use arbitrary margin/padding values outside the spacing scale

Component Patterns (COMPONENTS.md)

Component Reference

Repeated DOM patterns detected by structural analysis. Each component appeared 3+ times.

Detected Components

Component	Category	Instances	Key Classes
Card Figure	card	18×	`.card__figure`
Latest News Carousel Item	card	7×	`.latest-news-carousel__item`
Latest News Card Media	card	7×	`.latest-news-card__media`
Latest News Card Image	card	7×	`.latest-news-card__image`
Latest News Card Content	card	7×	`.latest-news-card__content`
Container	unknown	6×	`.container`
Container Centered	unknown	4×	`.container--centered`, `.container--padding`, `.container--thin`
Grid Container Item	card	4×	`.grid-container__item`, `.grid-container__item--quarter`
Card Box	card	4×	`.card__box`, `.card__box--with-arrow`
Card Link Label	card	4×	`.card__link-label`
Button	button	3×	`.button`
Header Menu Link	unknown	3×	`.header__menu__link`
Button	button	3×	`.button`, `.button--light`, `.button--solid`
Highlighted Carousel List Item	card	3×	`.highlighted-carousel__list-item`
Promo Figure	unknown	3×	`.promo__figure`
Promo Inner	unknown	3×	`.promo__inner`
Promo Link	unknown	3×	`.promo__link`
Promo Box	unknown	3×	`.promo__box`
Promo Heading	unknown	3×	`.promo__heading`
Card	card	3×	`.card`, `.card--fluid-width`, `.card--only-linked`

Cards

Card Figure

Instances found: 18

CSS classes: .card__figure

HTML structure:

<figure class="card__figure"> <img src="/optimized/default-card/ba17c989/globalassets/evenemang/temahelger/gin-glod/2026/ginglod_event_webb_innehall_2026.jpg" alt="Gin &amp; Glöd 29–30 maj"> </figure>