Design Library
Hi, I'm Gabriel — a Sydney-based UX/UI & Product Designer. I find what's not working in digital products and design better experiences. This is the live design library that powers gabrielhidalgo.design — every token, component, and section rendered straight from source.
~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
Mesh gradient shader, vignette, and fades
Section Frame
Decorative section wrapper
Star Rating
Gold star row with numeric value
Testimonial Card
Person avatar + quote card
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
Client Logo Grid
Client logos with role reveals
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