Design System
Style Guide
This page documents the design system used throughout the project: color tokens, typography, components, spacing, radius, elevation, icons, layouts, and the principles behind the visual language.
Color Palette
All color styles currently available in the project, displayed with their resolved values and inferred usage from the existing system.
Eerie Black
rgb(26, 26, 26)
Text / dark surface
Black
rgb(0, 5, 1)
Text / dark base
BG
rgb(14, 14, 15)
Dark background
D - Neutral 10
rgba(255, 255, 255, 0.8)
Light text on dark
Matt Black
hsl(0, 0%, 8%)
Dark surface
Syracuse Red Orange
rgb(226, 60, 10)
Primary accent
White Smoke
rgb(245, 245, 245)
Light background
White
rgb(252, 252, 252)
Surface
Blue (Munsell)
rgb(2, 140, 158)
Secondary accent
White 15%
rgba(255, 255, 255, 0.15)
Border / overlay
White
rgb(255, 255, 255)
Surface
Orange
rgb(255, 101, 45)
Accent
Black
rgb(0, 0, 0)
High contrast text
white
rgb(255, 255, 255)
Surface
White
rgb(255, 255, 255)
Surface
BG
rgb(255, 255, 255)
Page background
Grey
rgb(153, 153, 153)
Muted text
Black
rgb(0, 0, 0)
Text
Black 56%
rgba(0, 0, 0, 0.56)
Muted overlay text
Black 100 %
rgb(0, 0, 0)
Text
White 100 %
rgb(255, 255, 255)
Surface
White Grey Main
rgb(243, 240, 240)
Light surface
Grayscale 0
rgb(255, 255, 255)
Surface
Primary 500
rgb(255, 94, 0)
Primary accent
Typography
Every typography style currently available in the project, shown as a live preview with its documented values.
Heading 2 — The quick brown fox jumps over the lazy dog.
Hanken Grotesk · 3.75rem · 700 · 1.1em · 0em · For section and impact headings
Body — The quick brown fox jumps over the lazy dog.
Inter · 16px · 400 · 1.6em · -0.02em · For body copy and supporting text
Spacing Scale
Observed spacing values used across the project, shown in increasing order with existing usage notes.
0px — Reset spacing
10px — Dense layout gap
20px — Standard container padding
24px — Card or section gap
40px — Airy internal spacing
50px — Section separation
100px — Hero / page spacing
Border Radius
Radius values observed in the existing system, shown with matching visual examples.
12px — Small UI
24px — Rounded card
30px — Large container
1000px — Pill button
Shadows & Effects
Observed elevation and depth treatments currently used throughout the project.
Soft elevation
0px 0px 15px 0px rgba(0, 0, 0, 0.07)
Inset input depth
inset 0px 2px 2px 0px var(--token-d62ffd6d-0365-4204-85b2-674429fa3b78, rgb(230, 231, 232))
Glassy depth
0px 2px 5px 0px rgba(0, 0, 0, 0.15), inset 0px 0.24145061431045178px 0.531191351482994px 0px rgba(255, 255, 255, 0.04), inset 0px 2px 4.4px 0px rgba(255, 255, 255, 0.3)
Layout
The project uses stack-first layouts, occasional grids, centered content wrappers, and responsive desktop, tablet, and phone breakpoints.
Max content width
1080px documented page width
Primary layout
Stack-based vertical composition
Responsive behavior
Desktop, Tablet, and Phone breakpoints
Design Principles
A concise interpretation of the existing visual language, based only on observed system patterns.
Minimal structure with generous whitespace
Premium contrast between dark surfaces and light backgrounds
Modern rounded cards and pill controls
Clean hierarchy with large headings and quiet body copy
Accent color used sparingly for emphasis
Buttons
Existing button components and available variants. The catalog lists primary, secondary, ghost/text-like, and stateful button variants when the source component exposes them.
Get started
button 1
Variants: Variant 1
Hamburger Bar
Variants: Open · Close
Bouncy Button/Button
Variants: Default · Mobile Variante
Plus Button
Variants: Plus Button Desktop · Plus Button Mobile · Plus Button Teamcard · Variant 4
Button/Submit Form Button
Variants: Default · Loading · Disabled · Success · Error
Primary Button 2
Variants: Primary · Secondary · Mobile
Form Button
Variants: Default · Loading · Disabled · Success · Error
Button 2
Variants: Default · Loading · Disabled · Success · Error
Form Elements
Existing input and form-related reusable components currently available in the project.
Button/Submit Form Button
Variants: Default · Loading · Disabled · Success · Error
Form Button
Variants: Default · Loading · Disabled · Success · Error
Input/Input
Variants: Default
Components
All reusable project components collected into a structured catalog. Each card uses the real component as an instance preview and documents the available variants.
button 1
Variants: Variant 1
Nav Bar
Variants: Navigation · Mobile open · Mobile Closed · Variant 4
Hamburger Bar
Variants: Open · Close
Bento Left
Variants: Variant 1 · Variant 2
Button
Variants: Default · Variant 2
Button / 3D
Variants: Variant 1
Menu Item Tab
Variants: Variant 1 · Variant 2
Bouncy Button/Button
Variants: Default · Mobile Variante
Menu
Variants: Open · Close · Variant 3
Navigation
Variants: Desktop Transparent · Phone open · Phone closed Stone · Desktop Stone · Phone Closed Transparent
Logo-Ticker
Variants: Variant 1
Carousel Holder 3
Variants: Slide 1 · Slide 2 · Slide 3 · Slide 4
section-testimonials / 3 arrows
Variants: Arrow Right · Arrow left
Video Carousel
Variants: Desktop · Tablet · Variant 3
VideoCards
Variants: DefaultState SF · DefaultState LF
Video Gallerys Short Form
Variants: Desktop · Tablet · Mobile
Stats
Variants: Stats
Plus Button
Variants: Plus Button Desktop · Plus Button Mobile · Plus Button Teamcard · Variant 4
Long Video Gallery
Variants: Desktop · Tablet · Mobile
VideoCard Long
Variants: DefaultState · DefaultState Hover
Footer Alternative
Variants: Desktop · Tablet · Phone · Desktop gray · Tablet gray · Phone gray · Desktop black · Tablet black · Phone black
TeamCard
Variants: TeamCard Normal · TeamCard Expanded
Video Gallerys long Form
Variants: Desktop · Tablet · Mobile
Section Tag
Variants: Section Tag
Section Header
Variants: Horizontal · Vertical · Mobile - Horizontal
Sections / CTA
Variants: Desktop · Tablet · Phone
Stats 2
Variants: L · S
Cards / Trust Item
Variants: Main · Phone
Number Component
Variants: Variant 1
section-hftestimonials / 2 Component
Variants: 1 · 2 · 3
Button/Submit Form Button
Variants: Default · Loading · Disabled · Success · Error
Social Icon
Variants: Variant 1
Footer 19
Variants: Desktop · Tablet · Phone
Header Center
Variants: Center · Left
Grid Section
Variants: Hover · Normal
Grid Section 2
Variants: Hover · Normal
Icons
Variants: Arrow Forward · Arrow Forward White · Arrow Forward White - Hover · Arrow Forward Black · Arrow Forward Black - Hover · Arrow Down · Arrow Down - Hover · FAQ Arrow - Closed · FAQ Arrow - Open · Instagram · Instagram - Hover · Twitter · Twitter - Hover · Pinterest · Pinterest - Hover · Email · Email - Hover · Shop · Shop - Hover · Call · Call - Hover · Favorite · Favorite - Hover · Close
modal / waitlist
Variants: Photo & Videoproduction · Conception · Channel management · Analyse · Schulungen & Team Enablement · Social-Media-Management
Primary Button 2
Variants: Primary · Secondary · Mobile
button / modal-close
Variants: Outlined
Form Button
Variants: Default · Loading · Disabled · Success · Error
Input/Input
Variants: Default
Button 2
Variants: Default · Loading · Disabled · Success · Error
Cards
Existing card-like component styles shown with realistic preview content and the project’s observed card surface treatment.
Bento Left
Variants: Variant 1 · Variant 2
section-testimonials / 3 arrows
Variants: Arrow Right · Arrow left
VideoCards
Variants: DefaultState SF · DefaultState LF
Stats
Variants: Stats
VideoCard Long
Variants: DefaultState · DefaultState Hover
TeamCard
Variants: TeamCard Normal · TeamCard Expanded
Section Tag
Variants: Section Tag
Section Header
Variants: Horizontal · Vertical · Mobile - Horizontal
Sections / CTA
Variants: Desktop · Tablet · Phone
Stats 2
Variants: L · S
Cards / Trust Item
Variants: Main · Phone
section-hftestimonials / 2 Component
Variants: 1 · 2 · 3
Icons
Existing icon usage is centered on the project’s Phosphor icon set, with the current Logo set available for brand marks.
Phosphor · Shapes
Phosphor · Database
Phosphor · Globe Simple
Logo · Logo