Design System

Foundations

Color and typography

Use semantic tokens so light and dark themes stay equivalent. Indigo anchors actions; info, success, warning, and destructive roles communicate status consistently.

Rhythm

Spacing and measure

Keep local groups compact and make section changes unmistakable. Responsive spacing should preserve hierarchy rather than merely shrink it.

• Page header to content mt-10 / sm:mt-16 Use the smaller gap when the next section continues the introduction.
• Major sections mt-16 / sm:mt-24 A major topic change needs more space than an internal group.
• Editorial rows py-6 to py-10 Scale with content density; use cards when grouping discrete items.
• Reading measure max-w-2xl / max-w-3xl Keep prose readable even when the route shell is wider.

Pattern 01

Page headers

Public indexes and utilities start with an eyebrow, one clear h1, and a concise description. Use PageHeader.astro instead of rebuilding this hierarchy per route.

Pattern 02

Editorial rows

Use ruled rows for works, notes, guestbook entries, experience highlights, and other scan-heavy collections. Keep metadata leading, content central, and the action trailing.

Pattern 03

Structured content

When labels matter as much as values, use a description list or a numbered section grid. This keeps utility pages readable without forcing their content into cards.

Label

A concise value with enough room to wrap naturally.

Another label

Related content follows the same alignment edge.

Pattern 04

Long-form content

Notes, works, and experience stories keep their authored reading flow. Constrain line length when a table of contents shares the desktop canvas, but do not convert prose into dashboard sections.

• Use semantic article, heading order, and meaningful link text.
• Keep code blocks, images, and videos inside the prose flow.
• Offer a desktop table of contents and a keyboard-accessible mobile sheet when headings justify it.

Pattern 05

Media and data

Galleries and charts retain the structure their content needs. Bring them into the system through rounded surfaces, semantic color, readable metadata, and restrained interaction.

Quality

Responsive behavior

Mobile keeps the same reading order and hierarchy. Columns collapse only when their content no longer fits, and text never depends on a fixed height.

Quality

Accessibility

Accessibility is part of the component contract, not a finishing pass.

• 01 Use one h1, ordered headings, semantic landmarks, and descriptive links.
• 02 Keep controls keyboard reachable with visible focus and an accessible name.
• 03 Preserve contrast in both themes and never communicate meaning through color alone.
• 04 Respect reduced motion and restore focus when dialogs or sheets close.

Implementation

Page template

Start with the shared shell and header. Choose a content pattern based on the information—not because another route happens to use it.

<Layout title="Page" description="..." url="https://ekel.dev/page">
  <div class="mx-auto w-full">
    <PageHeader title="Page" eyebrow="Section label">
      A concise description of this page.
    </PageHeader>

    <section class="mt-10 w-full sm:mt-16">
      <!-- Use editorial rows, structured data, prose, media, or data UI. -->
    </section>
  </div>
</Layout>