Build with Noir.

A utility-first CSS framework with a dark-cool aesthetic.
Lightweight. Modular. No JavaScript required.

Get Started Explore

Color Palette

Accent colors and semantic palette for the Noir framework.

Accent

Accent
Hover
Warm
Warm Hover

Backgrounds

Primary
Secondary
Tertiary
Elevated

Semantic

Success
Warning
Error
Info

Typography

Headings, text sizes, and text utilities.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Text Sizes

text-xs (0.75rem) text-sm (0.875rem) text-base (1rem) text-lg (1.125rem) text-xl (1.25rem) text-2xl (1.5rem)

Text Colors

Primary Secondary Muted Accent Warm Success Warning Error Info

Code

Use the code class for inline code.

const noir = { name: "Noir CSS", version: "1.0.0", theme: "dark-cool" };

Layout & Grid

Responsive grid system and flex utilities.

Grid - 3 Columns

1
2
3

Grid - 4 Columns

1
2
3
4

Grid - Column Spans

span-2
span-4
span-3
span-3

Flex Utilities

justify-between Right
Center justify-center + gap-4 Center

Buttons

Button variants, sizes, and states.

Variants

Sizes

States

Button Group

Cards

Card layouts with headers, bodies, and hover effects.

N
Noir Framework
v1.0.0

A utility-first CSS framework with dark-cool aesthetic and red/orange accent colors.

CSS
Active v2.1

Project Alpha

Modern web application with responsive design and dark theme support.

72% Complete

Statistics

Downloads 12.4k
Stars 3.2k
Forks 856

Badges & Alerts

Status indicators and notification banners.

Badges

Accent Warm Success Warning Error Info Outline

Alerts

Forms

Input fields, selects, checkboxes, toggles, and validation.

We'll never share your email.
Looks good! This field is required.

Utilities

Shadows, avatars, progress bars, skeletons, and more.

Shadows

shadow-sm
shadow
shadow-lg
shadow-glow

Avatars

S
M
L

Progress Bars

Skeleton Loading

Modal

Native dialog element — Esc to close, focus trap, and backdrop are built-in.

Modal Title

This modal uses the native <dialog> element — Esc to close, focus trap, and backdrop are built-in.

Toasts

Toast notifications with semantic roles for accessibility.

Deployment successful.
New version available.