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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
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.