A&G Agricultural Supply

Internal

Design system catalog

The visual source of truth for the A&G design system: every token pairing rendered as real UI, plus the live site chrome.

Foundations

Surface pairings

Cream surface

Stakes cut to spec

Body text on cream — bundled, counted, and loaded in Oakdale.

Muted secondary copy on cream.

Sample link on cream

Wheat surface

Stakes cut to spec

Body text on wheat — bundled, counted, and loaded in Oakdale.

Muted secondary copy on wheat.

Sample link on wheat

White surface

Stakes cut to spec

Body text on white — bundled, counted, and loaded in Oakdale.

Muted secondary copy on white.

Sample link on white

Charcoal surface

Loads priced straight

Body text on charcoal keeps full cream contrast.

Muted on-dark copy on charcoal.

Sample link on charcoal

Forest surface

Loads priced straight

Body text on forest keeps full cream contrast.

Muted on-dark copy on forest.

Sample link on forest

Color tokens

  • --color-bg-primary#f3f0e6 — Page + header
  • --color-bg-wheat#e8e4d6 — Alternate section wash
  • --color-bg-white#ffffff — Cards, forms
  • --color-bg-charcoal#231e1a — Inverse bands, footer
  • --color-text-primary#231e1a — Body, headings on light
  • --color-text-muted#5c564e — Secondary copy
  • --color-text-on-dark#f3f0e6 — Text on charcoal/forest
  • --color-brand-forest#2f5818 — Primary green — buttons, links
  • --color-brand-forest-hover#244414 — Forest hover
  • --color-brand-leaf#8fbf20 — Sparse leaf accent
  • --color-brand-burgundy#4a1c12 — Wordmark accent
  • --color-borderrgba(35,30,26,0.14) — Dividers, inputs
  • --color-border-strongrgba(35,30,26,0.28) — Emphasized rules
  • --color-overlayrgba(35,30,26,0.6) — Mobile nav overlay

Type scale

  • Supporting new growth since 2007

    .heading-hero — Hero H1 · EB Garamond 600 · clamp(38–64px)

  • Supporting new growth since 2007

    .heading-page — Page H1 · EB Garamond 600 · clamp(34–52px)

  • Supporting new growth since 2007

    .heading-xl — Section H2 · EB Garamond 600 · clamp(30–40px)

  • Supporting new growth since 2007

    .heading-lg — Card H3 · EB Garamond 500 · 22–26px

  • Supporting new growth since 2007

    .heading-md — H4 · EB Garamond 500 · 20px

  • Supporting new growth since 2007

    .text-lede — Lede · Source Sans 3 · 18px

  • Supporting new growth since 2007

    .text-body-base — Body · Source Sans 3 · 16px / 1.6

  • Supporting new growth since 2007

    .text-small — Small · Source Sans 3 · 15px

  • Supporting new growth since 2007

    .eyebrow — Eyebrow · 12px · 600 · 0.12em tracking

Spacing, radius, layering & motion

TokenValueUse
--container-max76remContent container
--section-pad-yclamp(3.5rem, 8vw, 6.5rem)Section padding
--radius-sm4pxButtons, inputs
--radius-md6pxCards, panels
--z-header / overlay / drawer / skip40 / 50 / 60 / 70Layering scale
--duration-standard0.3sHover + header transitions
--ease-standardcubic-bezier(0.33, 1, 0.68, 1)Grounded easing

Primitives

Buttons

Eyebrows & accents

Forest eyebrowMuted eyebrowLeaf on dark

Chips, avatar & cards

1″ x 1″ x 4′Tie tape ½″ x 8mm

White card

1px border, 6px radius

Wheat card

Alternate wash

Form fields

Success alert specimen
Error alert specimen

Focus any field to see the 2px forest focus ring with offset — the same ring every interactive element uses.

Brand

A&G dual-tone tree brand markA&G Agricultural Supply

Icon set

  • menu
  • close
  • arrowRight
  • phone
  • mail
  • pin
  • document
  • question
  • news
  • facebook
  • instagram

Category illustrations

Components

Site header

Quote CTA band

Price out your next order

Tell us what you’re planting, staking, or building.

Request a Quote

Site footer