Agreeable Work

Design System

CSS-first Astro components for primary actions, form controls, decorative trims, and small content patterns.

Variants

Shop collection Primary anchor
Secondary button
Learn more Text link

States

Shop collection Default
Shop collection Hover preview
Shop collection Pressed preview
Focus preview
Disabled

Sizes

Shop collection Small
Shop collection Default
Shop collection Large

Dividers

Forms

Text input
Email signup

Step List

  1. Small pixel-style charm belt illustration

    Choose your charms

    This isn't your dad's needlepoint belt.

  2. Small pixel-style printed canvas illustration

    We print & kit it

    Yep, with our 3D printer.

  3. Small pixel-style house and stitching illustration

    You stitch at home

    Or wherever. You do you.

Charm Strip

Needlepoint citrus charm
Needlepoint martini charm
Needlepoint pink sunglasses charm
Needlepoint color-block door charm
Needlepoint gold key charm
Round needlepoint multicolor charm

Future Astro Import

Future package paths will let you import the stylesheet once, then use the Astro wrapper where component ergonomics help. Plain HTML can also use the emitted classes directly. 

---
import Button from "@agreeable-work/design-system/src/components/Button.astro";
import TrimDivider from "@agreeable-work/design-system/src/components/TrimDivider.astro";
import TextInput from "@agreeable-work/design-system/src/components/TextInput.astro";
import EmailSignup from "@agreeable-work/design-system/src/components/EmailSignup.astro";
import StepList from "@agreeable-work/design-system/src/components/StepList.astro";
import CharmStrip from "@agreeable-work/design-system/src/components/CharmStrip.astro";
import "@agreeable-work/design-system/src/styles/agreeable-work.css";
---