Design System

Design tokens and components for ekel.dev

Colors

Semantic tokens via CSS custom properties. Each token has a light and dark value defined in theme.css.

Background

bg-background

Foreground

text-foreground

Card

bg-card

Muted

bg-muted

Muted Foreground

text-muted-foreground

Border

border-border

Light: :root { --background: oklch(0.97 0 0); --foreground: oklch(0.175 0 0); ... }

Dark: .dark { --background: oklch(0.175 0 0); --foreground: oklch(0.97 0 0); ... }

Typography

Geist Sans for body and headings. Geist Mono for code. Noto Naskh Arabic for arabic text.

H1 text-3xl sm:text-4xl tracking-tighter font-medium text-foreground

Page heading

H2 text-2xl sm:text-3xl tracking-tight font-medium text-foreground

Section heading

H3 text-xl font-medium tracking-tight text-foreground

Card title

Body text-base leading-7 text-foreground

Body text uses generous line height for readability. Secondary information uses muted foreground.

Code font-mono text-sm bg-muted px-1.5 py-0.5

const design = "minimal";

Spacing

Responsive spacing tokens across breakpoints.

Usage	Mobile	Desktop
Page header margin	`mb-10`	`sm:mb-16`
Section gap	`mt-16`	`sm:mt-24`
Section heading margin	`mb-6`	`sm:mb-8`
Container top padding	`pt-24`	`pt-24`
Card padding	`p-5`	`p-8`
Grid gap	`gap-6`	`gap-6`

Cards

Flat, no shadow. Subtle border that darkens on hover.

Card Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

#design #system

rounded-none border border-border/40 bg-transparent p-8
hover:border-border/80 transition-colors

Navbar

Fixed top bar. Text links on desktop, bottom sheet on mobile.

Inactive Active

text-sm font-medium no-underline transition-colors
Active: text-foreground
Inactive: text-muted-foreground hover:text-foreground

Links

Always underlined with subtle decoration. External links get an auto-appended arrow via CSS.

Internal link

External link

text-foreground underline decoration-border/30 underline-offset-2 font-medium
External: a[target="_blank"]::after { content: " \2197"; }

Page Structure

Template for creating new pages.

<Layout title="Page" description="...">
  <div class="w-full ...">
    <section class="mb-10 sm:mb-16">
      <h1 class="text-3xl sm:text-4xl tracking-tighter
                 font-medium text-foreground">
        Page Title
      </h1>
      <p class="text-lg sm:text-xl text-muted-foreground">
        Description
      </p>
    </section>
    <!-- Content sections: mt-16 sm:mt-24 -->
  </div>
</Layout>

Grid Background

Desktop column grid with dashed lines at 25, 50, and 75 percent positions.

// Layout.astro
<div class="hidden md:block fixed inset-0 pointer-events-none z-0">
  <div class="mx-auto max-w-6xl h-full relative">
    // Container edge borders
    <div class="absolute inset-0 border-x border-border/30"></div>
    // Column dividers at 25%, 50%, 75%
    <div class="absolute left-1/4 top-0 bottom-0
      border-l border-dashed border-border/30"
      style="border-left-width: 0.5px"></div>
    // ... repeat for 1/2 and 3/4
  </div>
</div>