odabed Brand Guide

Simple guidance for using the odabed visual system: colors, gradients, and UI examples.

Primary (Emerald/Teal)

P0#eff6ff
P1#dbeafe
P2#bfdbfe
P3#93c5fd
P4#60a5fa
P5#3b82f6
P6#2563eb
P7#1d4ed8
P8#1e40af
P9#1e3a8a

Accent (Amber)

A0#fffbeb
A1#fef3c7
A2#fde68a
A3#fcd34d
A4#fbbf24
A5#f59e0b
A6#d97706
A7#b45309
A8#92400e
A9#78350f

Neutrals (Warm)

N0#ffffff
N1#fafaf9
N2#f5f5f4
N3#e7e5e4
N4#d6d3d1
N5#a8a29e
N6#78716c
N7#57534e
N8#44403c
N9#1c1917

Gradients

Buttons

Usage Notes

  • Use Primary for actions and navigation highlights; Accent for emphasis or status badges.
  • Prefer warm neutrals for surfaces to keep the brand distinct from default grey UIs.
  • Gradients should be subtle; avoid more than two strong gradients within a single viewport.