This paragraph contains inline code to test styling.
// This is a code block
function themeShowcase() {
console.log('Testing code block colors');
return 'All colors working!';
}Natsumi Theme Showcase
Color Palette
Primary Colors
Background Start
#C59FC4
Lavender
Background End
#A57DAA
Deep Lavender
Surface
#3E233D
Plum
Text
#2A1C28
Dark Plum
Accent
#F6C445
Gold
Color Scale System
Plum Scale
plum-900
#2A1C28
plum-700
#3E233D
plum-500
#6A406F
plum-300
#9F6C9F
plum-100
#DEC7DB
Gold Scale
gold-700
#F6C445
gold-500
#FFDA80
gold-300
#FFD467
gold-100
#FFF6B0
Lavender Scale
lavender-500
#C59FC4
lavender-300
#D7B3D6
lavender-100
#F0DFF1
Status & Action Colors
Success
#27AE60
Green
Error
#E74C3C
Red
Gold Hover
#E6B435
Dark Gold
Success Hover
#229954
Dark Green
Currently Active CSS Variables
--color-background-start
--color-text
--color-surface
--color-accent
--link-color
--navbar-link-color
Breadcrumb Navigation
Typography & Text Colors
H1 Header Text
H2 Header Text
H3 Header Text
H4 Header Text
H5 Header Text
H6 Header Text
This is regular body text using the default text color. It should be readable and comfortable for extended reading.
Bold text and italic text for emphasis.
Code Elements
Blockquotes
This is a blockquote to test the blockquote styling and colors. It should have a left border and background that fits the theme.
Real Components
Category Pills
Blog Post Cards
Comic Post Cards
Thumbnail Grid - Sample Comic Grid
Breadcrumb Navigation
Form Elements
Tag Pills & Categories
Theme Tag
Color Test
Natsumi
Tables
| Header 1 | Header 2 | Header 3 |
|---|---|---|
| Row 1, Col 1 | Row 1, Col 2 | Row 1, Col 3 |
| Row 2, Col 1 | Row 2, Col 2 | Row 2, Col 3 |
Lists
Unordered List
- First list item with marker color
- Second list item
- Third list item with a link inside
- Fourth list item
Ordered List
- First numbered item
- Second numbered item
- Third item with
inline code - Fourth numbered item
Horizontal Rules
Content above the horizontal rule.
Content below the horizontal rule.
Notifications & Toasts
This is a toast notification using theme toast colors.
This is a first-time user experience banner.
Controls & Interactive Elements
Control panel background with control text color
Slider accent color
Modal Backdrop
Modal content on backdrop
Footer Colors
Color Variables Reference
Background: █ var(--background-color)
Text: █ var(--text-color)
Header: █ var(--heading-large-color)
Link: █ var(--link-color)
Link Hover: █ var(--link-hover-color)
Border: █ var(--div-border)
🏆 WCAG 2.1 Compliance Showcase
Enhanced accessibility while maintaining the warm, feminine brand colors. All improvements target AA compliance or better.
✅ Contrast-Safe Links on Lilac Backgrounds
NEW: These links use contrast-safe gold (#E0B52B) for AA compliance: comic pages and blog posts. Notice the underlines with 2px offset for non-color accessibility cues.
On hover/focus, links show brand gold (#FFDA80) for visual pop: hover this link.
🎯 Size-Based Heading System
Large Heading (≥18px) - Brand Gold ✨
Large Heading - Brand Gold ✨
Small Heading - Contrast-Safe Gold 🛡️
Small Heading - Contrast-Safe Gold 🛡️
🔗 Before/After Link Comparison
✅ NEW: WCAG Compliant
Links use contrast-safe gold (#E0B52B) with underlines for accessibility.
❌ OLD: Failed Contrast
Original brand gold (#FFDA80) fails AA contrast on lilac.
📱 Navbar/Footer (AA Large Compliant)
Link Examples
Standard Links
Here are various comic pages and blog posts you might find interesting. Check out our resources section for more content.
Some external links: Astro Framework, Tailwind CSS, and Vercel Hosting.
Navigation Links
Category and Tag Links
Special Action Links
Component Examples
PostCard Examples
Showcasing how blog posts and comic pages appear as cards:
ThumbnailGrid Example
Grid layout for comic pages and gallery items:
Accessibility Contrast Lab
Live contrast testing for all theme color combinations. Uses WCAG contrast formula to verify accessibility compliance.