Detailed Design Analysis

cedrikstephen.com

Color System

The website employs a refined color palette that combines professional blues with neutral grays, creating a modern tech-focused aesthetic while maintaining readability and visual hierarchy.

Primary Blue

Primary Blue

Hex: #2563EB

RGB: 37, 99, 235

Used for: Primary buttons, links, accents

Primary Dark

Primary Dark

Hex: #1E40AF

RGB: 30, 64, 175

Used for: Hover states, text on light backgrounds

Primary Light

Primary Light

Hex: #93C5FD

RGB: 147, 197, 253

Used for: Backgrounds, secondary elements

Text Dark

Text Dark

Hex: #111827

RGB: 17, 24, 39

Used for: Headings, important text

Text Medium

Text Medium

Hex: #4B5563

RGB: 75, 85, 99

Used for: Body text, secondary info

Text Light

Text Light

Hex: #9CA3AF

RGB: 156, 163, 175

Used for: Tertiary text, placeholders

Background Light

Background Light

Hex: #F3F4F6

RGB: 243, 244, 246

Used for: Section backgrounds, cards

White

White

Hex: #FFFFFF

RGB: 255, 255, 255

Used for: Main background, cards

Color Usage Patterns

Typography System

The typography system employs the Inter font family, a modern sans-serif typeface that offers excellent readability across screen sizes while conveying a contemporary tech aesthetic.

Heading Level 1
Heading Level 2
Heading Level 3
This is body text in the Inter font family. The site uses this clean, modern sans-serif typeface for optimal readability across screen sizes. The typography follows a clear hierarchy with appropriate sizing, weight, and spacing.

Typography Specifications

Element Font Weight Size Line Height Letter Spacing
H1 (Hero) Inter 700 3rem (48px) 1.2 -0.025em
H1 (Regular) Inter 700 2.5rem (40px) 1.2 -0.025em
H2 Inter 600 2rem (32px) 1.3 -0.025em
H3 Inter 600 1.5rem (24px) 1.4 -0.015em
Subtitle Inter 500 1.25rem (20px) 1.5 -0.01em
Body (Large) Inter 400 1.125rem (18px) 1.6 0
Body Inter 400 1rem (16px) 1.6 0
Small/Caption Inter 400 0.875rem (14px) 1.5 0.01em
Button Text Inter 500 0.875rem - 1rem 1.5 0.01em

Typography Modulation

Spacing & Layout System

The website employs a consistent spacing system based on a 4px base unit (0.25rem), creating a harmonious rhythm throughout the interface while ensuring proper content density and breathing room.

Base Units

0.25rem (4px)
Extra Small
0.5rem (8px)
Small
1rem (16px)
Medium
1.5rem (24px)
Large
2rem (32px)
Extra Large
3rem (48px)
2X Extra Large
4rem (64px)
3X Extra Large
6rem (96px)
4X Extra Large

Layout Specifications

Element Specification
Main Container Max-width: 1280px (80rem) with auto horizontal margins
Content Container Max-width: 1024px (64rem) for text-heavy sections
Grid System 12-column grid with 20px (1.25rem) gutters
Section Padding Vertical: 4rem-6rem (64px-96px); Horizontal: 1.5rem-2rem (24px-32px)
Card Padding 1.5rem (24px) standard; 1rem (16px) compact
Element Spacing 1rem (16px) between related elements; 2rem-3rem (32px-48px) between groups
Vertical Rhythm Consistent 4px baseline grid applied throughout
Form Field Spacing 1.5rem (24px) between fields; 0.5rem (8px) between label and input

Responsive Breakpoints

Breakpoint Size Media Query Target
Mobile < 640px @media (max-width: 639px) Small phones
Tablet Small 640px - 767px @media (min-width: 640px) Large phones, small tablets
Tablet 768px - 1023px @media (min-width: 768px) Tablets, landscape phones
Desktop Small 1024px - 1279px @media (min-width: 1024px) Small laptops, large tablets
Desktop 1280px - 1535px @media (min-width: 1280px) Laptops, desktops
Desktop Large ≥ 1536px @media (min-width: 1536px) Large desktops, TVs

UI Components

The website utilizes a cohesive set of UI components that maintain consistent styling, interactions, and behaviors across the interface.

Buttons

The primary action component with several variants.

  • Padding: 0.5rem 1rem (8px 16px)
  • Border-radius: 0.375rem (6px)
  • Font-weight: 500 (medium)
  • Shadow: 0 1px 2px rgba(0,0,0,0.05)
  • Transition: 150ms ease-in-out for all states
  • Hover: Darker background, slight scale/lift

Form Inputs

Clean, accessible form elements with clear focus states.

  • Padding: 0.75rem 1rem (12px 16px)
  • Border: 2px solid #D1D5DB
  • Border-radius: 0.375rem (6px)
  • Focus: Primary color border + subtle shadow ring
  • Transition: 200ms ease for border-color
  • Placeholder: #9CA3AF (60-65% opacity)
Project Image

Project Title

Brief description of the project with key details.

Project Cards

Showcase components for portfolio items.

  • Border-radius: 0.5rem (8px)
  • Shadow: 0 4px 6px rgba(0,0,0,0.1)
  • Image ratio: 16:9 or square
  • Content padding: 1rem (16px)
  • Hover: Lift effect with enhanced shadow
  • Animation: 250ms transform & shadow transition
Cedrik Stephen
Home
Projects
About
Contact

Navigation

Header navigation with clean spacing and subtle indicators.

  • Height: 60px - 70px
  • Item spacing: 1.5rem - 2rem (24px - 32px)
  • Font-weight: 500 (medium)
  • Active indicator: Subtle underline or color change
  • Mobile: Hamburger menu with slide-in animation
  • Scroll behavior: Possibly sticky with shadow on scroll

Animations & Interactions

The website employs subtle, purposeful animations that enhance the user experience without being distracting, creating a sense of polish and responsiveness.

Fade In Animation

Page Load Animations

Property Value
Type Fade in, Slide up
Duration 600ms - 800ms
Easing cubic-bezier(0.2, 0, 0.2, 1)
Stagger 100ms between elements
Distance 20px for slide up

Button Interactions

State Effect
Hover Background darkens, slight scale (1.05x)
Focus Ring outline (3px, 25% opacity)
Active Scale down slightly (0.98x)
Transition 150ms ease-in-out
Project Image

Project Card

Hover animation demonstration.

Card Interactions

Effect Value
Transform translateY(-4px) on hover
Shadow Increased depth on hover
Duration 250ms
Easing ease-out

Scroll Animations

Type Description
Reveal Elements fade/slide in as they enter viewport
Parallax Subtle background depth effect (1.1-1.2x ratio)
Trigger 10-15% into viewport
Implementation Likely Intersection Observer API or animation library

Micro-interactions

Element Trigger Response
Navigation Links Hover Subtle underline animation (left-to-right, 200ms)
Form Fields Focus Border color shift with smooth transition + subtle ring
Project Cards Hover Elevation increase + subtle scale (1.02-1.05x)
Buttons Click/Tap Quick scale down (0.97-0.98x) for visual feedback
Page Transitions Navigation Subtle fade-out/fade-in between page changes
Hero Section Page Load Staggered entrance animations for headline elements

Design Patterns & Principles

The website adheres to several key design principles that create a cohesive, professional, and user-friendly experience.

Visual Hierarchy

Design Language

Technical Execution