North Sea Ultra Sylt, 9. Mai 2026

Internal · Do not publish

Design
System

Internal design reference for North Sea Ultra. Cinematic archetype — dark, premium, film grain, glass-morphism.

A — Colors

Color Palette

Core Colors

Abyss #1B252F
Ignite #FF6B4E
Sand #FAF8F2
Surface #242F3A

Card Variant Colors

Teal Streckenverlauf
Warm Meet Our Runners
Olive Ergebnisse
Accent News

B — Typography

Type Scale

Display — Libre Franklin 800

Fast, Flat & Windy

Heading — Libre Franklin 800

North Sea Ultra

Card Title — Libre Franklin 800

11,2 km - Der Ellenbogen

Logo — Road Rage

Body — Montserrat

Das Vogel- und Naturschutzgebiet im Norden Sylts gelegen ist einer der einzigartigsten Abschnitte des North Sea Ultras. Nachdem die Beine über die ersten 11km gelockert und aufgewärmt sind biegen wir am Mauthäuschen ein auf den Ellenbogen.

Category Label

Streckenverlauf

Date / Meta

18. März 2026

C — Bento Cards

Card System

Base Card

Category

Card Title

No image, surface background

With Image

Cinematic Overlay

bg-abyss/50 overlay

Interactive

Hover Me

Color overlay + hover effect

Premium Shadow & Border Radius

border-radius: 10px box-shadow: 0 20px 50px rgba(0,0,0,0.5)

D — Buttons & CTAs

Interactive Elements

Primary Button Secondary Button Teal Variant Warm Variant

Filter Buttons

E — Category Overlays

Blog Card Overlays

Streckenverlauf

Teal

Kategorie-Overlay
Meet Our Runners

Warm

Kategorie-Overlay
Ergebnisse

Olive

Kategorie-Overlay
News

Accent

Kategorie-Overlay

F — Animations

Motion & Interaction

ScrollTrigger Stagger Reveal

Cards fade in with stagger as user scrolls. Powered by GSAP ScrollTrigger batch.

Reveal 1

Reveal 2

Reveal 3

Parallax Image

Images inside bento-cards shift subtly on scroll. Scale 1.15 + yPercent -6.

Scroll to see parallax

Cinematic Overlay Hover

Overlay transitions from dark to light on hover. 500ms cubic-bezier easing.

Hover Me

Hover Me

Design Tokens

Easing

power3.out — Reveal (GSAP) power2.inOut — Filter transitions cubic-bezier(0.16, 1, 0.3, 1) — CSS fallback

Durations

0.7s — Scroll reveals 0.5s — Filter animations, overlay hover 0.3s — Button transitions

G — Layout

Grid & Spacing

Container

max-width: 1240px padding: 0 24px (mobile) padding: 0 48px (desktop)

Grid

gap: 20px (gap-5) Blog: 1 → 2 → 3 cols Cards: border-radius 10px

Card System

.bento-card — base card .cinematic-overlay — image overlay min-height: 280px (blog cards)

Textures

Film grain overlay (global) Premium shadows: 0 20px 50px Glass-morphism on nav