Design_System_v1.0

Development Preview • /dev/components

01. Foundations

Tokens base: Colors, Typography, Icons.

Color Palette

Primary

50
100
200
300
400
500
600
700
800
900
950

Secondary

50
100
200
300
400
500
600
700
800
900
950

Neutral

0
50
100
200
300
400
500
600
700
800
900
950

Semantics

Typography

Display / 5xl

The quick brown fox

Heading / 3xl

Jumps over the lazy dog

Body / Base

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Icons (Lucide)

Home

Colored

Warning

02. Atoms

Componentes indivisibles.

Buttons

Badges

Default Primary Secondary Success Warning Error Info
Small Medium Large Removable

Inputs & Labels

Textarea

Standalone Labels

Form Controls

Checkboxes

Helper text explaining the option

Radios

Switches

Avatars

XS
SM
MD
LG
XL

Identity Fallbacks (Pattern Generator)

Showcase of deterministic patterns generated when images fail to load. Seeds are the 'alt' text.

Duck Project

Seed: "Duck Project"

Code System

Seed: "Code System"

Grid Layout

Seed: "Grid Layout"

Random Seed 123

Seed: "Random Seed 123"

Brand Shapes

Official Mascot

Shape: "duck"

Fast Performance

Shape: "lightning"

Premium Quality

Shape: "crown"

Made with Love

Shape: "heart"

Loaders (Atom)

Spinners

Skeletons

NeonText

Default Neon Text

NEON

Custom Text

DEVELOPER

With Custom Classes

CUSTOM

ScrollIndicator

Default Scroll Indicator

Scroll para conocerme

Custom Text

Desliza hacia abajo

With Custom Classes

Descubre más

03. Molecules

Grupos de átomos funcionando juntos.

Cards

Default Card

New

This is a default card component with a header slot.

Elevated Card

Has a stronger shadow and lift effect on hover.

Profile Card

Alex Developer

Creative Technologist

Passionate developer with 5+ years of experience in building digital products.

Download CV Contact Me

Alerts

Modals

Dropdowns

Tabs

Manage your account details.

Accordions

Astro is currently used by thousands of developers.

Navigation

Horizontal

Breadcrumb

Pagination

Infinite Marquee (Tech Stack)

React
Astro
TypeScript
Tailwind
Node.js
PostgreSQL
npm install astro
npm install tailwindcss
npm install typescript
npm run dev

04. Organisms

Componentes complejos y secciones completas.

Hero Component

Build faster with Astro

A complete design system for your next project, built with Astro, Tailwind CSS, and TypeScript.

Header & Footer Simulation

Brand

Contact Form

Get in Touch

Fill out the form below and I'll get back to you as soon as possible.

Testimonials Section

What Our Clients Say

Don't just take our word for it.

Sarah Johnson
"The attention to detail and code quality is outstanding. Delivered ahead of schedule and exactly what we needed."
Sarah Johnson CTO at TechStart
Michael Chen
"A truly professional experience from start to finish. The new design system has transformed our development workflow."
Michael Chen Product Manager
Emily Davis
"Incredible results. Our conversion rates increased by 40% after launching the new landing page."
Emily Davis Marketing Director

Experience Timeline

Work Experience

Senior Frontend Engineer

2023 - Present

Tech Corp

Leading the frontend team in migrating to Astro and React. Improved performance by 40%.

Full Stack Developer

2021 - 2023

Digital Agency

Built scalable web applications for various clients using Next.js and Node.js.

05. Patterns

Soluciones recurrentes de UI.

Stats Cards

20.1%

$45,231

Total Revenue

5.4%

2,345

Active Users

45%

Bounce Rate

12%

+123

New Signups

Data Table

Recent Transactions

ID User Status Amount
#1234 John Doe Completed $120.00
#1235 Jane Smith Pending $450.50
#1236 Bob Johnson Failed $25.00

Empty States

No projects found

Get started by creating a new project.

No messages

Your inbox is empty.

Page Loader