EmeraldCSS v2

UTILITY-FIRST · SEMANTIC WHEN IT MATTERS

Build interfaces with a calmer center.

EmeraldCSS combines a practical utility layer, a responsive 12-column grid, semantic page structure, and flexible palettes in one browser-native stylesheet.

Explore components View CSS source
28.3 KB
minified CSS
12
grid columns
40+
included palettes
dashboard.html
12-col grid 0 KB JS runtime CSS variables
01

Structure firstContainers and grids make hierarchy predictable.

02

Utilities nearbyCompose quickly without runtime style injection.

03

Palettes everywhereChange character through custom properties.

THE SYSTEM

One stylesheet.
Four useful layers.

EmeraldCSS is opinionated enough to move quickly and open enough to let semantic HTML do its job.

01

Responsive grid

A familiar 12-column model with practical breakpoints and containers for wide, narrow, and fluid layouts.

.row · .col-6 · .col-md-4
02
Aa

Typography

Readable defaults, a consistent scale, and utility hooks for alignment, weight, rhythm, and tone.

.title · .lead · .text-muted
03

Utilities

Spacing, display, flex, sizing, color, and border helpers handle the common work without generating CSS.

.d-flex · .mt-3 · .w-100
04

Components

Cards, navigation, forms, buttons, badges, tables, alerts, and modals share the same visual language.

.card · .btn · .navbar

COMPONENT STUDIO

Useful parts,
already in tune.

This gallery is rendered with the EmeraldCSS repository’s production stylesheet, with a thin showcase layer for art direction.

EC
Available

Emerald Interface Kit

A coherent starting point for dashboards, tools, documentation, and product surfaces.

CSS only
Build health
Live
G

Grid compiled12 columns · 4 breakpoints

100%
P

Palette loadedvariables resolved

42ms
Native form elements. Framework styling. No component runtime.
Utility coveragev2
200+utilities
  • Layout 36%
  • Type & color 34%
  • Spacing & helpers 30%

PALETTE LAB

Same structure.
A different atmosphere.

Choose a repository palette. EmeraldCSS swaps color identity through custom properties while layout and components remain stable.

theme.tokens.cssemerald
--primarybrand action
--secondarysupporting tone
--successpositive state
Theme-ready card

Components inherit the active palette automatically.

EMERALDCSS V2

A sturdy layer between raw CSS and a design system.

Explore the repository Open full documentation