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.
27
Color tokens
10
Typography tokens
25
UI components
11
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
Case Study Card
Full, hero, and tile layouts
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
Meta Grid
Labeled detail columns under a case study title
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
Table of Contents
Sticky scroll-spy nav for case studies
Testimonial Card
Person avatar + quote card
Testimonial Marquee Card
Fixed-width quote card for the marquee rows
Text Link
Inline underlined link with trailing icon
Trust Heading
Section heading with the Google rating pill
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
Tools I Use
Slim logo strip of day-to-day tools
Work Carousel
Filterable case-study carousel for /work