Working with Astro components to redesign preview cards (ResolvedPreview.astro) for visual consistency with the hero section, focusing on typography, color variables, and pill-style tags using CSS custom properties.

Issue

The resolved preview cards displayed visual inconsistency with the hero section, using small text-lg titles, gray description text (var(--gray-200)), and rectangular tags with muted colors. This created a disjointed user experience where preview cards appeared as generic elements rather than cohesive portfolio components.

Culprit

The ResolvedPreview.astro component implemented a traditional card layout with:

Title styling at text-lg (too small compared to hero’s bold typography)
Description text using var(--gray-200) instead of the hero’s green accent (var(--ayu-mirage-text))
Rectangular tags with default styling instead of pill-shaped accent elements
Font family mismatch (using brand font instead of body font for descriptions)
No visual hierarchy matching the hero’s clean, bold aesthetic

Solution

Typography Redesign

Updated title styling from text-lg to a compact text-lg/text-xl stack with var(--gray-0) white color and Rubik font. Descriptions switched to var(--font-body) (Public Sans) with inherited 1.2rem sizing and green accent color (var(--ayu-mirage-text)).

Pill-Style Tags

Redesigned tags as accent-colored pills with:

border-radius: 999rem;
background: var(--accent-regular);
font-size: text-sm;
padding: 0.25rem 0.75rem;

Matches hero section’s “LLM Infrastructure Frontend” pill styling.

Layout Consistency

Maintained flex column structure but adjusted spacing:

gap-2 between title and tagline
margin-top: auto for bottom-aligned pills
Removed explicit font sizes to leverage global p styling

File Modified: src/components/ResolvedPreview.astro Result: Preview cards now visually mirror the hero section with consistent typography, color scheme, and pill-shaped tags.