aragrp/docs/design-system/footer.md

Footer

Canonical footer: components/footer.tsx (FooterSection).

Structure

1. Newsletter band — headline + short copy + email form.
2. Link columns — site maps (pages, services, contact, legal).
3. Brand / social / legal meta — logo mark, social icon buttons, copyright.

Layout

<footer className={cn("section-shell bg-section-muted", layout.sectionY)}>
  <div className="section-decor" aria-hidden>…</div>
  <Container className="section-content">
    {/* newsletter */}
    {/* link grid */}
    {/* bottom bar */}
  </Container>
</footer>

Region	Grid / spacing
Newsletter	grid-cols-1 lg:grid-cols-2 gap-10, bottom border, mb-14 pb-14
Links	grid-cols-2 sm:grid-cols-4 gap-x-6 gap-y-10, py-10 lg:py-16
Column titles	type.h4 + mb-5
Links	type.link + space-y-4

Form

• Input height aligned to Button size="lg" via h-[var(--btn-height-lg)].
• Stack vertically on mobile (flex-col), horizontal from sm.

Social icons

• Use Button variant="ghost" size="icon" with accessible aria-label.
• Icons from lucide-react.

Visual

• Background: bg-section-muted (not a hard gray box).
• Optional top wash gradient in .section-decor using primary at ≤ 4% opacity.
• Borders: semantic border-border.

Rules

1. Stay on the shared Container—footer columns must align with header/content.
2. Do not introduce a second footer component for marketing pages.
3. Keep link lists scannable; avoid paragraph walls.
4. Dark mode comes from tokens automatically.

Related

• sections.md
• forms.md
• icons.md