cedrikstephen.com
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.
Hex: #2563EB
RGB: 37, 99, 235
Used for: Primary buttons, links, accents
Hex: #1E40AF
RGB: 30, 64, 175
Used for: Hover states, text on light backgrounds
Hex: #93C5FD
RGB: 147, 197, 253
Used for: Backgrounds, secondary elements
Hex: #111827
RGB: 17, 24, 39
Used for: Headings, important text
Hex: #4B5563
RGB: 75, 85, 99
Used for: Body text, secondary info
Hex: #9CA3AF
RGB: 156, 163, 175
Used for: Tertiary text, placeholders
Hex: #F3F4F6
RGB: 243, 244, 246
Used for: Section backgrounds, cards
Hex: #FFFFFF
RGB: 255, 255, 255
Used for: Main background, cards
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.
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 |
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.
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 |
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 |
The website utilizes a cohesive set of UI components that maintain consistent styling, interactions, and behaviors across the interface.
The primary action component with several variants.
Clean, accessible form elements with clear focus states.
Brief description of the project with key details.
Showcase components for portfolio items.
Header navigation with clean spacing and subtle indicators.
The website employs subtle, purposeful animations that enhance the user experience without being distracting, creating a sense of polish and responsiveness.
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 |
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 |
Effect | Value |
---|---|
Transform | translateY(-4px) on hover |
Shadow | Increased depth on hover |
Duration | 250ms |
Easing | ease-out |
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 |
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 |
The website adheres to several key design principles that create a cohesive, professional, and user-friendly experience.