Skip to content
EmeraldCSS v2

EMERALD SHOWCASE THEME · 2026.1

Small CSS.
Considered edges.

EmeraldCSS supplies the structure and components. One lightweight override adds quieter type, soft borders, tiny status dots, responsive shadows, and motion that knows when to stop.

See the theme Compare full showcase
28.3KB
EmeraldCSS v2
11.4KB
theme override
0KB
JavaScript
emerald.uilive
Interface health
98%
Components24ready
Runtime0KB JS

Theme appliedsubtle by default

1px borders quiet motion

THE FRAMEWORK

Emerald does the useful work.

The root page deliberately uses the production framework stylesheet for layout, cards, buttons, spacing, and type. The theme only refines the atmosphere.

01 · STRUCTURE

Responsive grid

Twelve columns, practical containers, flex utilities, and familiar breakpoints.

.row .col-6
02 · COMPONENTS

Useful defaults

Buttons, cards, forms, navigation, badges, tables, alerts, and more.

.card .btn
03 · PALETTES

Variable-led color

Brand identity changes through variables while the component contract stays stable.

--color-primary

THE OVERRIDE

A small layer with a clear point of view.

The Emerald Showcase Theme keeps decoration subordinate to content. It adds the details worth repeating without recreating the framework.

  • Tiny state dotsReadable status without heavy iconography.
  • Soft depthShadows appear on hover and important surfaces.
  • Quiet typographyDark headers, light-grey support text, system fonts.
  • Respectful motionShort transitions disabled by reduced-motion preferences.
EC

Theme tokensemerald-showcase-theme.css

Active
primary#0f9f73
heading#173d34
muted#6f827c
border#dce7e2

USE BOTH FILES

Framework first. Theme second.

The cascade stays explicit and the optional layer stays replaceable.

<link rel="stylesheet" href="/static/emerald-v2.min.css">
<link rel="stylesheet" href="/static/emerald-showcase-theme.min.css">