Themes & Shadow Depth

---

Theme Selection

Light Theme

Bright backgrounds with dark text. Best for readability in well-lit environments.

Use a light theme:
background #FFFFFF, surface cards #F9FAFB,
primary text #111827, secondary text #6B7280,
border color #E5E7EB.

When to use:

• Reading-focused apps (docs, blogs, news)
• Professional or enterprise tools
• Outdoor or bright-environment use cases
• When trustworthiness and clarity are priorities

---

Dark Theme

Dark backgrounds with light text. Reduces eye strain in low-light conditions.

Use a dark theme:
background #111827, surface cards #1F2937,
primary text #F9FAFB, secondary text #9CA3AF,
border color #374151.

When to use:

• Developer tools and code editors
• Entertainment and media platforms
• Gaming and immersive applications
• OLED device optimization (saves battery)

---

Auto Theme (System Preference)

Adapts to the operating system’s current theme preference.

Use an adaptive theme that responds to system preferences:
Light mode: background #FFFFFF, text #111827, borders #E5E7EB
Dark mode: background #111827, text #F9FAFB, borders #374151
Use CSS custom properties and the prefers-color-scheme media query.

When to use:

• General-purpose apps with diverse users
• When you want to respect user preference without a manual toggle
• SaaS products and productivity tools

---

Theme Comparison

Factor	Light	Dark	Auto
Readability in daylight	✅ Best	❌ Lower	Adapts
Eye strain at night	❌ Higher	✅ Less	Adapts
OLED battery	❌ No saving	✅ Saves	Adapts
User familiarity	✅ Most familiar	Growing	Both
Trust & professionalism	✅ Strong	Moderate	Both

---

Shadow Depth

Shadows communicate elevation — how far above the background a surface appears. Use them to establish hierarchy: higher elevation = more important or interactive.

Shadow Levels

None

No shadow. For flat design or backgrounds.

Use no shadows. Flat design with borders (#E5E7EB) only for separation.

---

Small — box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)

Minimal depth. Subtle lift for less prominent elements.

Apply small shadows to secondary cards and inactive tabs:
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05)

---

Medium — box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)

Standard depth. The default for interactive cards and buttons.

Apply medium shadows to interactive cards:
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1)
Increase to large shadow on hover.

---

Large — box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1)

Prominent depth. Floating panels, feature cards, emphasized content.

Apply large shadows to the main dashboard panels:
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1)

---

Extra Large — box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1)

High elevation. Hero elements, featured content areas.

Apply extra large shadow to the hero section card:
box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1)

---

2XL — box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25)

Maximum depth. Dramatic floating effect for focal elements.

Apply 2xl shadow to the pricing featured plan card:
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.25)

---

Inner — box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05)

Recessed/pressed effect. For inputs, pressed buttons, or inset panels.

Apply inner shadow to text inputs to convey a pressed-in feel:
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.05)
Remove on focus, replace with focus ring.

---

Elevation Hierarchy

Map shadow levels to component types consistently.

Level	Shadow	Component examples
0	None	Page background, flat sections
1	Small	Secondary cards, inactive states
2	Medium	Buttons, inputs, standard cards
3	Large	Dropdowns, tooltips, popovers
4	Extra large	Modals, floating action buttons
5	2XL	Hero elements, primary CTAs

---

Shadow Best Practices

Direction consistency — Always use bottom-right or bottom-center direction. Light sources come from above.

Use consistent shadow direction across all components:
shadows cast downward (positive Y) and slightly right (positive X).

Theme adaptation — Dark themes need more transparent or colored shadows to avoid muddy looks.

In dark mode, use rgba(0, 0, 0, 0.4) instead of 0.1 for medium shadows.
Alternatively, use colored shadows: box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3)
for blue-tinted depth.

Interactive feedback — Increase shadow on hover or active states to signal interactivity.

Cards start at medium shadow. On hover, transition to large shadow over 200ms ease.
Pressed state uses inner shadow for 100ms, then returns to medium.