Style Guide
Noir UI Design System v3.0
A quick guide to all the style elements used by default in posts and pages on Fairies Wear Boots.
Typography & Headers
Heading Level 1
Heading Level 2
Heading Level 3
Heading Level 4 (Sub-section)
Heading Level 5 (Categorical)
Heading Level 6 (Metadata)
Content Selection
Selection color is customized to match the theme. Highlighting text here will result in a soft purple tint in light mode and a glowing Magenta tint in dark mode.
Try selecting this paragraph to test the effect.
Lists & Markers
Unordered Lists
- Bullet points use the Identity Cyan color in dark mode.
- They switch to Bold Purple in light mode.
- Text remains comfortably readable and standard weight.
Ordered Lists
- Numbers follow the same color logic as bullets.
- Automatic numbering maintains a clean vertical rhythm.
- Hierarchy is preserved even in nested lists.
Data Tables
| Component | Primary Color | Interaction |
|---|---|---|
| Headers | Cyan Identity | Static / Visual Hierarchy |
| Tags | Interaction Magenta | 8px Neon Glow |
| Links | Dusty Cyan | 12px Neon Glow |
Interaction Glows
Color Palette
Identity Cyan
Magenta Glow
Dusty Link Cyan
Theme Purple
Noir Base
Structural Elements
Horizontal rules (the <hr> tag) are converted into a custom **Pixel Divider** in dark mode:
Blockquotes feature a Purple-500 left border and a subtle surface tint in dark mode to distinguish them from standard thoughts.
This is a standard blockquote used for emphasizing quotes or external references.
Code snippets are wrapped in standard-compliant blocks with syntax highlighting enabled.
// Fairies Wear Boots Noir Config
const site = {
theme: "noir",
accent: "#FF5CFF",
glow: "prominent"
};