Getting Started

Add Noir CSS to your project in seconds.

CDN

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/kakuteki/Noir@main/css/noir.css">

Direct Download

Download css/noir.css and include it in your project.

Basic Template

<!DOCTYPE html>
<html lang="en" data-theme="dark">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/noir.css">
  <title>My Noir App</title>
</head>
<body>
  <h1 class="heading-1 text-accent">Hello Noir</h1>
</body>
</html>

Theme

Noir defaults to dark theme. Set data-theme="light" on <html> for light mode. Omit the attribute to follow OS preference.

Customization

Override CSS variables to create custom themes. No build step required.

Override Variables

:root {
  --noir-accent: #6366f1;        /* indigo */
  --noir-accent-hover: #818cf8;
  --noir-accent-subtle: rgba(99,102,241,0.15);
  --noir-accent-warm: #f59e0b;   /* amber */
}

Blue Theme Example

:root {
  --noir-accent: #3b82f6;
  --noir-accent-hover: #60a5fa;
  --noir-accent-subtle: rgba(59,130,246,0.15);
  --noir-accent-warm: #8b5cf6;
  --noir-accent-warm-hover: #a78bfa;
}

Modular Imports

Import only the modules you need:

@import "noir/modules/base.css";       /* required */
@import "noir/modules/typography.css";
@import "noir/modules/layout.css";
@import "noir/modules/components.css";
/* skip forms.css, navigation.css, etc. if unneeded */

CSS Variables

All --noir-* variables defined in base.css.

Colors

Variable	Dark Default	Light Default
--noir-bg-primary	#0a0a0a	#f8f8f8
--noir-bg-secondary	#141414	#ffffff
--noir-bg-tertiary	#1e1e1e	#f0f0f0
--noir-bg-elevated	#262626	#ffffff
--noir-text-primary	#f0f0f0	#1a1a1a
--noir-text-secondary	#a0a0a0	#555555
--noir-text-muted	#888888	#767676
--noir-text-inverse	#0a0a0a	#f0f0f0
--noir-accent	#e84545	#d63031
--noir-accent-hover	#ff5252	#e84545
--noir-accent-subtle	rgba(232,69,69,0.15)	rgba(214,48,49,0.1)
--noir-accent-warm	#f97316	#e67e22
--noir-accent-warm-hover	#fb923c	#f97316
--noir-border	#2a2a2a	#e0e0e0
--noir-border-hover	#3a3a3a	#cccccc
--noir-success	#22c55e	#22c55e
--noir-warning	#eab308	#eab308
--noir-error	#ef4444	#ef4444
--noir-info	#3b82f6	#3b82f6

Spacing

Variable	Value
--noir-space-0	0
--noir-space-1	0.25rem
--noir-space-2	0.5rem
--noir-space-3	0.75rem
--noir-space-4	1rem
--noir-space-5	1.25rem
--noir-space-6	1.5rem
--noir-space-8	2rem
--noir-space-10	2.5rem
--noir-space-12	3rem
--noir-space-16	4rem
--noir-space-20	5rem
--noir-space-24	6rem

Typography

Variable	Value
--noir-font-sans	"Inter", "Segoe UI", system-ui, sans-serif
--noir-font-mono	"JetBrains Mono", "Fira Code", "Consolas", monospace
--noir-text-xs	0.75rem
--noir-text-sm	0.875rem
--noir-text-base	1rem
--noir-text-lg	1.125rem
--noir-text-xl	1.25rem
--noir-text-2xl	1.5rem
--noir-text-3xl	1.875rem
--noir-text-4xl	2.25rem
--noir-text-5xl	3rem
--noir-leading-tight	1.25
--noir-leading-normal	1.5
--noir-leading-relaxed	1.75
--noir-font-light	300
--noir-font-normal	400
--noir-font-medium	500
--noir-font-semibold	600
--noir-font-bold	700

Border Radius

Variable	Value
--noir-radius-none	0
--noir-radius-sm	0.25rem
--noir-radius-md	0.5rem
--noir-radius-lg	0.75rem
--noir-radius-xl	1rem
--noir-radius-full	9999px

Shadows

Variable	Value
--noir-shadow-sm	0 1px 2px rgba(0,0,0,0.4)
--noir-shadow-md	0 4px 6px rgba(0,0,0,0.4)
--noir-shadow-lg	0 10px 15px rgba(0,0,0,0.5)
--noir-shadow-xl	0 20px 25px rgba(0,0,0,0.5)
--noir-shadow-glow	0 0 20px rgba(232,69,69,0.3)

Transitions

Variable	Value
--noir-transition-fast	150ms ease
--noir-transition-base	250ms ease
--noir-transition-slow	400ms ease

Z-Index

Variable	Value
--noir-z-tooltip	50
--noir-z-dropdown	100
--noir-z-sticky	200
--noir-z-overlay	300
--noir-z-modal	400
--noir-z-toast	500

Container

Centered container with responsive max-width.

Class	Max Width
container	1280px + auto margins + padding
container-sm	640px
container-md	768px
container-lg	1024px
container-xl	1280px
container-fluid	100%

Display

Class	CSS
block	display: block
inline-block	display: inline-block
inline	display: inline
flex	display: flex
inline-flex	display: inline-flex
grid	display: grid
hidden	display: none

Visibility

Class	CSS
visible	visibility: visible
invisible	visibility: hidden
sr-only	Screen reader only (visually hidden)

Flexbox

Direction & Wrap

Class	CSS
flex-row	flex-direction: row
flex-col	flex-direction: column
flex-row-reverse	flex-direction: row-reverse
flex-col-reverse	flex-direction: column-reverse
flex-wrap	flex-wrap: wrap
flex-nowrap	flex-wrap: nowrap
flex-1	flex: 1 1 0%
flex-auto	flex: 1 1 auto
flex-none	flex: none
grow	flex-grow: 1
grow-0	flex-grow: 0
shrink	flex-shrink: 1
shrink-0	flex-shrink: 0

Justify Content

Class	CSS
justify-start	justify-content: flex-start
justify-end	justify-content: flex-end
justify-center	justify-content: center
justify-between	justify-content: space-between
justify-around	justify-content: space-around
justify-evenly	justify-content: space-evenly

Align Items

Class	CSS
items-start	align-items: flex-start
items-end	align-items: flex-end
items-center	align-items: center
items-baseline	align-items: baseline
items-stretch	align-items: stretch

Align Self

Class	CSS
self-start	align-self: flex-start
self-end	align-self: flex-end
self-center	align-self: center
self-stretch	align-self: stretch

Order

Class	CSS
order-first	order: -9999
order-last	order: 9999
order-none	order: 0
order-1	order: 1
order-2	order: 2

Space Between Children

Class	CSS
space-x-2	margin-left: 0.5rem (children)
space-x-4	margin-left: 1rem
space-x-6	margin-left: 1.5rem
space-y-2	margin-top: 0.5rem (children)
space-y-4	margin-top: 1rem
space-y-6	margin-top: 1.5rem

Gap

Class	Value
gap-0	0
gap-1	0.25rem
gap-2	0.5rem
gap-3	0.75rem
gap-4	1rem
gap-5	1.25rem
gap-6	1.5rem
gap-8	2rem
gap-10	2.5rem
gap-12	3rem

Grid

Class	CSS
grid-cols-1	grid-template-columns: repeat(1, minmax(0,1fr))
grid-cols-2	repeat(2, ...)
grid-cols-3	repeat(3, ...)
grid-cols-4	repeat(4, ...)
grid-cols-6	repeat(6, ...)
grid-cols-12	repeat(12, ...)
col-span-1	grid-column: span 1
col-span-2	span 2
col-span-3	span 3
col-span-4	span 4
col-span-6	span 6
col-span-full	1 / -1
row-span-1	grid-row: span 1
row-span-2	span 2
row-span-full	1 / -1
place-items-center	place-items: center
place-content-center	place-content: center

Spacing

Padding

Class	CSS
p-{0-12}	padding: var(--noir-space-N)
px-{0-8}	padding-inline
py-{0-8}	padding-block
pt-{0,2,4,6,8}	padding-top
pb-{0,2,4,6,8}	padding-bottom

Available values: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12. px/py: 0, 1, 2, 3, 4, 6, 8.

Margin

Class	CSS
m-{0-8}	margin: var(--noir-space-N)
m-auto	margin: auto
mx-{0,2,4}	margin-inline
mx-auto	margin-inline: auto
my-{0,2,4,6,8}	margin-block
mt-{0-8}	margin-top
mb-{0-8}	margin-bottom

Width & Height

Class	CSS
w-full	width: 100%
w-screen	width: 100vw
w-auto	width: auto
w-fit	width: fit-content
min-w-0	min-width: 0
max-w-full	max-width: 100%
w-1/2	width: 50%
w-1/3	33.33%
w-2/3	66.67%
w-1/4	25%
w-3/4	75%
w-1/5	20%
w-2/5	40%
w-3/5	60%
w-4/5	80%
h-full	height: 100%
h-screen	height: 100dvh
h-auto	height: auto
min-h-screen	min-height: 100dvh
min-h-0	min-height: 0
max-h-screen	max-height: 100dvh

Aspect Ratio & Object Fit

Class	CSS
aspect-auto	aspect-ratio: auto
aspect-square	aspect-ratio: 1/1
aspect-video	aspect-ratio: 16/9
object-contain	object-fit: contain
object-cover	object-fit: cover
object-fill	object-fit: fill

Position

Class	CSS
relative	position: relative
absolute	position: absolute
fixed	position: fixed
sticky	position: sticky; top: 0
inset-0	inset: 0
top-0	top: 0
right-0	right: 0
bottom-0	bottom: 0
left-0	left: 0

Overflow, Z-Index & Cursor

Overflow

Class	CSS
overflow-hidden	overflow: hidden
overflow-auto	overflow: auto
overflow-x-auto	overflow-x: auto
overflow-y-auto	overflow-y: auto

Z-Index

Class	Value
z-0	0
z-10	10
z-20	20
z-30	30
z-40	40
z-50	50
z-auto	auto
z-dropdown	100
z-sticky	200
z-overlay	300
z-modal	400
z-toast	500

Cursor

Class	CSS
cursor-pointer	cursor: pointer
cursor-not-allowed	cursor: not-allowed

Transition

Class	CSS
transition	all 250ms ease
transition-fast	all 150ms ease
transition-slow	all 400ms ease
transition-none	transition: none

Opacity

Class	Value
opacity-0	0
opacity-25	0.25
opacity-50	0.5
opacity-75	0.75
opacity-100	1

Borders, Radius & Shadows

Border

Class	CSS
border	1px solid var(--noir-border)
border-0	border: none
border-t	border-top: 1px solid
border-b	border-bottom
border-l	border-left
border-r	border-right
border-accent	border-color: var(--noir-accent)

Border Radius

Class	Value
rounded-none	0
rounded-sm	0.25rem
rounded	0.5rem
rounded-lg	0.75rem
rounded-xl	1rem
rounded-full	9999px

Box Shadow

Class	Shadow
shadow-sm	0 1px 2px ...
shadow	0 4px 6px ...
shadow-lg	0 10px 15px ...
shadow-xl	0 20px 25px ...
shadow-glow	0 0 20px accent glow
shadow-none	none

Backgrounds & Gradients

Class	Value
bg-primary	var(--noir-bg-primary)
bg-secondary	var(--noir-bg-secondary)
bg-tertiary	var(--noir-bg-tertiary)
bg-elevated	var(--noir-bg-elevated)
bg-accent	var(--noir-accent)
bg-accent-subtle	var(--noir-accent-subtle)
bg-accent-warm	var(--noir-accent-warm)
bg-transparent	transparent
bg-gradient-accent	linear-gradient(135deg, accent, warm)
bg-gradient-dark	linear-gradient(180deg, primary, secondary)
bg-gradient-to-r	linear-gradient(to right, accent, warm)
bg-gradient-to-b	linear-gradient(to bottom, primary, transparent)

Responsive Variants

Noir uses mobile-first breakpoints. Prefix classes with sm:, md:, or lg:.

Prefix	Min Width	Example
(none)	0 (mobile-first default)	grid-cols-1
sm:	576px	sm:grid-cols-2
md:	768px	md:grid-cols-3
lg:	1024px	lg:grid-cols-4

Responsive variants are available for: display, flex direction, grid columns/spans, gap, padding, margin, text alignment, and width.

<!-- 1 column on mobile, 2 on sm, 3 on md, 4 on lg -->
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
  ...
</div>

Typography

Font Family

Class	CSS
font-sans	font-family: var(--noir-font-sans)
font-mono	font-family: var(--noir-font-mono)

Class	Size
text-xs	0.75rem
text-sm	0.875rem
text-base	1rem
text-lg	1.125rem
text-xl	1.25rem
text-2xl	1.5rem
text-3xl	1.875rem
text-4xl	2.25rem
text-5xl	3rem

Font Weight

Class	Weight
font-light	300
font-normal	400
font-medium	500
font-semibold	600
font-bold	700

Line Height

Class	Value
leading-tight	1.25
leading-normal	1.5
leading-relaxed	1.75

Text Alignment

Class	CSS
text-left	text-align: left
text-center	center
text-right	right
text-justify	justify

Text Color

Class	Color
text-primary	var(--noir-text-primary)
text-secondary	var(--noir-text-secondary)
text-muted	var(--noir-text-muted)
text-inverse	var(--noir-text-inverse)
text-accent	var(--noir-accent)
text-accent-warm	var(--noir-accent-warm)
text-success	var(--noir-success)
text-warning	var(--noir-warning)
text-error	var(--noir-error)
text-info	var(--noir-info)

Decoration & Transform

Class	CSS
underline	text-decoration: underline
line-through	line-through
no-underline	none
uppercase	text-transform: uppercase
lowercase	lowercase
capitalize	capitalize
normal-case	none

Letter Spacing

Class	Value
tracking-tight	-0.025em
tracking-normal	0
tracking-wide	0.025em
tracking-wider	0.05em
tracking-widest	0.1em

Text Overflow

Class	Effect
truncate	Ellipsis, single line
line-clamp-2	Clamp to 2 lines
line-clamp-3	Clamp to 3 lines
whitespace-nowrap	white-space: nowrap
break-words	overflow-wrap: break-word

Font Style

Class	CSS
italic	font-style: italic
not-italic	font-style: normal

Headings

Class	Size	Weight
heading-1	3rem (5xl)	700 (bold)
heading-2	2.25rem (4xl)	700 (bold)
heading-3	1.875rem (3xl)	600 (semibold)
heading-4	1.5rem (2xl)	600 (semibold)
heading-5	1.25rem (xl)	500 (medium)

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Code

Class	Usage
code	Inline code (monospace, bg, border, small padding)
code-block	Block-level code (pre-formatted, scrollable)

Inline: const x = 42;

function hello() {
  return "Hello, Noir!";
}

Buttons

Class	Description
btn	Base button class (required)
btn-primary	Red accent background, white text
btn-secondary	Transparent, border, outline style
btn-ghost	No border, subtle hover bg
btn-warm	Orange accent background
btn-danger	Error-red background
btn-sm	Small size
btn-lg	Large size
btn-icon	Square icon button
btn-group	Inline group, joined border-radius

Preview

Markup

<button class="btn btn-primary">Primary</button>
<button class="btn btn-secondary btn-sm">Small</button>

<div class="btn-group">
  <button class="btn btn-secondary">Left</button>
  <button class="btn btn-secondary">Center</button>
  <button class="btn btn-secondary">Right</button>
</div>

Cards

Class	Description
card	Base card (bg, border, rounded)
card-hover	Lift + glow on hover
card-header	Top section with border-bottom
card-body	Main content area
card-footer	Bottom section with border-top
card-img	Full-width image

Card Title

Card body content goes here.

<div class="card card-hover">
  <div class="card-header">Title</div>
  <div class="card-body">Content</div>
  <div class="card-footer">Footer</div>
</div>

Badges

Class	Description
badge	Base badge
badge-accent	Red accent
badge-warm	Orange
badge-success	Green
badge-warning	Yellow
badge-error	Red
badge-info	Blue
badge-outline	Bordered, transparent bg

Accent Warm Success Warning Error Info Outline

Alerts

Class	Description
alert	Base alert (left border, padding)
alert-success	Green
alert-warning	Yellow
alert-error	Red
alert-info	Blue

Success message.

Warning message.

Error message.

Info message.

<div class="alert alert-success" role="alert">Success message.</div>

Modal (Dialog)

Uses the native <dialog> element. Built-in Esc close, focus trap, and backdrop.

Class	Description
modal	Base dialog styling
modal-header	Top bar with close button
modal-body	Content area
modal-footer	Action bar at bottom
overlay	Legacy overlay (fixed, backdrop-blur)
overlay.active	Show overlay

<button class="btn btn-primary" onclick="document.getElementById('myModal').showModal()">Open</button>
<dialog id="myModal" class="modal">
  <div class="modal-header">
    <h3>Title</h3>
    <button class="btn btn-ghost btn-icon" onclick="this.closest('dialog').close()">&times;</button>
  </div>
  <div class="modal-body">Content</div>
  <div class="modal-footer">
    <button class="btn btn-ghost" onclick="this.closest('dialog').close()">Cancel</button>
    <button class="btn btn-primary">Confirm</button>
  </div>
</dialog>

Progress Bar

Class	Description
progress	Track container
progress-bar	Fill bar (set width via style)
progress-bar-warm	Orange variant
progress-bar-success	Green variant

<div class="progress">
  <div class="progress-bar" style="width: 40%"></div>
</div>

Avatar

Class	Size
avatar	2.5rem (default)
avatar-sm	2rem
avatar-lg	3.5rem

S

M

L

Skeleton Loading

Class	Description
skeleton	Base shimmer animation
skeleton-text	1em height text placeholder
skeleton-title	1.5em height, 60% width
skeleton-avatar	2.5rem circle

Toast / Notification

Class	Description
toast-container	Fixed container (bottom-right)
toast-container-top	Top position variant
toast	Base toast
toast-success	Green left border
toast-error	Red
toast-warning	Yellow
toast-info	Blue
toast-close	Dismiss button

Success toast.

Error toast.

<div class="toast-container">
  <div class="toast toast-success">
    <span>Saved successfully.</span>
    <button class="toast-close">&times;</button>
  </div>
</div>

Tooltip

CSS-only tooltip using data-tooltip attribute.

<span class="tooltip" data-tooltip="Tooltip text">Hover me</span>

Accordion

Uses native <details>/<summary> elements.

Class	Description
accordion	Container
accordion-item	Wrapper (use <details>)
accordion-trigger	Clickable header (use <summary>)
accordion-content	Collapsible body

Section One

Content for section one.

Section Two

Content for section two.

<div class="accordion">
  <details class="accordion-item" open>
    <summary class="accordion-trigger">Title</summary>
    <div class="accordion-content">Content</div>
  </details>
</div>

Table

Class	Description
table	Base table styling
table-striped	Alternating row bg
table-bordered	Full cell borders
table-compact	Smaller padding

Name	Role
Alice	Developer
Bob	Designer
Carol	PM

Divider

A 1px horizontal line using divider class.

Above

Below

Spinners & Loaders

Class	Description
spinner	Default spinner (1.5rem)
spinner-sm	Small (1rem)
spinner-lg	Large (2.5rem)
spinner-warm	Orange color
spinner-white	White color
loader-dots	Three-dot pulse loader
loader-bar	Indeterminate progress bar

Forms

Input Classes

Class	Description
input	Base text input
input-sm	Small input
input-lg	Large input
textarea	Multi-line input
select	Dropdown select
checkbox	Checkbox label wrapper
radio	Radio label wrapper
toggle	Toggle/switch wrapper
range	Range slider
form-group	Vertical group (label + input + hint)
form-label	Label styling
form-hint	Help text below input
input-group	Icon + input wrapper
input-group-icon	Icon inside input-group
input-success	Green border (valid)
input-error	Red border (invalid)
form-success	Green helper text
form-error	Red helper text

Preview

Text Input

Sizes

Select

Textarea

Validation Looks good! Required field.

Checkbox Option A Option B

Radio Choice 1 Choice 2

Toggle Enabled

Range

<div class="form-group">
  <label class="form-label">Email</label>
  <input type="email" class="input" placeholder="you@example.com">
  <span class="form-hint">We won't share your email.</span>
</div>

<label class="checkbox"><input type="checkbox"> Accept terms</label>
<label class="toggle"><input type="checkbox"> Dark mode</label>

Navbar

Class	Description
navbar	Sticky top bar with backdrop-filter
navbar-brand	Logo / brand link
navbar-nav	Link container (mobile slide-out)
navbar-link	Nav link
navbar-link.active	Active state
navbar-toggle	Hamburger button (mobile)
sidebar	Vertical sidebar (260px)
sidebar-header	Sidebar title
sidebar-section	Section heading
sidebar-link	Sidebar navigation link

<nav class="navbar">
  <a href="/" class="navbar-brand">Brand</a>
  <div class="navbar-nav" id="nav">
    <a href="#" class="navbar-link active">Home</a>
    <a href="#" class="navbar-link">About</a>
  </div>
  <button class="navbar-toggle" onclick="document.getElementById('nav').classList.toggle('open')">
    <span></span><span></span><span></span>
  </button>
</nav>

Tabs

Class	Description
tabs	Underline-style tab container
tabs-pill	Pill-style tab container
tab	Individual tab button/link
tab.active	Active tab

<div class="tabs">
  <button class="tab active">Tab 1</button>
  <button class="tab">Tab 2</button>
</div>

<div class="tabs-pill">
  <button class="tab active">All</button>
  <button class="tab">Filtered</button>
</div>

Breadcrumb

Class	Description
breadcrumb	Flex container
breadcrumb-item	Link or text item
breadcrumb-item.active	Current page (bold)
breadcrumb-separator	Divider character

Pagination

Class	Description
pagination	Flex container
page-link	Individual page button
page-link.active	Current page

Dropdown

Class	Description
dropdown	Relative container
dropdown-menu	Absolutely-positioned menu
dropdown.open	Show menu (add via JS)
dropdown-item	Menu item link/button
dropdown-divider	Horizontal separator

<div class="dropdown">
  <button class="btn btn-secondary" onclick="this.parentElement.classList.toggle('open')">
    Menu &#9662;
  </button>
  <div class="dropdown-menu">
    <a href="#" class="dropdown-item">Item 1</a>
    <div class="dropdown-divider"></div>
    <a href="#" class="dropdown-item">Item 2</a>
  </div>
</div>

Utilities

Transform

Class	CSS
rotate-45	rotate(45deg)
rotate-90	rotate(90deg)
rotate-180	rotate(180deg)
-rotate-90	rotate(-90deg)
scale-75	scale(0.75)
scale-90	scale(0.9)
scale-95	scale(0.95)
scale-100	scale(1)
scale-105	scale(1.05)
scale-110	scale(1.1)
scale-125	scale(1.25)
translate-x-full	translateX(100%)
-translate-x-full	translateX(-100%)
translate-y-full	translateY(100%)
-translate-y-full	translateY(-100%)
origin-center	transform-origin: center
origin-top	transform-origin: top

Pointer Events & User Select

Class	CSS
pointer-events-none	pointer-events: none
pointer-events-auto	pointer-events: auto
select-none	user-select: none
select-text	user-select: text
select-all	user-select: all

List Style

Class	CSS
list-none	list-style: none
list-disc	list-style: disc
list-decimal	list-style: decimal

Max Width

Class	Value
max-w-xs	20rem
max-w-sm	24rem
max-w-md	28rem
max-w-lg	32rem
max-w-xl	36rem
max-w-2xl	42rem
max-w-3xl	48rem
max-w-4xl	56rem
max-w-prose	65ch
max-w-none	none

Ring (Focus Ring)

Class	CSS
ring	0 0 0 3px accent-subtle
ring-accent	0 0 0 3px accent-subtle
ring-success	0 0 0 3px success-subtle
ring-error	0 0 0 3px error-subtle
ring-0	none
ring-2	0 0 0 2px accent-subtle

Backdrop Filter

Class	CSS
backdrop-blur-sm	blur(4px)
backdrop-blur	blur(8px)
backdrop-blur-lg	blur(16px)

Negative Margin

Class	CSS
-m-1	-0.25rem
-m-2	-0.5rem
-mt-1	-0.25rem
-mt-2	-0.5rem
-mt-4	-1rem
-mb-1	-0.25rem
-mb-2	-0.5rem

State Variants

Prefix utilities with hover:, focus:, active:, group-hover:, or disabled: for stateful styling.

hover: Background

Class	Hover Value
hover:bg-primary	var(--noir-bg-primary)
hover:bg-secondary	var(--noir-bg-secondary)
hover:bg-tertiary	var(--noir-bg-tertiary)
hover:bg-elevated	var(--noir-bg-elevated)
hover:bg-accent	var(--noir-accent)
hover:bg-accent-subtle	var(--noir-accent-subtle)
hover:bg-accent-warm	var(--noir-accent-warm)
hover:bg-transparent	transparent

hover: Text

Class	Hover Value
hover:text-primary	var(--noir-text-primary)
hover:text-secondary	var(--noir-text-secondary)
hover:text-accent	var(--noir-accent)
hover:text-accent-warm	var(--noir-accent-warm)
hover:text-white	#ffffff

hover: Border, Shadow, Opacity

Class	Effect
hover:border-accent	border-color: accent
hover:border-hover	border-color: border-hover
hover:shadow	shadow-md
hover:shadow-lg	shadow-lg
hover:shadow-glow	shadow-glow
hover:shadow-none	none
hover:opacity-75	0.75
hover:opacity-90	0.9
hover:opacity-100	1

hover: Transform & Text

Class	Effect
hover:scale-105	scale(1.05)
hover:scale-110	scale(1.1)
hover:-translate-y-1	translateY(-0.25rem)
hover:-translate-y-2	translateY(-0.5rem)
hover:underline	underline
hover:no-underline	none

focus:

Class	Effect
focus:ring	3px accent ring
focus:ring-accent	3px accent ring
focus:ring-2	2px ring
focus:ring-4	4px ring
focus:border-accent	border-color: accent
focus:outline-none	outline: none
focus:outline-accent	2px solid accent outline
focus:bg-tertiary	bg tertiary
focus:bg-accent-subtle	bg accent-subtle

active:

Class	Effect
active:scale-95	scale(0.95)
active:scale-100	scale(1)
active:bg-accent	bg accent
active:bg-tertiary	bg tertiary
active:shadow-none	shadow none

group-hover:

Add group class to parent, then use group-hover:* on children.

Class	Effect
group-hover:text-primary	color: text-primary
group-hover:text-accent	color: accent
group-hover:opacity-100	opacity: 1
group-hover:visible	visibility: visible
group-hover:scale-105	scale(1.05)

disabled:

Class	Effect
disabled:opacity-50	opacity: 0.5
disabled:cursor-not-allowed	cursor: not-allowed
disabled:pointer-events-none	pointer-events: none

Animations

Animation Classes

Class	Effect
animate-fade-in	Fade in (0 to 1 opacity)
animate-fade-out	Fade out
animate-slide-up	Slide up + fade in
animate-slide-down	Slide down + fade in
animate-slide-left	Slide from right
animate-slide-right	Slide from left
animate-pulse	Pulsing opacity (infinite)
animate-spin	360deg rotation (infinite)
animate-bounce	Bouncing (infinite)
animate-ping	Ping / ripple (infinite)
animate-none	animation: none

Duration & Delay

Class	Value
animate-duration-fast	150ms
animate-duration-base	250ms
animate-duration-slow	400ms
animate-delay-100	100ms
animate-delay-200	200ms
animate-delay-300	300ms
animate-delay-500	500ms
animate-infinite	infinite iteration
animate-once	single iteration

Preview

Pulse

Bounce

Reduced Motion

When prefers-reduced-motion: reduce is set, all animations and transitions are reduced to near-zero duration automatically.

Accessibility

Noir is built with WCAG 2.1 AA guidelines in mind.

Screen Reader

Class	Usage
sr-only	Visually hide element but keep accessible to screen readers

Focus Management

All interactive elements receive a visible :focus-visible outline (2px solid accent, 2px offset). Use focus:ring and focus:outline-accent for custom focus rings.

ARIA Patterns

Component	ARIA Guidance
Alerts	Add role="alert" for important messages
Modal	Uses native <dialog> with built-in focus trap. Add aria-labelledby
Dropdown	Add role="menu" to menu, role="menuitem" to items, aria-haspopup and aria-expanded to trigger
Tabs	Use role="tablist", role="tab", aria-selected
Breadcrumb	Wrap in <nav aria-label="Breadcrumb">
Toast	Use role="status" or role="alert" with aria-live
Accordion	Native <details>/<summary> provides built-in accessibility
Pagination	Add aria-current="page" to active link

Reduced Motion

All animations respect prefers-reduced-motion: reduce. Animation durations are set to near-zero automatically.

Color Contrast

Both dark and light themes are designed with sufficient contrast ratios. Primary text on primary background meets WCAG AA. Use semantic colors (success, error, warning, info) for meaningful status indication, not just color alone.

Keyboard Navigation

All interactive components (buttons, inputs, links, tabs, modals, dropdowns) are keyboard accessible. The native <dialog> element provides focus trapping. Use tabindex to manage custom focus order when needed.

Getting Started

CDN

Direct Download

Basic Template

Theme

Customization

Override Variables

Blue Theme Example

Modular Imports

CSS Variables

Colors

Spacing

Typography

Border Radius

Shadows

Transitions

Z-Index

Container

Display

Visibility

Flexbox

Direction & Wrap

Justify Content

Align Items

Align Self

Order

Space Between Children

Gap

Grid

Spacing

Padding

Margin

Width & Height

Aspect Ratio & Object Fit

Position

Overflow, Z-Index & Cursor

Overflow

Z-Index

Cursor

Transition

Opacity

Borders, Radius & Shadows

Border

Border Radius

Box Shadow

Backgrounds & Gradients

Responsive Variants

Typography

Font Family

Font Size

Font Weight

Line Height

Text Alignment

Text Color

Decoration & Transform

Letter Spacing

Text Overflow

Font Style

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Code

Buttons

Preview

Markup

Cards

Badges

Alerts

Modal (Dialog)

Progress Bar

Avatar

Skeleton Loading

Toast / Notification

Tooltip

Accordion

Table

Divider