Darden.com rebuild · Editor color palette

The color mapping proposal, and two questions

From the sprint planning call: editors pick from the brand guide's colors only, and the colors left over from the old site come out of the picker. Most of those leftover colors were never editor choices anyway. The old theme applies them itself, to headings, links, buttons, divider lines, and the header and footer. That means we can go further than the picker: as part of the migration, every legacy color can be mapped to a brand color, and the site conforms fully to the current brand guide. Below is that mapping. Most of it is shown for visual confirmation; two items need a decision.

What we're asking the group to decide
  1. Links: pick teal's replacement, the 40 percent darker Exquisite or the brand red. Question 1
  2. Dark divider lines: confirm Smoky as the replacement. Question 2
Everything else on this page is a straightforward mapping, shown for visual confirmation.
The decision from the call

What was agreed

Keep
Primary brand colors from the current Darden Brand Style Guide.
Keep
Secondary brand colors as defined in the same guide.
Remove
Legacy colors as editor options. Colors from the old build that aren't in the current guide don't appear in the picker.
Replace
Legacy grays standardize to grays that are already in the brand guide.
What editors see

The palette

Eleven options: white plus the five primary and five secondary colors from the brand book, using the book's own names.

Primary
Base#FFFFFFPage background
Darden#8B0E04Brand red, headers, active states
Smoky#4B4F54Body text and headings
Rich#070710Near-black
Delicate#E7E9EASurfaces, gray boxes, rules
Nourishing#BBA8A5Warm taupe neutral
Secondary
Fresh#90A454Green accent
Decadent#D0B669Gold accent
Delightful#DE6335Orange accent
Savory#D2342EBright red, primary button fill
Exquisite#38839EBlue, link color
The proposal

Where each legacy color's job goes

None of these were picked by editors. The old theme applies them itself: the dark red to section titles and component headings, teal to links, the mid gray to the header and footer, and the lighter grays to divider lines. Removing a legacy color just means the rebuilt theme uses a brand color for the same job. Role by role:

Clear wins
Old web red#8B1109
Darden#8B0E04
The red heading and section-title treatment, active states, bullets and quotes. Visually identical; the current guide's value takes over everywhere.
Button red#BF2E38
Savory#D2342E
The main button color becomes a real brand color. White button text still passes the contrast requirement (4.92, the old fill was 5.73).
Salmon#FF968F
Removed outrightno replacement needed
Not found anywhere in the production database. Its only uses were hover states in the old theme's stylesheets, so nothing depends on it.
Header and footer gray#757C84
Smoky#4B4F54
The old header and footer gray is not in the brand guide; Smoky is the brand's own dark neutral. It also repairs a long-standing issue: white footer text on the old slate fell short of AA (4.22), on Smoky it passes comfortably (8.25).
Surface gray#F6F6F6
Delicate#E7E9EA
Light box fill to light box fill; the brand neutral takes over cleanly.
Light divider lines#D7DADD
Delicate#E7E9EA
A hairline stays a hairline; the difference is invisible in practice.
Needs a call
Teal links#58ADAF
Exquisite#38839E
Question 1  The natural family match, but it falls just short of the contrast requirement for link text. Candidates below.
Dark divider lines#979797
Smoky (proposed)#4B4F54
Question 2  Mapping these to Delicate too would make the site's stronger section dividers nearly invisible. We suggest Smoky; a divider doesn't need to match the old gray, it needs to do the old job.
Question 1

What should links be?

Links are the highest-traffic color decision on the site. The old teal failed contrast badly (2.62 against a 4.5 requirement), which is part of why it's going. Exquisite is the natural brand replacement, but as-is it lands at 4.28, just under the line. The brand guide gives us two ways out: it allows secondary colors to be darkened by 40 percent, or we can use a primary color instead. Rendered on white:

Link candidates, shown on the site's white background

The trade-off to weigh: the darker Exquisite keeps links clearly distinct from the red used on headings and buttons, and stays closest to the cool link color visitors are used to. The brand red is the strongest brand statement, but it risks blurring the line between "this is a link" and "this is a heading." Whichever is chosen, the hover state gets defined alongside it as a darker step of the same color.

Question 2

Dividers: one gray or two?

The current site uses two kinds of divider lines: a clearly visible gray between major sections, and a faint one inside menus and lists. The straightforward standardization sends both to Delicate, but that effectively deletes the stronger tier. Side by side:

Today's site

Leadership

Rick Cardenas, President and CEO. Darden's leadership team guides eleven brands.


#979797 (strong)

Our Purpose

To nourish and delight everyone we serve.


#D7DADD (hairline)

Careers, investor relations and press contacts.

Everything Delicate

Leadership

Rick Cardenas, President and CEO. Darden's leadership team guides eleven brands.


#E7E9EA (was #979797)

Our Purpose

To nourish and delight everyone we serve.


#E7E9EA (was #D7DADD)

Careers, investor relations and press contacts.

Proposed: two styles

Leadership

Rick Cardenas, President and CEO. Darden's leadership team guides eleven brands.


Smoky #4B4F54 ("strong")

Our Purpose

To nourish and delight everyone we serve.


Delicate #E7E9EA ("subtle")

Careers, investor relations and press contacts.

The proposal: give the separator two styles, Subtle (Delicate) and Strong (Smoky), both brand grays, and long pages keep their section structure. Smoky is deliberately darker than the old gray; a divider doesn't need to match the old color, it needs to separate sections, and staying inside the brand palette is the point of this exercise. If Smoky reads too heavy in practice, Nourishing (the warm taupe) is the softer brand-approved fallback.