Style Guide
A comprehensive guide to the visual language and design system used throughout this portfolio.
Typography
The typographic system uses two primary font families to create hierarchy and visual interest.
Font Families
Cormorant Garamond
Display & Headings
Aa Bb Cc Dd Ee
Used for headlines, titles, and display text. Provides elegance and sophistication.
font-family: 'Cormorant Garamond', serif
Inter
Body & UI Text
Aa Bb Cc Dd Ee
Used for body text, UI elements, and functional content. Clean and highly readable.
font-family: 'Inter', sans-serif
Type Scale
Display Heading
Page Title
Section Heading
Subsection Heading
Large Body Text
Medium Body Text
Regular Body Text
Small Text / Captions
Extra Small / Labels
Color Palette
The color system is built on HSL values with semantic naming for consistent theming across light and dark modes.
Primary Colors
Background
--background
Foreground
--foreground
Primary
--accent-warm
Primary Foreground
--primary-foreground
Secondary & Accent Colors
Secondary
--secondary
Secondary Foreground
--secondary-foreground
Accent
--accent
Accent Foreground
--accent-foreground
Muted & Utility Colors
Muted
--muted
Muted Foreground
--muted-foreground
Border
--border
Ring
--ring
Custom Accent Colors
Accent Warm
--accent-warm
Accent Warm Light
--accent-warm-light
Surface Warm
--surface-warm
Surface Elevated
--surface-elevated
Semantic Colors
Destructive
--destructive
Card
--card
Popover
--popover
Input
--input
Graphic Elements
Visual elements that add depth, structure, and polish to the interface.
Shadows & Elevation
Shadow SM
shadow-sm
Shadow Default
shadow
Shadow MD
shadow-md
Shadow LG
shadow-lg
Border Radius
Small
rounded-sm
Default
rounded
Medium
rounded-md
Large
rounded-lg
Spacing Scale
1 (4px)
2 (8px)
4 (16px)
6 (24px)
8 (32px)
12 (48px)
16 (64px)
24 (96px)
Buttons
Button components with various variants and sizes.
Button Variants
Button Sizes
Button States
Form Elements
Input components for collecting user data.
Text Inputs
Textarea
Checkbox & Switch
Slider
Progress
Cards
Card components for grouping related content.
Basic Card
A simple card with header and content
Card content goes here. This demonstrates the standard card layout.
Card with Footer
Includes action buttons
This card includes a footer with actions.
Highlighted Card
With custom border color
Cards can be customized with border colors.
Badges
Small status indicators and labels.
Alerts
Contextual feedback messages for user actions.
Default Alert
This is a default alert — check it out!
Error
Something went wrong. Please try again.
Avatar
User profile images with fallback initials.
Accordion
Collapsible content panels for organizing information.
This style guide documents all the visual elements and components used in this portfolio website.
Import the components from their respective files and use them in your code with the documented props.
Yes! All colors are defined as CSS custom properties in styles.css and can be easily modified.
Tabs
Tabbed interface for organizing content into sections.
Account settings and profile information go here.
Password and security settings go here.
General application settings go here.
Overlays
Modal dialogs and slide-out sheets for focused interactions.
Popovers & Tooltips
Contextual menus and hover information.
Skeleton
Loading placeholders for content.
Separator
Visual dividers for separating content.
Above separator
Below separator
Decorative Elements
Arrow pathways and flourishes that add visual interest while maintaining the connection theme.
Arrow Pathways
Available variants: hero,
section-divider,
corner,
flowing,
network,
vertical-connector
Headshot Flourishes
Available variants: orbital,
constellation,
circuit,
flowing-arrows
Animation Components
Animation wrappers for smooth, purposeful motion.
AnimatedSection Component
Scroll-triggered animations with configurable direction:
up,
down,
left,
right
Fade Up
direction="up"
Scale In
animation="scale"
StaggerContainer Component
Animates children with a staggered delay. Set
staggerDelay to control timing (default: 0.1s).
Case Study Components
Specialized components for presenting case study content with consistent styling and structure.
HeroImage Component
Full-width featured images with optional captions. Aspect ratios:
wide (21/9),
standard (16/9),
cinematic (2.35/1)
Hero Image Placeholder
Featured image
Optional caption text
StatsRow Component
Display metrics in different variants:
compact,
default,
large
Compact Variant
FinanceApp
Client
6 months
Timeline
iOS & Android
Platform
Lead Designer
My Role
Default Variant
+45%
Engagement
-30%
Support Tickets
67
NPS Score
4.8★
App Rating
TwoColumnBlock Component
Text + image side-by-side layouts. Image position:
left or
right.
Image aspect: video,
square,
portrait
Image on Right (Default)
This is the default layout with text on the left and an image on the right. Great for leading with content before showing visuals.
Example Image
Example Image
Image on Left
This layout places the image on the left side. Useful for alternating visual rhythm in longer pages.
BulletedContent Component
Lists with headers and descriptions. Supports
1 or
2 column layouts.
Single Column
First Point
Description of the first point with supporting details.
Second Point
Description of the second point with additional context.
Two Columns
Point One
Brief description of the first item.
Point Two
Brief description of the second item.
Point Three
Brief description of the third item.
Point Four
Brief description of the fourth item.
ImageCarousel Component
Horizontal scrolling image gallery with optional captions and descriptions.
Set showDescriptions=true to display text below images.
Layout Components
Core structural components that provide consistent navigation and branding across pages.
Navigation Component
Fixed header navigation with logo, nav links, and active state indicators. Features: backdrop blur, connecting pathway line, hover arrows, and active underline.
Footer Component
Site footer with name/tagline, CTA, social links, and copyright. Includes decorative arrow accents and consistent styling.
Embla Carousel (Custom)
Custom carousel implementation. Used in the About section for card-based navigation with numbered tabs and arrow controls.
Features
Numbered Tab Navigation
Clickable tabs with active state highlighting.
Arrow Controls
Previous/next buttons for keyboard and mouse navigation.
Snap Scrolling
Smooth scroll with snap alignment for each card.
Dynamic Selection
Tab and carousel stay synchronized.
Icons (Lucide)
Icons used throughout the site from the Lucide icon library.
Icons from lucide.dev - inline SVGs for optimal performance
Arrow Icons (Custom)
Custom arrow components for consistent directional indicators.
Custom SVG arrows matching the portfolio's connection theme