01 — Palette
Colors
A warm, heritage-almanac palette: deep forest greens on cream paper, with brown, wheat and sage accents. Click any swatch to copy its hex. The CSS variable name is the source of truth (defined in almanac.css :root).
02 — Typography
Type
Two families: Fraunces (editorial serif) for headings and accents, and Source Sans 3 for body and UI. Base body size is 17.5px / 1.62 line-height.
Building healthy food systems
Four roots of a healthy food system
Healthy Soil
Programs & Resources
It all starts underground. Living soil holds water, stores carbon, and buffers Texas land against drought and flood. We believe healthy food systems start with healthy farms, healthy soil, and informed communities.
03 — Actions
Buttons
Pill buttons. All lift translateY(-2px) on hover (.2s ease) and most deepen
their shadow. Hover each one to feel it. Class names are below each button.
04 — Links
Links & interactive states
Hover each to see the motion: the arrow link slides its arrow, nav links grow a wheat underline, and checkboxes are the brand's selected style.
2px wheat-brown underline animates 0 → 100% width.
Newsletter interest selector — checked state.
05 — Motion
Animation & hovers
All motion uses one easing curve — --ease: cubic-bezier(.22,1,.36,1) — and
everything below is disabled under prefers-reduced-motion.
translateY(-6px) + shadow-lg
06 — Detail
Texture, radius & shadow
The almanac feel comes from a faint paper grain over every surface, botanical line-art motifs, soft radii and layered shadows.
Fixed inline-SVG turbulence over body::before.
Hand-drawn sprigs & soil-strata, used as section accents.
07 — In context
The live homepage
The approved homepage, running below, so you can see every token in real context — header, hero, four-pillar tabs, programs index, event ticket, footer, and all scroll reveals.