Walter Morales

Software Engineer building products with modern web technologies.
Based in El Salvador.

Cursor Ambassador for El Salvador

Overview

This design system establishes the foundation for building consistent, accessible, and maintainable UI components. It defines typography scales, color palettes, spacing systems, and component patterns used throughout the site.

Typography

Consistent typography creates hierarchy and improves readability.

Typography Scale

Use these canonical classes instead of arbitrary pixel values.

Page Title

text-3xl sm:text-4xl

Main page headings. Use with font-display.

Example Page Title

Section Title

text-xl

Section headings within pages.

Section Title

Body Text

text-sm

Default body text, summaries, and descriptions. Replaces text-[13px].

This is body text used for summaries, descriptions, and general content. It provides good readability while maintaining a clean, minimal aesthetic.

Meta Text

text-xs font-mono

Dates, tags, labels, and small metadata. Replaces text-[11px].

January 15, 2025

#tag

Small Heading

text-base font-display

Small headings, card titles, and list item titles. Replaces text-[15px].

Small Heading Example

Use canonical classes:

text-xs font-mono
text-sm
text-base font-display

Maintain consistency:

Use the same typography classes for the same semantic purpose across all pages.

Don't

Avoid arbitrary sizes:

text-[11px]
text-[13px]
text-[15px]

Don't mix patterns:

Avoid using different font sizes for the same semantic role in different components.

Colors

Semantic color tokens for consistent theming.

Color Palette

Use semantic color names, not raw color values.

Accent

bg-accent

Primary actions, links, highlights, and interactive elements.

Foreground

text-foreground

Primary text color, headings, and high-contrast elements.

Muted

bg-muted

Backgrounds for cards, code blocks, and subtle UI elements.

Border

border-border

Borders, dividers, and subtle separators.

Muted Foreground

text-muted-foreground

Secondary text, descriptions, and less prominent content.

Background

bg-background

Main page background color.

Spacing

Consistent spacing creates visual rhythm and hierarchy.

Spacing Scale

Use Tailwind's spacing scale for consistent gaps and padding.

Common Spacing Values

8px

gap-2 | p-2 | space-y-2

12px

gap-3 | p-3 | space-y-3

16px

gap-4 | p-4 | space-y-4

24px

gap-6 | p-6 | space-y-6

32px

gap-8 | p-8 | space-y-8

48px

gap-12 | p-12 | space-y-12

64px

gap-16 | p-16 | space-y-16

Use consistent spacing tokens like space-y-4, gap-6, and p-8.

Don't

Avoid arbitrary spacing values like gap-[13px] or p-[17px].

Components

Reusable UI components built with shadcn/ui and Tailwind CSS.

Button

Use Button component for all interactive actions.

Badge

Use Badge for tags, labels, and status indicators.

DefaultOutlineSecondary