viscss — terminal
 ██╗   ██╗ ██╗ ███████╗  ██████╗ ███████╗ ███████╗
 ██║   ██║ ██║ ██╔════╝ ██╔════╝ ██╔════╝ ██╔════╝
 ██║   ██║ ██║ ███████╗ ██║      ███████╗ ███████╗
 ╚██╗ ██╔╝ ██║ ╚════██║ ██║      ╚════██║ ╚════██║
  ╚████╔╝  ██║ ███████║ ╚██████╗ ███████║ ███████║
   ╚═══╝   ╚═╝ ╚══════╝  ╚═════╝ ╚══════╝ ╚══════╝
v0.1.0 pre-release
>
> <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viskem/viscss@v0.1.0/vis.css"> copy
SCROLL

Design Principles

01

Dark First

Not a dark mode toggle. Dark is the only mode. Designed from ground zero for low-light environments and focused work.

02

Monospace Native

JetBrains Mono as the foundation. Every spacing decision, every alignment, built for fixed-width typography.

03

Terminal Aesthetic

The beauty of the command line — restrained, information-dense, quietly powerful. No rounded corners, no gradients, no noise.

04

Zero Dependencies

One CSS file. No build step. No JavaScript required. Drop it in and everything works.

05

Effects Optional

CRT scanlines, signal noise, neon glow — all available in vis-effects.css, all completely optional.

06

Variable Everything

CSS custom properties for colors, spacing, typography. Override :root and the entire theme reshapes.

Get Started

One line. No build tools, no config files, no package managers required.

CDN (jsDelivr) — recommended
<!-- Core framework -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viskem/viscss@v0.1.0/vis.css">

<!-- Optional: Visual effects (CRT, noise, glow, reveal animations) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/viskem/viscss@v0.1.0/vis-effects.css">
<script src="https://cdn.jsdelivr.net/gh/viskem/viscss@v0.1.0/vis-effects.js"></script>
Direct link (viscss.com)
<link rel="stylesheet" href="https://www.viscss.com/vis.css">

Built-in Components

Production-ready UI components. Every element respects the dark terminal aesthetic.

Buttons

Forms

Status Tags

Active Planning Completed Paused Pending

Cards

project-box
Default container with subtle border and surface background.

Typography

Heading Text
Body text in the default color.
Muted secondary information.
Accent cyan for highlights.

Color System

red
yellow
cyan
blue
warning

Visual Effects System

Optional atmosphere layer. CRT scanlines, signal noise, neon glow, reveal animations, and more. All controlled via CSS variables.

CRT Scanlines

.vfx-crt

toggle via panel ↘

Signal Noise

.vfx-noise

toggle via panel ↘

Neon Glow

.vfx-glow

VISCSS

Grid: Circuit

.vfx-grid-circuit

Grid: Blueprint

.vfx-grid-blueprint

Grid: Matrix

.vfx-grid-matrix

Grid: Ledger

.vfx-grid-ledger

Gradient Text

.vfx-text-gradient

FLOWING COLORS

Dividers

.vfx-divider-*



Effect Presets

One class on <html> to set the mood.

.vfx-preset-deep-space
Starfield + subtle aura + gentle reveals. Quiet, deep, contemplative.
.vfx-preset-retro-terminal
CRT scanlines + phosphor green + analog noise. 1980s control room.
.vfx-preset-cyberpunk
Chromatic aberration + neon glow + circuit grid. Maximum intensity.
.vfx-preset-minimal
Micro-interactions only. Clean, focused, zero distraction.

CSS Variables

Override :root to reshape the entire framework.

VariableDefaultPurpose
--bg-base#181818Page background
--bg-surface#111Card / panel
--text-primary#dddHeadings
--text-body#888Body text
--text-muted#666Secondary info
--accent-cyan#7ec8e3Interactive accent
--accent-yellow#eab308Highlight / active
--accent-red#ef4444Danger / error
--border-base#333Standard border
--font-mono'JetBrains Mono', 'Menlo', 'Consolas', monospace
FX
BG