Sedge

A balance of personality and precision.

A persistent route home from anywhere in the garden.

Its silhouette, placement, and motion stay consistent, while its resting and hover colors can adapt to the personality of each page.

import HomeLogo from "@/components/ui/HomeLogo";

<HomeLogo
  colors={{
    base: "var(--cherry-bold)",
    hoverAccent: "var(--moss-soft)",
  }}
/>

{/* Optional: give individual petals their own resting colors. */}
<HomeLogo
  colors={{
    northeast: "var(--periwinkle-soft)",
    southeast: "var(--moss-soft)",
    southwest: "var(--cherry-soft)",
    northwest: "var(--lemon-bold)",
    hoverAccent: "var(--iris-bold)",
  }}
/>

These are the colors that make me happy.

One typeface across the whole system.

After auditioning more fonts than strictly necessary, I landed on Inter, used mostly at regular weight. Hierarchy comes from size and spacing rather than boldness. Big type gets tighter, small labels get airier, and each role has its own token so every page uses type the same way.

/* foundations/typography.css — one class per role */
<h1 className="type-title">Bookshelf</h1>
<h2 className="type-section">Colors</h2>
<p className="type-lede">These are the colors that make me happy.</p>
<h3 className="type-heading">Playful, with purpose</h3>
<h4 className="type-subheading">Parent div</h4>
<p className="type-body">Body copy</p>
<p className="type-supporting">A small explanation</p>
<span className="type-label">Usage</span>
<span className="type-meta">Oct 3, 2026 · 5 min read</span>
<span className="type-note-label">Contents</span>
<p className="type-note">A small italic aside</p>
<code className="inline-code">border-radius</code>

Simple, friendly icons from Lucide.

Lucide keeps things consistent without asking me to draw hundreds of tiny pictures. Icons inherit the color around them and use three shared sizes to stay aligned across labels, buttons, and controls.

import { BookOpen } from "lucide-react";

{/* Decorative or paired with visible text */}
<BookOpen className="icon-md" aria-hidden="true" />

{/* Icon-only control */}
<button aria-label="Open library">
  <BookOpen className="icon-md" aria-hidden="true" />
</button>

Quiet spacing makes everything feel intentional.

Five everyday steps (8–32px) handle almost everything inside components. The larger steps are saved for layout, like the top and end of a page, the gap beside a rail, and the air above a subheading.

One frame, two shapes.

Every page sits in the same frame, and almost every page uses one of two shapes inside it. The page shell sets the outer width and gutters. Inside, a full-width header comes first, then either a sticky rail beside a main column or a sidebar beside content. Measures keep text at a comfortable reading width.

Square by default, with a soft side.

Shape works in two layers: a small corner-radius scale for the few functional moments that need softening, and a set of custom accent shapes that add character where structure matters less.

import Shape from "@/components/ui/Shape";

// Decorative only — not a button, not clickable. Color follows
// currentColor, same as lucide-react icons.
<Shape variant="arch" className="h-16 w-16" style={{ color: "var(--lemon-bold)" }} />

Flat by default. Shadows are for things that float.

On the page, rules, color, and space do the separating, so cards, covers, and buttons sit flat. The drawer is the one surface with a shadow, because it slides over the page. Modals float too, but a dimmed backdrop does that job instead.

Personality in motion.

It shows what changed and makes interactions feel responsive. Fast transitions handle lightweight interactions like hover states. Slower, more expressive motion is saved for larger changes, while shared durations and easing curves keep everything feeling related. When someone prefers less movement, the system quiets itself automatically.

<div data-cursor-native>
  {/* Use the native cursor throughout this region. */}
</div>

Still learning, and building it in as I go.

I’m building what I learn into Sedge as it grows, so its more playful ideas can work for more people. These foundations are a starting point.

Soft corners for the everyday, pill shapes for emphasis.

By default, buttons inherit the page accent and use one of three roles, without separate colors for danger or success. Primary and secondary buttons don’t add a pressed style: hover already signals interactivity, and the interface responds immediately after a click, making another visual state unnecessary. Quiet buttons and links have no fill to shift, so they dim briefly when pressed. Every part of a button can also be customized when the default system isn’t the right fit.

import Button from "@/components/ui/Button";

// Color comes from the page — no color props needed.
<Button>View all books</Button>                                // primary (default): outline + dot
<Button startIcon={<ChartColumn />}>Reading stats</Button>      // icon replaces the dot
<Button variant="secondary" startIcon={<Copy />}>Copy token</Button>
<Button variant="quiet">Show all</Button>

// A standalone call to action gets the pill.
<Button variant="secondary" shape="pill" size="lg" endIcon={<ArrowRight />}>
  Explore the system
</Button>

// One-off color: the hue's bold for the dot and icons, its soft for
// the secondary background.
<Button tone="pink-bold">Replay all</Button>
<Button variant="secondary" tone="pink">Copy token</Button>

// Full control: palette names or any CSS color. Here bold teal that
// flips to soft teal on hover.
<Button
  variant="secondary"
  tone={{ bg: "teal-bold", text: "teal-soft", icon: "teal-soft", hoverBg: "teal-soft", hoverText: "teal-bold" }}
  startIcon={<Sprout />}
>
  …
</Button>

// Set a page's accent once, on its wrapper:
.my-page {
  --page-accent: var(--cherry-bold);   /* bold fill, icons */
  --page-accent-tint: color-mix(in srgb, var(--cherry-bold) 12%, var(--cream));
  --page-accent-ink: var(--cream);      /* text on the bold fill */
}

The underline carries the color.

Links keep the voice of the text around them. Link text stays charcoal and regular weight, and a 1.5px underline carries the color, thickening on hover. Quieter links use a dotted line that turns solid. Semantic anchors, visible focus, visited states, and external-link announcements keep the pattern useful beyond its appearance. It remains opt-in so navigation and other complex links can keep their own behavior.

// TextLink: internal links use next/link; http(s) links open in a
// new tab and announce it
<TextLink href="/books">book club picks</TextLink>
<TextLink href="https://getbem.com/naming/" tone="sky-bold">BEM</TextLink>
<TextLink href="https://books.google.com" variant="quiet">Google Books</TextLink>

// Standalone, with an arrow (classes directly)
<a className="text-link text-link--standalone focus-ring" href="/books">
  Browse all books
  <ArrowRight className="text-link-icon" aria-hidden="true" />
</a>

Code blocks match their section color.

One charcoal block with 4px corners and a copy button, used for every snippet on the site. Inside a post section, the code text takes the soft version of that section’s color, so each block matches the heading and markers around it. Outside a section it falls back to iris soft, and a tone prop picks any color by hand. The darkest soft colors (cherry, emerald and cocoa) are lightened automatically so they stay readable. Comments are always cream, whatever the tone, so they stand apart from the code around them.

.circle__outer {
  width: 180px;
  border-radius: 50%;
}

.circle__outer {
  width: 180px;
  border-radius: 50%;
}

.circle__outer {
  width: 180px;
  border-radius: 50%;
}

.circle__outer {
  width: 180px;
  border-radius: 50%;
}

.circle__outer {
  width: 180px;
  border-radius: 50%;
}

import CodeBlock from "@/components/ui/CodeBlock";

// Inside a PostSection: text takes the section's soft color
<CodeBlock code={`.circle { border-radius: 50%; }`} />

// Pick a hue yourself. It always uses the soft version.
<CodeBlock code={…} tone="marigold" />

// No copy button
<CodeBlock code={…} copyable={false} />

// Code inside a sentence uses inline code instead
<p>Set <code>border-radius</code> to 50%.</p>

Subtle emphasis without interrupting the flow.

I use them in posts for a side note, reminder, related idea, or small update. They stay plain on purpose, with a cream surface, a hairline border, 4px corners, and a short spaced-caps label. The only color is the small marker beside the label, which follows the page accent unless you pass in a tone. Under the hood a callout is an aside, so screen readers know it sits outside the main story. Its label is decorative rather than a heading, it takes an optional action link, and it stays narrow at 40rem so it reads like a note in the margin.

import Callout from "@/components/ui/Callout";

<Callout
  eyebrow="Worth a detour"
  actionLabel="Keep wandering"
  actionHref="/garden"
>
  Helpful extra context, without interrupting the main idea.
</Callout>

// The marker follows the page accent. Pass a tone to change it.
<Callout eyebrow="Good to know" tone="green">…</Callout>

A simple surface for a title and a few lines.

Cards group a short title and supporting copy into one self-contained surface. They look like callouts, with a cream surface, a hairline border, 4px corners, and a spaced-caps title whose marker follows the page accent or a tone you pass in. The difference is what they are. A card is part of the content, one item in a set that sits next to others. Its title is a real heading, so it shows up in the page outline, and the card stretches to fill whatever grid it’s placed in. Callouts are for asides, and cards are for things that belong to the page.

import Card, { CardBody, CardTitle } from "@/components/ui/Card";

<Card>
  <CardTitle>Color</CardTitle>
  <CardBody>An expansive, intentional palette for a more expressive web.</CardBody>
</Card>

// The marker follows the page accent. Pass a tone to change it.
<Card tone="green">…</Card>

Two dialogs for two jobs.

A small centered modal handles short moments, and a side drawer holds longer content. Both share the same voice, with cream, charcoal text, a hairline edge, the page-accent marker, and a light charcoal backdrop with no shadows. The modal is a notecard with 4px corners, a spaced-caps label, a modest title, and a plain × in the corner. The drawer slides in from the right like a page margin and keeps a big title for content worth settling into. Both are built on the native dialog element, so focus is trapped, Escape closes them, and so does clicking the backdrop.

import Modal from "@/components/ui/Modal";

const [open, setOpen] = useState(false);

<Button onClick={() => setOpen(true)}>About this page</Button>

<Modal
  open={open}
  onClose={() => setOpen(false)}
  eyebrow="About this page"
  title="Made with CSS"
  tone="green"
  actions={<Button onClick={() => setOpen(false)}>Got it</Button>}
>
  <p>Hover over the knick-knacks for some mini surprises.</p>
</Modal>

import Drawer from "@/components/ui/Drawer";

<Drawer
  open={open}
  onClose={() => setOpen(false)}
  eyebrow="Reading stats"
  title="By the numbers"
  tone="green"
>
  <dl className="drawer-list">
    <div><dt>Books</dt><dd>18</dd></div>
  </dl>
</Drawer>

Answers, revealed as needed.

A single-open FAQ pattern that groups questions without the visual weight of separate cards. It sits directly on the cream page with no container. Hairline rules frame and separate the rows, and a thin plus/minus opens each one. Each question number gets a bold marker and each answer a soft one, the same shape as callout and card labels. They follow the color of the section the accordion sits in, falling back to the page accent, or you can pass in a tone.

import Accordion from "@/components/ui/Accordion";

const items = [
  { question: "What's your favorite animal?", answer: "A unicorn!" },
  { question: "What's your favorite food?", answer: "A bao bun!" },
];

// Markers follow the section color: bold for questions, soft for answers
<Accordion items={items} />

// Or pick a hue yourself
<Accordion items={items} tone="pink" />

Labels for quick context.

Badges are compact labels for topics, categories, and garden metadata. Each pairs a small marker with charcoal text. The marker uses the page accent by default, but can take on any palette color when labels need to be distinguished, like the genre tags on the bookshelf page.

import Badge from "@/components/ui/Badge";

<Badge>Field note</Badge>
<Badge tone="emerald-bold">Literary Fiction</Badge>

Add context without clutter.

They share the callout and badge anatomy: a hairline border, 4px corners, and a small marker before the label. Plain tooltips are cream with a page-accent marker. Tinted ones use the soft page tint behind the same marker, which on Sedge is soft sky with dark cherry. For anything else, pass your own background, marker, and text colors from the palette.

import { CircleHelp } from "lucide-react";
import Tooltip from "@/components/ui/Tooltip";

// Plain (default): cream box, page-accent marker
<Tooltip label="Counts finished books only">
  <span className="label-with-info">
    Reading goal
    <CircleHelp aria-hidden="true" />
  </span>
</Tooltip>

// Tinted: soft page tint + page accent
<Tooltip label="The Left Hand of Darkness — Ursula K. Le Guin" variant="tinted">
  <span className="truncated-title">The Left Hand of Darkness…</span>
</Tooltip>

// Make your own: any palette colors
<Tooltip
  label="Every book I’ve rated five stars"
  tone={{ background: "pink-soft", marker: "emerald-bold", text: "charcoal" }}
>
  <span>Favorites</span>
</Tooltip>

Forms should feel clear and familiar.

Fields are drawn as ruled lines rather than boxes, like writing on a ruled page; the textarea becomes a few lines of ruled paper. Labels use spaced caps. Focus thickens the line to 2px in the page accent, and checked radios and checkboxes use the same accent. Red is reserved for errors, shown on the line and in a message with the small marker.

import { FormField, FieldLabel, FieldError } from "@/components/ui/FormField";
import Input from "@/components/ui/Input";
import Select from "@/components/ui/Select";
import Checkbox from "@/components/ui/Checkbox";
import Radio from "@/components/ui/Radio";

<FormField>
  <FieldLabel htmlFor="email">Email</FieldLabel>
  <Input id="email" type="email" placeholder="you@example.com" />
</FormField>

<FormField>
  <FieldLabel htmlFor="site">Your website</FieldLabel>
  <Input id="site" error defaultValue="annapawl" />
  <FieldError>That doesn’t look like a web address yet.</FieldError>
</FormField>

<FormField>
  <FieldLabel htmlFor="role">Role</FieldLabel>
  <Select id="role">
    <option>Designer</option>
    <option>Engineer</option>
  </Select>
</FormField>

<Checkbox id="terms" label="I agree to the terms" />
<Radio name="plan" id="plan-free" label="Free" />

Invisible layout scaffolding.

It has no border, radius, or background. It keeps content centered inside a shared maximum width, adds responsive side gutters, and provides equal spacing at the top and bottom of the page.

import PageShell from "@/components/layout/PageShell";

export default function BooksPage() {
  return (
    <main>
      <PageShell>
        {/* Page content */}
      </PageShell>
    </main>
  );
}

The header every page shares.

Articles get it through Post Layout, along with the contents rail and reading column. Pages that aren’t articles, like Bookshelf and Fiber Arts, use the page header on its own and build their own layout underneath. Every part except the title is optional, so the same header works for a dated post or an ongoing collection.

// An article: PostLayout includes the header
<PostLayout
  eyebrow="Creative Coding"
  title="Drawing with Code"
  publishedDate="Oct 3, 2026"
  readingTime="8 min read"
  postTags="CSS, Illustration"
  contents={[…]}
>
  <PostSection …>…</PostSection>
</PostLayout>

// A collection page: the header on its own, your layout below
<PageShell>
  <PageHeader
    utilityStart={<HomeLogo … />}
    descriptionTitle="Reading archive"
    description="Book club picks, Little Library finds…"
    eyebrow="Digital garden"
    title="Bookshelf"
    accent="var(--blue-bold)"
    lede={<>A running list of everything I’ve read lately…</>}
    detailsStart="Ongoing collection · Since Jan 2026"
    postTags={<StatsButton />}
  />
  <BookshelfBrowser … />
</PageShell>

The complete structure for long-form posts.

Post Layout brings the header, publishing details, contents rail, reading column, and footer into one repeatable structure. Each section sets one color that flows through its navigation marker, heading, subheadings, and code blocks—change it once and the whole section follows. Every post ends with a Back to top link and can point readers toward what comes next.

<PostLayout
  utilityStart={<HomeLogo colors={…} size="1.75rem" />}
  descriptionTitle="CSS Art"
  description="An introduction to drawing with code…"
  shortDescription="How I draw little illustrations with nothing but HTML and CSS."
  eyebrow="Creative Coding"
  title="Drawing with Code"
  publishedDate="Updated Oct 2026"
  readingTime="10 min read"
  postTags="CSS, Illustration, Creative Coding"
  accent="var(--red-bold)"
  next={{ href: "/css-shapes", label: "CSS Shapes" }}
  contents={[
    { id: "what-is-drawing-with-code", label: "What is drawing with code?", tone: "red-bold" },
    { id: "the-div", label: "It’s all about the <div>", tone: "sky-bold" },
    …
  ]}
>
  <PostSection id="the-div" title="It’s all about the <div>">
    <p>Post copy...</p>

    {/* Subsections take the section's color. "label" (default) is a small
        heading with a marker; "code" keeps code headings lowercase + mono. */}
    <PostSubsection title="Parent <div>">
      <p>Every CSS composition starts with a parent div.</p>
    </PostSubsection>
    <PostSubsection title="border-radius" variant="code">
      <p>This rounds your element’s corners.</p>
    </PostSubsection>
  </PostSection>
</PostLayout>

How readers find their way around a long page.

Long pages get the same few wayfinding tools, and each one uses the colored markers of the sections it points to. Posts get all of them automatically from Post Layout, and this design system uses the same mobile bar with its group colors.

// Posts: all of it comes from PostLayout.
<PostLayout
  contents={[{ id: "the-div", label: "It’s all about the <div>", tone: "sky-bold" }, …]}
  next={{ href: "/css-shapes", label: "CSS Shapes" }}
>
  <PostSection id="the-div" …>…</PostSection>
</PostLayout>

// Breadcrumbs: an ordered list of TextLinks inside a labeled nav.
<nav aria-label="Breadcrumb">
  <ol className="link-breadcrumbs">
    <li><TextLink href="/">Home</TextLink></li>
    <li className="link-breadcrumb-separator" aria-hidden="true">/</li>
    <li><span className="link-breadcrumb-current" aria-current="page">Links</span></li>
  </ol>
</nav>

The same footer closes every page.

A woven strip of palette colors marks the end of the page, followed by the colophon: where else to find me, how to get in touch, and what the site is built with. Its markers and link hovers take the page accent, so it matches whichever page it ends.

import SiteFooter from "@/components/layout/SiteFooter/SiteFooter";

// Posts get it automatically from PostLayout (footer={false} to hide it).
// Anywhere else, add it at the end of the page:
<SiteFooter />

// Markers and link hovers follow the page accent, or pass one in:
<SiteFooter accent="var(--coral-bold)" />