Style Guide

This style guide documents the design tokens and components used across Adam Atteia's portfolio website. All values reference CSS custom properties defined in design-system.css.

Colors

Primary

#4640DE

--color-primary

Primary Dark

#443FDE

--color-primary-dark

Primary Darker

#28257E

--color-primary-darker

Primary Light

#F3F3FC

--color-primary-light

Neutrals

Black

#030407

--color-black

Gray 900

#3E404C

--color-gray-900

Gray 700

#6B6B6B

--color-gray-700

Gray 500

#999999

--color-gray-500

Gray 300

#CCCCCC

--color-gray-300

Gray 200

#EBEBEF

--color-gray-200

Gray 100

#F7F7FA

--color-gray-100

Gray 50

#F3F3FC

--color-gray-50

White

#FFFFFF

--color-white

Semantic

Focus

#3898EC

--color-focus

Error

#EA384C

--color-error

Success

#28A745

--color-success

Warning

#FFC107

--color-warning

Badge / Tag

Blue

#E3F2FD / #1976D2

--color-badge-blue

Purple

#F3E5F5 / #7B1FA2

--color-badge-purple

Orange

#FFF3E0 / #E65100

--color-badge-orange

Teal

#E0F2F1 / #00695C

--color-badge-teal

Typography

Font Families

Archivo — Headings & UI

The quick brown fox jumps over the lazy dog

Inter — Body Text

The quick brown fox jumps over the lazy dog

Headings

H1 Heading — 38px / Bold / Archivo

The quick brown fox jumps over the lazy dog

H2 Heading — 32px / Bold / Archivo

The quick brown fox jumps over the lazy dog

H3 Heading — 24px / Bold / Archivo

The quick brown fox jumps over the lazy dog

H4 Heading — 18px / Semi-bold / Archivo

The quick brown fox jumps over the lazy dog

H5 Heading — 14px / Semi-bold / Archivo

The quick brown fox jumps over the lazy dog

H6 Heading — 12px / Semi-bold / Archivo

The quick brown fox jumps over the lazy dog

Body Text

Body Large — 20px / Regular / Inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum lacus a feugiat viverra. Lorem ipsum dolor sit amet.

Body — 16px / Regular / Inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum lacus a feugiat viverra. Lorem ipsum dolor sit amet.

Small — 14px / Regular / Inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum lacus a feugiat viverra. Lorem ipsum dolor sit amet.

Tiny — 12px / Regular / Inter

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas condimentum lacus a feugiat viverra. Lorem ipsum dolor sit amet.

Font Weights

Light — 300

The quick brown fox jumps over the lazy dog

Normal — 400

The quick brown fox jumps over the lazy dog

Medium — 500

The quick brown fox jumps over the lazy dog

Semi-bold — 600

The quick brown fox jumps over the lazy dog

Bold — 700

The quick brown fox jumps over the lazy dog

Buttons

Variants

Sizes

Badges

Marketing Design Part Time Technology Featured Inactive

Cards

Basic Card

Card Title

Default card with border and padding. Uses --radius-xl corners and --color-gray-200 border.

Hover Card

Interactive Card

Lifts on hover with increased shadow. Add .card-hover for the interactive effect.

Shadow Card

No Border

No border, elevated with shadow. Add .card-no-border for this treatment.

Forms

Text Input

Email Input

Select

Textarea

Shadows

2xl

Border Radius

sm — 4px

md — 6px

lg — 8px

xl — 12px

2xl — 16px

full — 9999px

Spacing

--space-xs — 8px

--space-sm — 12px

--space-md — 16px

--space-lg — 20px

--space-xl — 24px

--space-2xl — 32px

--space-3xl — 40px

--space-4xl — 48px

--space-5xl — 64px

--space-6xl — 80px

--space-7xl — 96px

--space-8xl — 128px

Containers

.container — max-width: 1200px

.container-narrow — max-width: 800px

.container-wide — max-width: 1400px

Back to home