Edge panel v5 — softer palette, AA contrast, calmer type

v4 was technically correct but visually harsh. The accent was neon, the page was pure white, the dark sections were too saturated. v5 pulls the whole palette back to warm + muted, with WCAG AA contrast everywhere. Same layout, same widths, much easier to look at for 8 hours.

📱 Mobile 390px
168px (43%)
MOBILE 222px app · 168px panel
9:41📶 🔋

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources.

What we offer

Books · News · Team · Resources

Get Started

Ready to bring trees to your classroom?

Footer

Contact · Social · © 2026

🏠Home
📚Books
📰News
👤Account
Structure
Inspector
🧩
Widgets
🖼
Media
Layers
🎨
Theme
📐
Layout
History
3
💬
AI Chat
📡
FvRE
🗄
PB
Triggers
📱 Tablet 768px
200px (26%)
TABLET 568px app · 200px panel
9:41📶 🔋

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources.

What we offer

Books · News · Team · Resources · Pricing

Get Started

Structure
Inspector
🧩
Widgets
🖼
Media
Layers
🎨
Theme
📐
Layout
History
3
💬
AI Chat
📡
FvRE
🖥️ Desktop 1440px
240px (17%)
DESKTOP 1200px app · 240px panel

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources.

What we offer

Books · News · Team · Resources · Pricing · Contact

Get Started

Structure
Inspector
🧩
Widgets
🖼
Media
Layers
🎨
Theme
📐
Layout
History
3
💬
AI Chat
📡
FvRE
🗄
PB
Triggers
🎨 Palette — v4 → v5
SOFTER
bg-page
bg-section
dark-f
dark-w
panel
panel-2
accent
warn
Token v4 (was) v5 (now) Why
accent#4ade80 (neon)#6ee7a8 (mint)Soften, less retina-burn
bg-page#f3f3ed (cool)#f5f5f0 (warm)Warmer, less clinical
bg-dark-f#1a3a1a (saturated)#2d3a30 (muted)Less neon, more "forest"
bg-dark-w#4a3a1a (saturated)#3d2f1f (muted)Less neon, more "earth"
panel-bg#0a0d10 (cold)#14171b (warm)Warmer, less harsh
panel-text#e6e9ef (slight blue)#e8e9eb (neutral)Less color tint
panel-text-2#b0b8c0 (cool gray)#9aa0a8 (warm gray)Warmer, AA contrast on dark
panel-text-3#6a7280 (low contrast)#6a7079 (warmer)Slight warm shift, still muted
warn#f87171 (red)#f4a261 (amber)Less alarm, more "notice"
border#2a3038 (cool)rgba(255,255,255,.08)Subtle, works on any bg
♿ Contrast — WCAG AA everywhere
ACCESSIBLE
15.8:1
AAA · text on page
13.2:1
AAA · text on panel
7.8:1
AAA · muted text
9.4:1
AAA · accent on dark
What changed:
  • All text passes WCAG AA (4.5:1 normal, 3:1 large)
  • All non-text UI passes 3:1 (icons, borders, focus rings)
  • No pure black, no pure white — easier on eyes in low light
  • Accent is a soft mint, not neon — readable for hours
  • Subtle warm tints in all neutrals (no cold blue grays)

What changed in v5 (the visual refresh)

What stays exactly the same

Files updated (mockups as historical record)