Tokens / Colors

Theming Strategy

Our palette is built on the Power Duo: Structural Black and Electric Orange.

Action Power

Electric Orange (#FF5F00) is used sparingly for primary interactions, notifications, and critical brand moments.

Structural Power

Brand Black (#000000) provides the professional foundation and high-contrast environment for our interface.

Brand Colors (The Power Duo)


Brand Black
#000000 --color-brand-black
Electric Orange
#FF5F00 --color-brand-orange
Pure White
#FFFFFF --color-white

Neutrals (The Canvas)


Gray 100
#F3F4F6 --color-gray-100
Gray 300
#D1D5DB --color-gray-300
Gray 500
#6B7280 --color-gray-500
Gray 700
#374151 --color-gray-700
Gray 900
#111827 --color-gray-900

UI Mapping

How these tokens are applied to the interface logic.

Token Mapped To Preview
--color-text-header Brand Black
--color-btn-primary Brand Black
--color-bg-sidebar Brand Black