Page header background

Site Design System

Colors

Black

#000

Primary background

White

#fff

Primary text

Dark Gray

#262626

Card backgrounds

Medium Gray

#222

Button backgrounds, dropdowns

Light Gray

#e0e0e0

Secondary text

Muted Gray

#bdbdbd

Tertiary text

Glass Gray

rgba(137, 137, 137, 0.48)

Glass morphism background

Nav Background

rgba(255,255,255,0.25)

Navigation glass effect

Nav Overlay

rgba(0,0,0,0.2)

Navigation overlay

Accent Orange

#ffb347

Accent color, headings

Accent Orange Light

#ffcc80

Accent gradient end

Accent Cyan

#00cfff

Contact page accent

White 70%

rgba(255, 255, 255, 0.7)

Muted text, headings

White 20%

rgba(255, 255, 255, 0.2)

Borders, dividers

White 10%

rgba(255, 255, 255, 0.1)

Subtle borders

Black 85%

rgba(0,0,0,0.85)

Mobile dropdown background

Black 50%

rgba(0,0,0,0.5)

Overlays, hover states

Black 30%

rgba(0,0,0,0.3)

Card backgrounds, overlays

Black 20%

rgba(0,0,0,0.2)

Navigation overlay

Black 18%

rgba(0,0,0,0.18)

Shadows, overlays

Black 10%

rgba(0,0,0,0.10)

Nav shadows

Typography

Font Family: Geologica

Available weights: 100-900

Thin 100
The quick brown fox jumps over the lazy dog
ExtraLight 200
The quick brown fox jumps over the lazy dog
Light 300
The quick brown fox jumps over the lazy dog
Regular 400
The quick brown fox jumps over the lazy dog
Medium 500
The quick brown fox jumps over the lazy dog
SemiBold 600
The quick brown fox jumps over the lazy dog
Bold 700
The quick brown fox jumps over the lazy dog
ExtraBold 800
The quick brown fox jumps over the lazy dog
Black 900
The quick brown fox jumps over the lazy dog

Font Sizes (Desktop)

93px (Hero Title - Desktop)
87.7px (Page Header - Desktop)
48px (Section Title)
35pt (Showreel Title)
32px (Subsection Title)
28px (Card Title)
28pt (Project Grid Title)
20px (Card Name, Footer Name)
18px (Body Large)
16px (Body, Navigation)
15pt (Showreel Description)
14px (Small Text, Footer Copyright)
13pt (Showreel Availability)
12px (Labels, Captions)
1.25rem (Button Text - 20px)
1.15rem (Body Large - 18.4px)
1.1rem (Mobile Nav Title - 17.6px)
1rem (Base - 16px)
0.75rem (Mobile Nav Link - 12px)

Responsive Font Sizes (clamp)

These font sizes scale fluidly between breakpoints using CSS clamp()

Hero Title
clamp(32px, 8vw, 93px)
Desktop: 93px → Tablet: ~56px → Mobile: 32px
Desktop (>1023px): 93pxTablet (600-1023px): ~56pxMobile (<600px): 32px
Hero Title (Tablet)
clamp(28px, 7vw, 56px)
Scales between 28px and 56px
Tablet viewport: 28px - 56px
Hero Title (Mobile)
clamp(32px, 10vw, 32px)
Fixed at 32px on mobile
Mobile viewport: 32px (fixed)
Page Header Title
clamp(16px, 4vw, 32px)
Scales between 16px and 32px
Desktop: 32pxMobile: 16px

Font Sizes by Viewport Mode

Desktop (>1023px)

Hero: 93px
Page Header: 87.7px
Section Title: 48px
Subsection: 32px
Card Title: 28px
Body Large: 20px
Body: 16px
Small: 14px

Tablet (600px - 1023px)

Hero: ~56px (clamp)
Page Header: ~56px (clamp)
Section Title: 48px
Subsection: 32px
Card Title: 28px
Body Large: 18px
Body: 16px
Small: 14px

Mobile (<600px)

Hero: 32px (clamp)
Page Header: 35pt
Section Title: 36px
Subsection: 28pt
Card Title: 18pt
Body Large: 1.15rem
Body: 1rem
Nav Link: 0.75rem
Small: 13pt

Icons

Social Media Icons

Available icons:

  • YouTube
  • X (Twitter)
  • Instagram
  • Bluesky
  • LinkedIn
  • Threads

Buttons

Glass Morphism Button

Button States:

  • Default: Glass morphism with blur effect
  • Hover: Enhanced shadow
  • Active/Clicked: Scale down (0.98) with deeper shadow
  • Focus: White outline for accessibility

Components

Project Grid Square

Example Project
This is a sample project card

Blured Page Header

Used at the top of this page. Features:

  • Dynamic height adjustment on scroll
  • Font size scaling
  • Glass morphism blur effect
  • Gradient overlay

Example 1: Default Header

Page header background

Example Page Title

Example 2: Long Title

Page header background

This is a Longer Page Title Example

Site Header (Navigation)

The main site navigation header with glass morphism effect. Click the navigation items to see the indicator animate!

Desktop Mode

Desktop navigation with animated indicator pill - Click items to see the indicator move!

Mobile Mode

Mobile navigation with hamburger menu - Click the hamburger to toggle the menu!

Social Media Icons Component

Displays all social media links with hover effects

Design Tokens

Spacing

  • Small: 6px
  • Medium: 16px
  • Large: 24px
  • XLarge: 32px
  • XXLarge: 72px

Border Radius

  • Small: 15px (Cards)
  • Medium: 30px (Navigation)
  • Large: 75px (Buttons)

Shadows

  • Card: 0px 8px 32px rgba(0,0,0,0.18)
  • Button: 0px 4px 16px rgba(0,0,0,0.18)
  • Nav: 0px 4px 24px rgba(0,0,0,0.10)

Blur Effects

  • Navigation: blur(18px)
  • Button: blur(7.95px)
  • Header: blur(7.95px)