Herd: red as light, not paint

Mockups for the proposed system. Primary actions go neutral and theme-inverting (the portal login direction), red stays as glow, logo, and links, and destruction gets its own crimson. Values come from the cross-repo audit; the neutrals carry a faint red cast so the UI stays Herd even without red fills.

Sign in — today vs. proposed

Same card, one change. White on #F61500 is 4.2:1 and fails WCAG AA; the inverting CTA is ~16:1 in both modes. The red survives as the "Forgot?" link, the footer link, and the logo.

Light · today

4.2:1 — fails AA. Reads as a warning.

Light · proposed

16:1. Visible oxblood #3E100C, red only as accent.

Dark · today

Saturated red vibrates on dark surfaces.

Dark · proposed

16:1. Blush white #F6EEEB on #161314; hover ignites to pure white.

The button system

Three roles, three shapes. Destructive actions rest as an outline and only turn solid crimson (#E5484D) on the confirm step — never the brand red, so "Remove site" and "Upgrade to Pro" can't be confused again.

Light
Primary
Secondary
Destructive→ on confirm →
Dark
Primary
Secondary
Destructive→ on confirm →

Where red still lives

Red illuminates instead of filling: the logo glows, links and small accents stay red, and focus is a warm glow — not a red border, which reads as a validation error. Upsell moments (the macOS onboarding/Pro flows) keep the brand via the glow while the CTA goes neutral.

Light

Herd Pro

Dumps, mail testing, log viewer, and the dump server — built in.

herd.test
herd.test
Dark

Herd Pro

Dumps, mail testing, log viewer, and the dump server — built in.

herd.test
herd.test

In the devtools widget

Today the widget spends three different reds (#F61500, #DC2626, #EF4444) on four jobs: Send, active tab, focus ring, and the error state. Proposed: Send goes neutral, the active tab uses ink, the logo keeps the red — and Stop/delete standardize on the crimson the widget already uses for destruction.

Today
Herd AI
ChatLogsVite
Why is laravel.test returning a 502?
nginx can't reach PHP-FPM 8.4 — the pool socket is missing. Want me to restart the service?
Reply…

Red tab, red Send, red focus, red errors — one hue, four meanings.

Proposed
Herd AI
ChatLogsVite
Why is laravel.test returning a 502?
nginx can't reach PHP-FPM 8.4 — the pool socket is missing. Want me to restart the service?
Reply…

Brand lives in the glowing logo; Stop-while-generating becomes #E5484D.

In the Windows app

Today the primary CTA (#F8332B) and the delete button (#DC2626) render side by side as two nearly identical reds. The Pro badge stays red in the proposal — small, branding, no action attached.

Today
HerdPro
GeneralSitesPHP
laravel.testPHP 8.4
blog.testPHP 8.3

Spot the destructive one.

Proposed
HerdPro
GeneralSitesPHP
laravel.testPHP 8.4
blog.testPHP 8.3

Action and destruction can't be confused; the crimson goes solid only on confirm.

In the macOS app

Day-to-day chrome already follows the user's system accent — deliberately — so red-as-CTA only shows up in onboarding, What's New, and the Pro/license flows. The proposal keeps the system-accent behavior untouched: the glow carries the brand, the button goes neutral, and toggles stay whatever the user picked.

Today

Welcome to Herd

PHP and nginx are ready. Let's set up your first site.

Start Herd at login

Red glow + red button + system-blue toggle: two accent systems in one window.

Proposed

Welcome to Herd

PHP and nginx are ready. Let's set up your first site.

Start Herd at login

Glow = brand, button = action, toggle = the user's accent. Each color has one job.

The marketing exception

One red fill per marketing page. Promotional context, no delete buttons nearby — red reads as energy here, not danger. Inside the apps and portal: zero red fills.

herd.laravel.com

One-click PHP development environment

PHP, nginx, dnsmasq and Node — installed and kept up to date for you. Native on macOS and Windows.

Tokens

The decisions to make once, centrally. Five brand reds currently ship across the four repos — exactly one should win.

Brand red — pick one, retire the rest

#F61500
devtools token; website comments call it canonical
#F9332B
macOS literal + website Tailwind
#F41922
Windows "laravel-red"
#FC504A
dark-mode companion (portal has it already)

Primary CTA — theme-inverting pair

Aa
#3E100C / #FFFFFF
light mode · 16:1 · hover #521A12
Aa
#F6EEEB / #161314
dark mode · 16:1 · hover #FFFFFF

Danger — cooler crimson, never shares a value with brand

Aa
#E5484D
destructive confirm (devtools uses it today)
Aa
#D93036
hover / active

Warm neutrals — red in the DNA, light

#FAF8F7
paper
#FFFFFF
card
#E9E2E0
line
#6F6360
secondary text
#2A0A08
ink

Warm neutrals — dark

#141112
paper
#1D191A
card
#2E2829
line
#A79C9D
secondary text
#F4F0F0
ink