Get started

Drop it in — 10 seconds, no build step

CDN — paste into your <head>:

<link rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/farvist/dist/farvist.min.css">

Or install from npm:

npm i farvist

Three builds, same class names: farvist.min.css (~21 KB gzip, everything) · farvist-slim.min.css (~19 KB, no AI kit) · farvist-ai.min.css (~6 KB — just the AI-interface kit, made to drop into a site that already uses Tailwind or Bootstrap; Tailwind v3 adds the tiny farvist-ai-compat.css; see it live). Details →

Make it yours

Re-brand the whole framework with five lines of CSS

Every gradient, glow, mesh, hover state and focus ring derives from the --fv-* variables at runtime. Click a brand — this entire page recolors live. No build step, which also means your AI assistant can do it. Want fine control? Open the Theme Builder →

/* click a brand above — the CSS it takes appears here */
:root { }

…or ship one of the five prebuilt, AA-gated skins — one attribute, whole new product:

Layout

12-column glass grid

Flexbox columns from a @for loop, responsive at every breakpoint.

.col-12 .col-md-8

.col-md-4

Components

Built to glow

Buttons — hover for the neon glow

Badges

primary accent success 9+ soft soft accent soft info

Alerts

System online

All generators compiled cleanly. View build log.

Every component on this page is styled by one stylesheet — dist/farvist.min.css, ~21 KB.

A neutral, readable message on a colored glass panel.

Cards

Featured

Token-driven

Every value traces back to one Sass map. Change a token, restyle the system.

Sass Learn more

Glass surfaces

Frosted backdrop-filter panels with an inner highlight and deep shadow.

Jump to utilities

Tiny footprint

~21 KB gzipped for all 42 components — or the ~19 KB slim build, or the ~6 KB AI-kit-only build for existing sites.

21 KB MIT

Forms

Frosted inputs

Input group

Bio

Markdown is supported.

Utilities

Generated helpers

Theme colors

primary

accent

info

success

Gradients

primary

accent

sunset

aurora · animated

Neon glow

.glow-primary

.glow-accent

.glow-info

Type scale

.fs-xs — the quick brown fox

.fs-base — the quick brown fox

.fs-2xl — the quick brown fox

.fs-4xl — gradient headline

New · free forever

Backgrounds Tailwind & Bootstrap don't ship

Mesh gradients, patterns, spotlights and fade-masks — token-driven, theme-aware, one class. No plugins, no paid tier.

Mesh gradients

.bg-mesh-aurora

.bg-mesh-sunset

.bg-mesh-ocean

.bg-mesh-nebula .bg-drift

Patterns & spotlights

.bg-grid .bg-fade

.bg-dots

.bg-lines

.bg-spotlight-accent

New in v0.3

Component library & assets

15 new glass components, a 55-icon set, decorative SVGs and a 2.5 KB JS companion.

Icons — currentColor, so they glow with the theme

Avatars & chips

AL JD MK +5

Design Sass Glass Plain

Progress & loaders

Tabs

Pure-CSS panels toggled by the 2.5 KB companion script.

No framework, no dependencies — just classes.

Accordion (native <details>, no JS)

Is it really this small?

Yes — ~21 KB gzipped including every component.

Does it support themes?

Dark by default, with a one-attribute light theme.

Member	Role	Status
AL Ada Lovelace	Engineer	Active
MK Mira Koto	Product	Away

New in v0.5 — 9 more components

Stepper

✓Account
2Plan
3Done

Segmented & rating

Day Week Month

Range

Timeline

Deployed to production
2 min ago
Spec updated
1 hr ago
Branch created
3 hr ago

8,420

Active users ▲ 12%

Callout

A lighter note for docs and tips.

Warning

Colored accent per theme color.

Inbox Drafts Starred

No results

Try a different search term.

How it compares

Farvist vs the usual suspects

Feature	Farvist	Bootstrap	Tailwind
Glass aesthetic built-in	● Yes	—	—
Free backgrounds library	● Mesh · patterns · spotlights	—	Linear gradients
Prebuilt components	● 42	● Many	— (utility-only)
Dark + light themes	● One attribute	● Yes	● Yes
Cascade layers (`@layer`)	● Yes	—	● v4
Build step required	● No — one `<link>`	● No	Yes
Min size (gzip)	~21 KB	~25 KB (CSS only)	varies (purged)
License	MIT	MIT	MIT

Honest take: Bootstrap and Tailwind are mature, huge-ecosystem tools — pick them for that. Farvist is for a dark, glassy look with batteries included.

Premade templates

A glass dashboard, a SaaS landing, a portfolio, an AI console, and a copy-paste block gallery.

Dashboard → SaaS → Portfolio → AI console → Blocks →