wisp.css

A minimal, monospace-first CSS stylesheet with automatic light/dark mode. See it live on https://wisp.place or https://sites.wisp.place/wisp.place/wisp.css for a demo.

Quick Start

CDN

<link rel="stylesheet" href="https://sites.wisp.place/wisp.place/wisp.css/wisp.css">

Self-hosted

Just copy wisp.css to your project and link to it:

<link rel="stylesheet" href="/wisp.css">

Features

• Automatic dark mode via prefers-color-scheme
• CSS custom properties for easy theming
• JetBrains Mono typography
• Components: cards, buttons, alerts, forms
• Utility classes: spacing, flexbox, text styling
• Responsive with mobile-first breakpoints

CSS Variables

All variables use the --wisp- prefix. Unprefixed aliases are also available for convenience.

Colors

--wisp-bg           /* Main background */
--wisp-bg-alt       /* Alternate background (cards, etc) */
--wisp-text         /* Primary text */
--wisp-text-muted   /* Secondary text */
--wisp-text-subtle  /* Tertiary text */
--wisp-border       /* Strong borders */
--wisp-border-light /* Light borders */
--wisp-accent       /* Accent/link color */
--wisp-cta-bg       /* Button background */
--wisp-cta-text     /* Button text */
--wisp-code-bg      /* Code block background */
--wisp-success      /* Success state */
--wisp-danger       /* Error/danger state */
--wisp-warning      /* Warning state */
--wisp-info         /* Info state */

Customizing

Override variables in your own CSS:

:root {
    --wisp-accent: oklch(0.65 0.20 200); /* Blue accent */
}

Components

Cards

<div class="card">Basic card</div>
<div class="card success">Success card</div>
<div class="card danger">Danger card</div>
<div class="card info">Info card</div>

Buttons

<button>Primary button</button>
<button class="outline">Outline button</button>
<a class="cta-primary" href="#">CTA Primary</a>
<a class="cta-secondary" href="#">CTA Secondary</a>

Alerts

<div class="alert alert-success">Success message</div>
<div class="alert alert-danger">Error message</div>
<div class="alert alert-warning">Warning message</div>
<div class="alert alert-info">Info message</div>

Forms

<label for="email">Email</label>
<input type="email" id="email" placeholder="[email protected]">

Utility Classes

Spacing

• .m-{0-4} - margin
• .mt-{0-6}, .mb-{0-6}, .ml-{0-4}, .mr-{0-4} - directional margin
• .p-{0-6} - padding
• .px-{1-4}, .py-{1-4} - horizontal/vertical padding
• .gap-{1-6} - flex/grid gap

Flexbox

• .flex, .inline-flex
• .flex-col, .flex-wrap
• .items-start, .items-center, .items-end
• .justify-start, .justify-center, .justify-end, .justify-between

Text

• .text-left, .text-center, .text-right
• .text-sm, .text-base, .text-lg, .text-xl
• .font-normal, .font-medium, .font-semibold, .font-bold
• .text-muted, .text-subtle, .text-accent, .text-success, .text-danger

Display

• .hidden, .block, .inline, .inline-block, .flex, .grid
• .hide-mobile - hidden on screens < 768px
• .hide-desktop - hidden on screens >= 769px

Layout

<div class="container">
    <!-- max-width: 900px, centered with padding -->
</div>

<div class="container-wide">
    <!-- max-width: 1100px, centered with padding -->
</div>

License

MIT