Theme Presets

DoCurious ships with 7 theme presets that demonstrate the full range of the design token system. Each preset configures colors, typography style, spacing density, surface treatment, and layout structure. Themes are selectable at runtime via the ThemeSwitcher component or the admin Theme Editor.

Source directory: src/theme/presets/

Theme system: src/theme/applyTheme.ts injects all tokens as CSS custom properties on :root

Types: src/theme/types.ts defines ThemeConfig, ThemeColors, ThemeStyle, ThemeLayout

---

Preset Overview

Preset	Design Style	Mode	Navigation	Density	Primary	Accent
Trailhead	Clean / Default	Light	Sidebar	Comfortable	Scout Green #3D5A3C	Honey #D4A84B
Canopy	Soft Neumorphism	Light	Sidebar	Spacious	Deep Forest #2D4A2C	Violet #8B7BC8
Ember	Dark Glassmorphism	Dark	Sidebar	Spacious	Coral #E07B5A	Honey #D4A84B
Expedition	Retro Stamp	Light	Top Nav	Spacious	Leather #8B5E2A	Coral #E07B5A
Field Journal	Naturalist Notebook	Light	Top Nav	Comfortable	Fern #5b7c3a	Dark Gold #b8860b
Stardust	Aurora Dream	Dark	Sidebar	Spacious	Violet #8B7BC8	Honey #D4A84B
Tidepool	Neubrutalism	Light	Top Nav	Compact	Sky #5B8FA8	Honey #D4A84B

---

Trailhead

Home base -- warm Scout Green, Honey accents, Cream canvas

The canonical DoCurious experience. Like walking into a well-designed nature center: warm wood, Cream walls, Scout Green wayfinding, Honey-gold trail markers. This is the default theme.

Design language: Clean, conventional, approachable. No structural effects.

Colors

Role	Value	Swatch
Primary	#3D5A3C (Scout Green)
Accent	#D4A84B (Honey)
Background	#FAF8F3 (Cream)
Text	#1A1A1A (Ink)
Secondary	#5B8FA8 (Sky)
Sidebar BG	#3D5A3C (Scout Green)

Typography & Style

• Headings: Lexend, weight 600, letter-spacing -0.01em, no transform
• Border radius: md (0.75rem cards, 0.5rem buttons/inputs)
• Shadows: Subtle (0 1px 3px rgba(0,0,0,0.08))
• Borders: 1px solid
• Dividers: Solid
• Transitions: 0.2s

Layout

• Navigation: Sidebar (200px, flush, sharp corners)
• Content max width: 1400px
• Card gap: 1rem
• Density: Comfortable

---

Canopy

Deep forest -- rich greens, Violet wildflower accents, immersive

Soft neumorphism. No borders anywhere. Every surface looks gently pressed into or raised from the page, like moss growing on stone. Paired light/dark shadows create depth without edges. Super-rounded, pillow-soft corners.

Design language: Neumorphic -- dual-direction shadows, zero borders, organic curves.

Colors

Role	Value	Swatch
Primary	#2D4A2C (Deep Forest)
Accent	#8B7BC8 (Violet)
Background	#E8EDE4 (Sage)
Text	#1A2418 (Deep Green)
Secondary	#6A5A8A (Muted Violet)
Sidebar BG	#2A3C28 (Dark Forest)
Border	rgba(45,74,44,0.08) (Near-invisible)

Typography & Style

• Headings: Lexend, weight 500, no letter-spacing, no transform
• Border radius: xl (1.25rem cards, 1rem buttons/inputs)
• Shadows: Neumorphic dual-direction (6px 6px 12px rgba(30,40,28,0.12), -4px -4px 10px rgba(255,255,255,0.5))
• Borders: 0 (no borders)
• Dividers: Solid
• Transitions: 0.25s
• Background texture: Subtle radial gradients (violet + green)

Layout

• Navigation: Sidebar (230px, floating with 12px inset, 1.25rem radius)
• Content max width: 1400px
• Card gap: 1.5rem
• Density: Spacious

---

Ember

Dark & cozy -- Coral firelight glow, warm shadows, spacious

Glassmorphism dark mode. Cards float like frosted glass panels over a warm gradient void. Coral and Honey glow out from behind surfaces. Borders are whisper-thin and semi-transparent. Shadows are colored halos, not black blobs.

Design language: Dark glassmorphism -- translucent cards, backdrop blur, colored glow shadows.

Colors

Role	Value	Swatch
Primary	#E07B5A (Coral)
Accent	#D4A84B (Honey)
Background	#1A1512 (Warm Black)
Text	#F5EDE5 (Warm White)
Secondary	#8B7BC8 (Violet)
Sidebar BG	#12100D (Deep Black)
Border	rgba(224,123,90,0.12) (Coral glow)

Typography & Style

• Headings: Lexend, weight 500, letter-spacing -0.02em, capitalize
• Border radius: xl (1.25rem cards, 0.875rem buttons/inputs)
• Shadows: Colored halos (0 0 0 1px rgba(224,123,90,0.06), 0 4px 24px -4px rgba(224,123,90,0.12), 0 12px 40px -8px rgba(0,0,0,0.4))
• Borders: 1px (semi-transparent)
• Card background: rgba(37,32,25,0.65) (translucent)
• Card backdrop blur: 16px
• Dividers: Solid
• Transitions: 0.25s
• Background texture: Layered radial gradients (Coral, Honey, Violet)

Layout

• Navigation: Sidebar (220px, floating with 10px inset, 1rem radius)
• Content max width: 1100px
• Card gap: 1.25rem
• Density: Spacious

---

Expedition

Bold adventure -- rugged borders, topo-map texture, uppercase headings

Retro stamp collector aesthetic. Square badges like passport stamps. Uppercase headings with wide tracking like a national park sign. Dotted borders like perforated tear-off edges. Heavy hard-offset shadows like a block print.

Design language: Retro / stamp collector -- thick borders, hard shadows, uppercase type, dotted dividers.

Colors

Role	Value	Swatch
Primary	#8B5E2A (Leather)
Accent	#E07B5A (Coral)
Background	#FBF7F0 (Warm Paper)
Text	#2A1F14 (Dark Walnut)
Secondary	#D4A84B (Honey)
Sidebar BG	#2A1F14 (Dark Walnut)
Border	#2A1F14 (Dark, solid)

Typography & Style

• Headings: Lexend, weight 700, letter-spacing 0.10em (wide), uppercase
• Heading underline: 3px dotted #2A1F14
• Border radius: sm (0.25rem cards, 0.125rem buttons/inputs)
• Shadows: Hard offset, zero blur (5px 5px 0 rgba(42,31,20,0.18))
• Borders: 2.5px solid (thick)
• Card accent border: 5px solid #E07B5A (top stripe)
• Badge radius: 0 (square stamps)
• Dividers: Dotted
• Transitions: 0.1s (snappy)
• Background texture: SVG topo-map contour lines

Layout

• Navigation: Top nav (60px height)
• Filter placement: Top bar
• Content max width: 960px (narrow, like a field notebook)
• Card gap: 1.5rem
• Density: Spacious

---

Field Journal

Warm & tactile -- dashed borders, paper texture, naturalist notebook feel

A warm naturalist notebook. Dashed borders, paper texture, fern and brass palette. Dark bark sidebar. Comfortable density. The visual equivalent of a well-loved field guide.

Design language: Naturalist / handmade -- dashed borders, paper grain, warm earthy tones.

Colors

Role	Value	Swatch
Primary	#5b7c3a (Fern Green)
Accent	#b8860b (Dark Gold)
Background	#faf6ee (Warm Paper)
Text	#3a3226 (Dark Bark)
Secondary	#6b5d3e (Muted Brown)
Sidebar BG	#3a3226 (Dark Bark)
Border	#c4b68a (Straw)

Typography & Style

• Headings: Lexend, weight 600, letter-spacing 0.01em, no transform
• Border radius: md (0.5rem cards, 0.375rem buttons/inputs)
• Shadows: Minimal offset (1px 2px 0 rgba(58,50,38,0.06))
• Borders: 1.5px solid (medium)
• Dividers: Dashed
• Transitions: 0.2s
• Background texture: SVG noise texture (paper grain)

Layout

• Navigation: Top nav (56px height)
• Filter placement: Drawer
• Content max width: 1000px
• Card gap: 1rem
• Density: Comfortable

---

Stardust

Mystical night -- Violet glow, Honey stars, dreamy transitions

Aurora dream. Everything is a pill. Everything glows. Transitions take their sweet time (0.4s) because magic should not be rushed. Ultra-light 400-weight headings float above the surface. Background is alive with layered radial gradients -- violet, honey, coral -- shifting like northern lights behind frosted glass.

Design language: Aurora / cosmic -- pill shapes, colored glow shadows, frosted glass, slow transitions.

Colors

Role	Value	Swatch
Primary	#8B7BC8 (Violet)
Accent	#D4A84B (Honey)
Background	#110F1A (Deep Night)
Text	#E4E0F0 (Lavender White)
Secondary	#5B8FA8 (Sky)
Sidebar BG	#0C0A14 (Void)
Border	rgba(139,123,200,0.15) (Violet glow)

Typography & Style

• Headings: Lexend, weight 400 (ultra-light), letter-spacing 0.03em, no transform
• Heading underline: 1px dashed rgba(139,123,200,0.3) (constellation lines)
• Border radius: full (9999px buttons/inputs/badges/nav -- everything is a pill)
• Card radius: 1.5rem
• Shadows: Colored glow (0 0 0 1px rgba(139,123,200,0.10), 0 4px 20px -4px rgba(139,123,200,0.18), 0 12px 40px -8px rgba(0,0,0,0.4))
• Borders: 1px (semi-transparent)
• Card background: rgba(26,23,38,0.55) (translucent)
• Card backdrop blur: 12px
• Dividers: Dashed
• Transitions: 0.4s (slow, dreamy)
• Background texture: Layered radial gradients (Violet, Honey, Coral, Sky -- aurora effect)

Layout

• Navigation: Sidebar (220px, floating with 10px inset, 1.5rem radius)
• Filter placement: Drawer
• Content max width: 1300px
• Card gap: 1.5rem
• Density: Spacious

---

Tidepool

Coastal & clean -- Sky blue, thick borders, chunky shadows, compact

Neubrutalism. Thick chunky borders. Hard-offset shadows with zero blur. Bold, loud, playful -- like a Gumroad checkout page went to summer camp. Everything has weight and presence. Shadows punch down-right like rubber stamps.

Design language: Neubrutalist -- thick borders, hard flat shadows, bold type, uppercase headings.

Colors

Role	Value	Swatch
Primary	#5B8FA8 (Sky Blue)
Accent	#D4A84B (Honey)
Background	#F6F9FB (Cool White)
Text	#1A2830 (Deep Slate)
Secondary	#E07B5A (Coral)
Sidebar BG	#1A2830 (Deep Slate)
Border	#1A2830 (Dark, solid)

Typography & Style

• Headings: Lexend, weight 700, letter-spacing 0.02em, uppercase
• Heading underline: 3px solid #1A2830
• Border radius: md (0.75rem cards/buttons/inputs)
• Shadows: Hard offset, zero blur (4px 4px 0 #1A2830)
• Borders: 3px solid (chunky)
• Card accent border: 5px solid #5B8FA8 (top stripe)
• Badge radius: 0.5rem (rounded squares, not pills)
• Dividers: Solid
• Transitions: 0.1s (snappy)
• Background texture: None (clean)

Layout

• Navigation: Top nav (56px height)
• Filter placement: Top bar
• Content max width: 1200px
• Card gap: 0.75rem
• Density: Compact

---

Design System Comparison

Surface Treatment

Preset	Approach	Borders	Shadow Style	Card BG
Trailhead	Standard	1px solid	Soft blur	Opaque
Canopy	Neumorphic	None	Dual-direction	Opaque
Ember	Glassmorphic	1px translucent	Colored glow	Translucent + blur
Expedition	Block print	2.5px solid	Hard offset	Opaque
Field Journal	Paper-like	1.5px solid	Minimal offset	Opaque
Stardust	Cosmic glass	1px translucent	Colored glow	Translucent + blur
Tidepool	Neubrutalist	3px solid	Hard offset, zero blur	Opaque

Typography Treatment

Preset	Heading Weight	Letter Spacing	Transform	Underline
Trailhead	600	-0.01em	None	None
Canopy	500	0	None	None
Ember	500	-0.02em	Capitalize	None
Expedition	700	0.10em	Uppercase	3px dotted
Field Journal	600	0.01em	None	None
Stardust	400	0.03em	None	1px dashed
Tidepool	700	0.02em	Uppercase	3px solid

Layout Structure

Preset	Nav Mode	Filter Placement	Sidebar Width	Content Max Width
Trailhead	Sidebar	Sidebar	200px	1400px
Canopy	Sidebar	Sidebar	230px (floating)	1400px
Ember	Sidebar	Sidebar	220px (floating)	1100px
Expedition	Top Nav	Top Bar	190px	960px
Field Journal	Top Nav	Drawer	200px	1000px
Stardust	Sidebar	Drawer	220px (floating)	1300px
Tidepool	Top Nav	Top Bar	180px	1200px

---

Creating a Custom Theme

Themes are defined as ThemeConfig objects that override the defaults. To create a new preset:

1. Create a new file in src/theme/presets/ (e.g., myTheme.ts)
2. Export a ThemeConfig object with your overrides
3. Register it in src/theme/presets/index.ts as a ThemePreset entry
4. The theme will appear in the ThemeSwitcher and admin Theme Editor

See Design Tokens for the full list of configurable properties.