Style Guide

Learn a little more about the design, colors and typography that make up my portfolio.

Colors

Gradiente Principal

A dark, contrasting and vibrant palette with gradients. Ideal for glassmorphism style components that do not tire the eyes but provide elegance.

#b16cea
#ff5e69
#ffa84b

Neutros Oscuros

Fondos principales y contenedores en el modo oscuro (por defecto).

bg-neutral-950
bg-neutral-900
bg-neutral-800
Texto Resaltado

Color de Selección

Definido en el seudo-elemento ::selection global.

Fondo: #ffe1e3
Texto: #ff5e69

Typography

Aa
H1 - Main Title

Gilroy Bold

7xl (72px) / -0.025em tracking

Aa
H2 - Secondary Title

Gilroy Semibold

5xl (48px) / -0.025em tracking

Aa
H3 - Subtitle
Gilroy Semibold

2xl (24px)

P - Base Text

Albert Sans Variable. Fast and elegant design starts with clean typography. This is the text used for long paragraphs, descriptions and general content in the portfolio, ensuring excellent readability.

Highlighted Text
Regular (Lg) / 18px
Standard Text
Regular (Base) / 16px
Small Text
Regular (Sm) / 14px

UI Elements

Buttons

Interactive button styles with smooth transitions on hover and subtle shadows.

Badges (Pills)

React React Astro Astro Tailwind Tailwind TypeScript TypeScript

Minimalist badges to show technologies and skills, using the global `Pill` component.

Cards

Project Name

Light Card style example used in project cards to highlight visual content and maintain maximum legibility.

Dark Card

Dark style example used in the experience and bento grid to create visual depth in the default dark mode.

Icons

Main Iconography

Arrow
Dropdown
Bug
External
Github
Home
Reload
Type

Native SVG icons are rendered inline for maximum efficiency. They are used mainly in navigation, external links and decorative details.