Brand color system complete. Defined by Tess Adkins, Design Lead, July 2026. All hex values, CMYK builds, tint steps, and WCAG ratios below are authoritative. Do not substitute or derive values outside the approved steps. Modifications require design-lead sign-off.
01 — Core brand colors
Five colors carry the brand. Deep Ocean and Sea Glass do the structural work — every page alternates between them. Bioactive Teal and Solar Gold are reserved for action, never decoration.
Primary Brand
Deep Ocean
#003435
RGB 0, 52, 53
CMYK 99, 29, 51, 82
Dark grounds, hero panels, table headers, footers. The brand's default background.
Secondary Brand
Harbor Teal
#003E44
RGB 0, 62, 68
CMYK 97, 33, 42, 71
Navigation bar, cards and containers layered on Deep Ocean.
Light Ground
Sea Glass
#5AACB4
RGB 90, 172, 180
CMYK 64, 9, 28, 7
Full-bleed light sections, highlight bands, packaging fields. Pair with Deep Ocean type only.
Primary Action
Bioactive Teal
#00A2A0
RGB 0, 162, 160
CMYK 78, 4, 38, 10
Primary buttons, links, active states. The most saturated teal — use sparingly.
Accent / Conversion
Solar Gold
#ECBE43
RGB 236, 190, 67
CMYK 10, 26, 84, 0
Commerce CTAs, Maine-origin badges, key stats. One gold element per screen — maximum.
02 — Structural & neutral colors
These do the quiet work: separating data, holding long-form copy, and keeping the teals from flattening into one another.
Structural Mid-Tone
Marine Teal
#009791
RGB 0, 151, 145
CMYK 80, 8, 43, 14
Data table headers, rules on dark, eyebrow labels. Not a button color.
Neutral Ground
Sea Salt
#F8F6F6
RGB 248, 246, 246
CMYK 4, 3, 3, 0
Page background under light sections, FAQ fields, alternating table rows.
Neutral
Pure White
#FFFFFF
RGB 255, 255, 255
CMYK 0, 0, 0, 0
Benefit cards, white space around science copy, reversed logo field, label stock.
Borders & Rules
Mist
#E2E6E6
RGB 226, 230, 230
CMYK 13, 8, 9, 0
Card outlines, table rules, input borders on light. Never used as a fill for type.
Body Type
Deep Ink
#153638
RGB 21, 54, 56
CMYK 95, 43, 52, 76
All body copy and headlines on light grounds. A warmer near-black than pure #000.
03 — Function & UX colors
Screen only. These are not brand colors and never appear in packaging, print, or campaign work. Each has a text-weight value and a background tint so states read clearly without introducing a new hue family.
Success
Kelp Green
#157F55
Tint: #E8F4EE
RGB 21, 127, 85
Order confirmed, subscription active, in-stock. 5.0:1 on white — safe for small text.
Error
Signal Coral
#B23A2E
Tint: #FBEAE8
RGB 178, 58, 46
Form errors, failed payment, out of stock. The palette's true complement to teal.
Warning
Amber Deep
#7A5A10
Tint: #FCF5E3
RGB 122, 90, 16
Low stock, dosage cautions, shipping delays. The legible text weight of Solar Gold.
Info
Tide Info
#006B6B
Tint: #E6F3F4
RGB 0, 107, 107
Feeding guidance, ALA/DHA footnotes, help text. A darkened Bioactive Teal.
Subscription active — ships every 30 days.
Enter a shipping address to continue.
Introduce over 5 to 7 days before full serving.
Conversion rate from ALA to DHA is under 5%.
04 — Color ratio
Measured from the approved Equine landing page. The rhythm is a wide alternation between Deep Ocean and Sea Glass, broken by white space for the science copy. Accent colors together occupy roughly two percent — that scarcity is what makes a gold button read as the one thing to click.
25% Sea Glass
23% White
19% Deep Ocean
14% Sea Salt
9%
5%
3%
2%
Harbor Teal — containers on dark
Marine Teal — data structure
Bioactive Teal — actions
Solar Gold — one moment per screen
05 — Approved tints
Use these fixed steps rather than opacity. Screen-blended transparency shifts hue over photography and produces inconsistent builds in print.
Bioactive Teal
Solar Gold
06 — Typography
Two typefaces, two roles. Outfit for display and headlines; Inter for body and UI copy. Mono is reserved for code, hex values, and technical labels only.
Display — Outfit / "Avenir Next"
Whole-cell marine microalgae, grown in Maine.
font-family: "Outfit", "Avenir Next", -apple-system, "Segoe UI", sans-serif · weights 300–700
Body — Inter
The source determines the benefits. There are three categories of omega-3 products in the market today, and they differ meaningfully in bioavailability and sustainability footprint.
font-family: "Inter", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif · weights 400–700
Monospace — SFMono-Regular / Consolas
--ps-ocean: #003435; --ps-gold: #ECBE43;
font-family: "SFMono-Regular", Consolas, "Roboto Mono", monospace
07 — Accessibility: approved text pairings
WCAG 2.1 contrast ratios, measured. AA requires 4.5:1 for body copy and 3:1 for text at 24px or larger. Veterinary and dosing information must always clear AA.
| Text color | Background | Ratio | Approved for |
|---|
| Pure White | Deep Ocean | 13.6:1 | AAA All type sizes |
| Pure White | Harbor Teal | 11.9:1 | AAA All type sizes |
| Deep Ink | Sea Salt / White | 12.1:1 | AAA All type sizes |
| Solar Gold | Deep Ocean | 7.8:1 | AAA All type sizes |
| Deep Ocean | Solar Gold | 7.8:1 | AAA Gold buttons — use dark type, never white |
| Deep Ocean | Sea Glass | 5.2:1 | AA All type sizes |
| Sea Glass | Deep Ocean | 5.2:1 | AA Eyebrows, captions, links |
| Bioactive Teal | Deep Ocean | 4.3:1 | AA Large 24px+ only |
| Pure White | Marine Teal | 3.6:1 | AA Large Table headers, 19px+ bold |
| Pure White | Bioactive Teal | 3.2:1 | AA Large Buttons at 16px+ semibold |
| Pure White | Sea Glass | 2.6:1 | Fails Substitute Deep Ocean type on Sea Glass |
| Pure White | Solar Gold | 1.8:1 | Fails Never use white on Solar Gold |
08 — Application examples
Buttons follow a strict hierarchy: teal moves people through the site, gold asks for the purchase, outlined buttons are always secondary to a filled one on the same screen.
Commerce CTA
Shop equine formula
Secondary on dark
Find a distributor
Dark section
Deep Ocean ground, white headline, Sea Glass supporting copy. Cards sit one step lighter in Harbor Teal.
Whole-cell marine microalgae, grown in a sealed axenic system in Maine.
Light section
Sea Glass ground with Deep Ocean type — never white type. Cards drop to white at 90% for separation.
The source determines the benefits. Three categories in the market today.
09 — Rules
Applies to web, packaging, trade print, and veterinary sales material.
Do
- Alternate Deep Ocean and Sea Glass in wide, full-bleed bands — the page should feel like tide lines.
- Set type on Sea Glass in Deep Ocean or Deep Ink only.
- Keep Solar Gold to one element per screen so it always means "buy" or "made in Maine."
- Reverse the logo to white on any teal at 50% strength or darker.
- Use the fixed tint steps for hover, disabled, and layered states.
- Confirm CMYK builds against a press proof before a packaging run — deep teals shift on uncoated stock.
Don't
- Set white body copy on Sea Glass — it measures 2.6:1 and fails accessibility at every size.
- Put white type on Solar Gold, including inside badges and price flags.
- Use Bioactive Teal as a large background field; it competes with Sea Glass and reads synthetic.
- Introduce a second accent hue. The palette has one warm color by design.
- Use the function colors in packaging, campaign, or editorial work.
- Apply gradients between the teals, or drop shadows tinted anything but Deep Ocean.
10 — CSS token reference
| Token | Value | Role |
|---|
| --ps-ocean | #003435 | Deep Ocean — primary brand, dark grounds |
| --ps-harbor | #003E44 | Harbor Teal — navigation, cards on dark |
| --ps-seaglass | #5AACB4 | Sea Glass — light ground sections |
| --ps-bioactive | #00A2A0 | Bioactive Teal — primary buttons, links |
| --ps-gold | #ECBE43 | Solar Gold — commerce CTAs, one per screen |
| --ps-marine | #009791 | Marine Teal — table headers, eyebrow labels |
| --ps-salt | #F8F6F6 | Sea Salt — page background, form fields |
| --ps-white | #FFFFFF | Pure White — cards, white space |
| --ps-mist | #E2E6E6 | Mist — borders, table rules, input outlines |
| --ps-ink | #153638 | Deep Ink — body copy and headlines on light |
| --ps-body | #3B4E4F | Body — secondary text on light grounds |
| --ps-success / --ps-success-tint | #157F55 / #E8F4EE | Kelp Green — success / confirmed states |
| --ps-error / --ps-error-tint | #B23A2E / #FBEAE8 | Signal Coral — error / blocking states |
| --ps-warn / --ps-warn-tint | #7A5A10 / #FCF5E3 | Amber Deep — warning / caution states |
| --ps-info / --ps-info-tint | #006B6B / #E6F3F4 | Tide Info — informational / help states |
| --font-display | "Outfit", "Avenir Next", sans-serif | Display and headline typeface |
| --font-body | "Inter", Helvetica, sans-serif | Body and UI typeface |
| --font-mono | "SFMono-Regular", Consolas, monospace | Code, hex values, technical labels |
11 — Logo set
2026 logo refresh. Source files: docs/clients/PhytoSmart/logos-2026/. Portal copies: assets/logos/. Icon mark colors: #5BABB3 (teal), #C6E0DB (mint), #013E44 (navy) — these also seed Bloom! game cell colors.
Wordmark — full color, dark backgrounds
logo-wordmark-white.svg
Nav / pure black bg
logo-wordmark-white-primary.svg
Brand navy / dark teal bg
logo-wordmark-white-secondary.svg
Deep teal / mid-dark bg
Wordmark — full color, light backgrounds
logo-wordmark-black.svg
White / light backgrounds
Wordmark — single color
logo-wordmark-single-white.svg
Reversed / embossed / screen print
logo-wordmark-single-black.svg
1-color print / dark ink
Icon mark — full color
icon-rgb-white-primary.svg
Black bg
icon-rgb-white-secondary.svg
Dark teal bg
icon-rgb-black.svg
Light bg / favicon
Icon mark — single color
icon-single-white.svg
Reversed / embossed
icon-single-black.svg
1-color print
12 — Component conventions
- Announcement barDeep Ocean background, uppercase, italic, per-page message
- Header / NavSticky, Harbor Teal background, logo left, nav links center, account right; production reuses the live theme header
- ButtonsPrimary = Bioactive Teal; Commerce CTA = Solar Gold with Deep Ocean type; Ghost = outlined on page color; never white type on gold
- CardsPure White background, Mist border (1px), soft shadow, 16px radius; on Deep Ocean sections use Harbor Teal cards
- Section rhythm72px vertical padding, alternating Deep Ocean and Sea Glass bands — never two adjacent same-hue bands
- FormsSea Salt background, Mist input borders, 12px radius; focus state: Bioactive Teal border
- Table headersMarine Teal background, white type at 19px+ bold (3.6:1 — AA Large)
- Equine sub-brandDeep Ocean primary surface, Sea Glass for supporting CTA copy, Solar Gold for the pre-order action — mirrors the packaging colorway
- FooterDeep Ocean background (preferred) or Sea Salt; four columns, newsletter, legal disclaimer strip above
13 — Known deviations from the live site
Mobile navigation
Nav is hidden below 900px in mockups with no hamburger menu. Production uses the theme's mobile nav (see Gap Analysis GAP-008). Do not copy the mockup header into production as-is.
Typefaces
Tess Adkins' color system specifies Outfit (display) and Inter (body). The portal uses DM Sans as a stand-in. Confirm with Tess before implementing the final font stack — the live site may have different fonts already in place.
Logo and product imagery
Hotlinked from the live site for review fidelity. Production must serve local assets.
CMYK for print and packaging
CMYK values are converted for coated stock (FOGRA39). Confirm Pantone equivalents against a physical guide before any production run. Deep teals can shift significantly on uncoated stock.
Design Review Portal
