Themes
Four distinct visual themes, all powered by the same design tokens. Each theme has unique typography, spacing, and personality while maintaining accessibility and consistency.
Try the floating theme switcher in the bottom-right corner to see changes instantly across the entire site!
Available Themes
Minimal
Clean design with lots of white space and subtle borders
- •Maximum readability
- •Subtle borders
- •Generous spacing
- •Focused content
Futuristic
Dark theme with gradients and glassmorphism effects
- •Dark mode optimized
- •Gradient accents
- •Glassmorphism
- •Enterprise feel
Cozy
Warm tones with softer corners and gentle shadows
- •Warm color palette
- •Rounded corners
- •Soft shadows
- •Personal touch
Artistic
Typography-focused with elegant serif accents
- •Typography emphasis
- •Serif accents
- •Creative layouts
- •Poetry-friendly
Using Themes in Your App
Setup with npm package
The noorui-rtl package includes DesignSystemProvider for easy theme switching
All 4 themes with light/dark mode work out of the box! The pre-compiled CSS includes all theme variants.
Theme Specifications
Minimal Theme
Clean, professional, and focused
- • Font: Inter (sans-serif)
- • Line-height: 1.6
- • Letter-spacing: -0.02em (headings)
- • Font-weight: 600 (headings)
- • Border-radius: 0.25rem
- • Colors: Neutral grays
- • Spacing: Balanced
- • Borders: Subtle
Enterprise applications, dashboards, data-heavy interfaces, professional tools
Futuristic Theme
Dark, modern, and compact
- • Font: Inter (sans-serif)
- • Line-height: 1.5 (compact)
- • Letter-spacing: -0.025em
- • Font-weight: 600 (strong)
- • Border-radius: 0.75rem
- • Colors: Purples, cyans
- • Spacing: Tighter
- • Style: Glassmorphism
Tech products, developer tools, gaming interfaces, dark-mode-first applications
Cozy Theme
Warm, spacious, and comfortable
- • Font: Inter (sans-serif)
- • Line-height: 1.7 (relaxed)
- • Letter-spacing: 0.015em
- • Headings: 1.5rem margin
- • Border-radius: 1.25rem (very rounded)
- • Colors: Warm oranges, ambers
- • Spacing: Very generous
- • Padding: 2rem cards, 0.75rem buttons
Personal blogs, community platforms, lifestyle apps, content-focused sites
Artistic Theme
Elegant, typography-focused, serif fonts
- • Font: Georgia (serif)
- • Arabic: Noto Naskh Arabic (serif)
- • Line-height: 1.8-1.9
- • Letter-spacing: 0.01-0.02em
- • Font-weight: 400 (elegant)
- • Border-radius: 0.125rem (minimal)
- • Colors: Violets, golds
- • Spacing: Generous paragraphs
- • Style: Editorial
Poetry, literature, magazines, portfolios, creative writing platforms
Live Preview
Sample Content
See how the current theme affects real content
Heading Example
This is a sample paragraph to demonstrate how text looks with the current theme. Notice how the typography, line height, and spacing create a unique reading experience that matches the theme's personality.
A second paragraph shows how content flows with the chosen theme settings. Each theme brings its own character through carefully tuned design tokens.
Implementation
Using Themes
Themes can be changed via URL, UI, or programmatically
Use the floating button in the bottom-right corner (palette icon) to switch themes. The URL will update automatically and the theme persists across pages.
Creating Custom Themes
Create your own theme by defining a CSS class that overrides the design token variables.
Step 1: Define Your Theme CSS
Add a new theme class to your globals.css. Override the color variables for both light and dark modes.
Step 2: Use Your Theme
Pass your custom theme name to the DesignSystemProvider.
CSS Variables Reference
These are the variables you can override in your custom theme.
Tip: Visit the Design Tokens page to see the live values of all variables for the current theme — great for using as a starting point. Design Tokens →