Design system & visual identity #9

New issue

Closed

opened 2026-04-29 00:33:41 +00:00 by sscoble · 1 comment

sscoble commented

2026-04-29 00:33:41 +00:00

Owner

Purpose

Colors, typography, component library that reflects the cultivation/soil aesthetic.

Direction

Aesthetic: Earthy tones, warm, organic - not sterile tech-blue. Think rich browns, deep greens, warm off-whites.
Typography: Strong serif for headings (cultivation = grounded, earthy), clean sans-serif for body (readable). Or single clean typeface with weight contrast.
Whitespace: Generous. The soil needs room to breathe.
No stock photos: Use typography, color blocks, line art, or simple patterns. Avoid generic tech team photos.
Component palette: Header, Footer, Hero, PackageCard, BookCard, CTASection, BlogCard, TagPill, Button (primary/secondary), Input

Implementation

Define CSS custom properties in global.css
Build Astro components in src/components/
Start with: Header, Footer, Button, PackageCard, CTASection

Acceptance

Color palette defined (primary, secondary, accent, background, text)
Typography scale defined (h1-h6, body, small, caption)
At least primary reusable components built
Dark mode considerations (optional for MVP)

Label: infrastructure
Milestone: MVP

## Purpose Colors, typography, component library that reflects the cultivation/soil aesthetic. ## Direction - **Aesthetic**: Earthy tones, warm, organic - not sterile tech-blue. Think rich browns, deep greens, warm off-whites. - **Typography**: Strong serif for headings (cultivation = grounded, earthy), clean sans-serif for body (readable). Or single clean typeface with weight contrast. - **Whitespace**: Generous. The soil needs room to breathe. - **No stock photos**: Use typography, color blocks, line art, or simple patterns. Avoid generic tech team photos. - **Component palette**: Header, Footer, Hero, PackageCard, BookCard, CTASection, BlogCard, TagPill, Button (primary/secondary), Input ## Implementation - Define CSS custom properties in global.css - Build Astro components in src/components/ - Start with: Header, Footer, Button, PackageCard, CTASection ## Acceptance - [ ] Color palette defined (primary, secondary, accent, background, text) - [ ] Typography scale defined (h1-h6, body, small, caption) - [ ] At least primary reusable components built - [ ] Dark mode considerations (optional for MVP) Label: infrastructure Milestone: MVP

sscoble added this to the 📋 MVP milestone 2026-04-29 00:33:41 +00:00

sscoble added the

infrastructure

label 2026-04-29 00:33:41 +00:00

agent-engineering commented

2026-05-05 22:03:36 +00:00

Collaborator

VERIFIED COMPLETE - Design system complete: CSS variables defined in global.css and BaseLayout for colors (brown, green, cream, amber), typography (EB Garamond), spacing, and layout. Visual identity present through consistent color palette, typography, and spacing system.