v0.1.0

endark

A monochrome, dark-only CSS library. Glassmorphism meets terminal-editorial aesthetic. Zero dependencies. No build step. One file.

Get Started Browse Components

Installation

Add the Inter font and link endark.css. That's it.

<!-- 1. Add Inter font -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
      rel="stylesheet" />

<!-- 2. Add endark -->
<link rel="stylesheet" href="endark.css" />

# Download the single CSS file
curl -O https://raw.githubusercontent.com/kashifulhaque/endark/main/endark.css

# Then link it in your HTML
<link rel="stylesheet" href="endark.css" />

~6 KB gzipped. No JavaScript. No build tools. Works with any framework or plain HTML.

Color Palette

Strictly monochrome. Grays are the only colors allowed. Two semantic exceptions for status badges.

#000

950

900

800

700

600

500

400

300

200

100

#fff

success

error

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<!-- ...through h6 -->

Gradient Title

Section Label

Default body text

Muted text

Faint text

<p class="ed-title ed-text-gradient">Gradient Title</p>
<p class="ed-section-label">Section Label</p>
<p class="ed-text-muted">Muted text</p>
<p class="ed-text-faint">Faint text</p>

Glass Cards

Glass Card

Hover to see the subtle background shift and border glow.

Another Card

12px backdrop blur. Works in all modern browsers.

<div class="ed-glass-card">
  <h4>Card Title</h4>
  <p>Card content...</p>
</div>

Form Inputs

<input type="text" class="ed-glass-input" placeholder="Type..." />
<textarea class="ed-glass-input"></textarea>
<select class="ed-glass-input">
  <option>Pick one</option>
</select>

Buttons

<button class="ed-glass-btn">Glass Button</button>
<button class="ed-btn-primary">Primary Button</button>

Badges

default accepted rejected glass badge

<span class="ed-badge">default</span>
<span class="ed-badge ed-badge--success">accepted</span>
<span class="ed-badge ed-badge--error">rejected</span>
<span class="ed-glass-badge">glass badge</span>

Topbar

Brand

<header class="ed-topbar">
  <a href="/" class="ed-topbar-logo">Brand</a>
  <nav class="ed-topbar-nav">
    <a href="/work" class="ed-topbar-link">Work</a>
    <a href="/projects" class="ed-topbar-link active">Projects</a>
  </nav>
</header>

List Items

Building a Monochrome Design System

Why constraints breed creativity in UI design.

Feb 20265 min read

Glassmorphism Done Right

Subtle effects that enhance without distracting.

Jan 20263 min read

CSS Custom Properties at Scale

Design tokens that compose cleanly across projects.

Dec 20258 min read

<a href="/post" class="ed-list-item">
  <div class="ed-list-item-title">Post Title</div>
  <div class="ed-list-item-description">Summary.</div>
  <div class="ed-list-item-meta">
    <span>Feb 2026</span><span>5 min</span>
  </div>
</a>

Stat Cards

142

Problems Solved

Projects

3.8k

Commits

99%

Uptime

<div class="ed-stat-grid">
  <div class="ed-stat-card">
    <div class="ed-stat-value">142</div>
    <div class="ed-stat-label">Solved</div>
  </div>
</div>

Page Header

<div class="ed-page-header">
  <h1 class="ed-title">Page Title</h1>
  <p class="ed-subtitle">Description</p>
</div>

Loading States

Skeleton

Spinners

<!-- Skeleton -->
<div class="ed-skeleton-card">
  <div class="ed-skeleton ed-skeleton--w-50" style="height:1rem"></div>
  <div class="ed-skeleton-text ed-skeleton--w-full"></div>
  <div class="ed-skeleton-text ed-skeleton--w-75"></div>
</div>

<!-- Spinner -->
<div class="ed-spinner"></div>
<div class="ed-spinner ed-spinner--lg"></div>

Prose

Long-form content

The .ed-prose class styles paragraphs, links, lists, blockquotes, code blocks, and tables automatically — no extra classes needed inside.

Simplicity is the ultimate sophistication.

Monochrome palette only
Dark by default
Glass effects for depth

:root {
  --ed-color-bg: var(--ed-black);
  --ed-color-heading: var(--ed-white);
}

<div class="ed-prose">
  <h3>Title</h3>
  <p>Paragraph with <a href="#">link</a>.</p>
  <blockquote>A quote.</blockquote>
  <pre><code>const x = 42;</code></pre>
</div>

Animations

Staggered Entry

First

Second

Third

Fourth

<!-- Staggered fade-up -->
<div class="ed-animate-fade-up ed-stagger" style="--ed-delay: 0ms">1</div>
<div class="ed-animate-fade-up ed-stagger" style="--ed-delay: 100ms">2</div>
<div class="ed-animate-fade-up ed-stagger" style="--ed-delay: 200ms">3</div>

<!-- Other animations -->
<div class="ed-animate-fade-in">...</div>
<div class="ed-animate-slide-in">...</div>
<div class="ed-animate-slide-down">...</div>

Customization

Override any --ed-* variable on :root to customize the theme:

:root {
  /* swap the background */
  --ed-color-bg: #0a0a0a;

  /* rounder corners */
  --ed-radius-lg: 16px;

  /* different font */
  --ed-font-sans: "IBM Plex Sans", sans-serif;
}