Design Library
Hi, I'm Gabriel — a Sydney-based UX/UI & Product Designer with 8+ years designing digital products for Australian businesses. This is the live design library that powers gabrielhidalgo.design — every token, component, and section rendered straight from source, in both light and dark themes.
~20
Color tokens
10
Typography tokens
20
UI components
15
Section components
Foundations
Components
Avatar
Photo + logo variants with gradient border
Back To Top
Floating scroll-to-top button
Badge
Labels, tags, and filter pills
Blog Card
Blog post card with tile + full layouts
Button
Primary and secondary variants
Category Filters
Filter pills with result count
CTA Button
Large button with gradient glow
External Link Preview
Inline link with OG hover preview
Animations
Scroll-triggered animations
FAQ Accordion
Expandable single-open FAQ list
Hire Me Menu
Hover popup with contact actions
Person Avatar
Photo with initial-letter fallback
Resume Preview
Modal iframe of the live resume
Hero Background
Gradient, stars, vignette, and text gradient
Section Frame
Decorative section wrapper
Star Rating
Gold star row with numeric value
Testimonial Card
Person avatar + quote card
Theme Toggle
Light / dark mode switch
Sections
About Section
Homepage bio, skills, experience
Blog Grid
Blog post listings
Case Study Carousel
Full + hero variants with rotating border
CTA Section
Call-to-action with form
Hero
Homepage hero — gradient + carousel
Featured Blog Card
Hero card at the top of /blog
Featured Testimonial
Scroll-reveal quote on home
Logo Carousel
Client logo marquee
Related Case Studies
3-up grid + mobile tile list
Services Section
Service cards with details
Testimonials
Client testimonial carousel
Work Carousel
Filterable case-study carousel for /work
Layout
Theme Support
All tokens and components support light and dark themes. Toggle the theme using the switch in the header to preview how elements adapt. Colors, shadows, and other tokens automatically adjust based on the active theme.