Skip to content
Giacomo Rossi
CV Contact

v0.1 · foundations

Design System

Outrun / synthwave, dark-only. A living reference — tokens, typography, text effects, the installed components and the project's neon utilities, all driven by the real theme variables.

Brand

The wordmark — magenta type with a cyan initial.

Giacomo Rossi logo.svg · 190×110
on surface

Neon accents

magenta
#FF2D95
cyan
#2DE2E6
purple
#9D4EDD
orange
#FF7A45
sun
#F6C44B
gradient
magenta → orange

Contrast (WCAG)

Computed at build time for our token pairs, in both themes.

Light

Aa Text on background 15.86 AAA
Aa Subtle on background 6.42 AA
Aa Primary FG on primary 4.39 AA Large

Dark

Aa Text on background 17.11 AAA
Aa Subtle on background 8.77 AAA
Aa Primary FG on primary 5.77 AA

Typography

Every Tailwind text size, the weight ramp, and the font families.

text-xs Giacomo Rossi
text-sm Giacomo Rossi
text-base Giacomo Rossi
text-lg Giacomo Rossi
text-xl Giacomo Rossi
text-2xl Giacomo Rossi
text-3xl Giacomo Rossi
text-4xl Giacomo Rossi
text-5xl Giacomo Rossi
text-6xl Giacomo Rossi
text-7xl Giacomo Rossi
text-8xl Giacomo Rossi
text-9xl Giacomo Rossi

Weights (Montserrat)

400 · Regular The quick brown fox
500 · Medium The quick brown fox
600 · Semibold The quick brown fox
700 · Bold The quick brown fox
800 · Extrabold The quick brown fox

font-sans

Montserrat sans

font-display

Montserrat display

font-mono

JetBrains Mono 0123

Text effects

Heading shimmer, neon glow, eyebrow labels and meta tags.

text-shimmer (animated sweep)

Default · sun blend text-shimmer-cyan text-shimmer-magenta

text-glow

Neon text-glow

Labels (eyebrows)

label · cyan (default)

label--magenta

label--sun

label--white

tag (meta chip)

AstroTypeScriptTailwind CSSReact

Buttons

Cards

Project title
A short description of the card content.
Body content goes here, demonstrating the card surface and spacing.
Loading state
Skeletons
spotlight
Cyan radial glow revealed on hover.
A soft cyan highlight fades in across the card surface on hover.
conicBorder
Neon conic-gradient ring on hover.
Hover to reveal the rotating-hue border (kept static for performance).

Alerts

Badges

Default Secondary Outline Destructive

Form fields

Interactive components

Hydrated as one island (client:visible).

Switch

Checkbox

Radio group

Slider

Select

Tooltip

Tabs

Overview content.

Accordion

Radius & spacing

Radius

rounded-sm
rounded-md
rounded-lg
rounded-xl
rounded-2xl
rounded-full

Spacing

1 · 0.25rem
2 · 0.5rem
3 · 0.75rem
4 · 1rem
6 · 1.5rem
8 · 2rem
12 · 3rem

Outrun surfaces

The interactive neon card (cursor spotlight + 3D tilt + accent ring).

glow-card

Cursor spotlight + 3D tilt + accent ring on hover (cyan).

glow-card --accent

Always-on accent ring (magenta).

Motion & indicators

The reusable sun, the focus emblem, and the small animated signals.

Sun · glow
Sun · bars=full

FocusItem

Rotating neon emblem.

progress-dot · pulsing "in progress" signal

term-cursor

infinity-line · neon divider

Navigation

RelatedLinks — the “keep exploring” footer used across pages.

Two items → 2-column grid

Single item → centered