Brand System · Hexabinar Insight
Teal vs Green: Role Separation in Hexabinar’s Brand System
4–6 min read · Published by Hexabinar Brand & Design Engineering
Color is a contract with users. At Hexabinar, we keep teal and green strictly separated by role: teal signals data and navigation, while green signals the primary action. This clarity scales across apps, improves accessibility, and lifts conversion by reducing hesitation.
Why role separation matters
- Predictability: users learn once; behavior becomes intuitive across surfaces.
- Accessibility: color roles pair with contrast and focus tokens for perceivable actions.
- Hierarchy: visual weight focuses attention where it drives outcomes.
Token definitions
- Teal (data/link accents): links, navigational cues, secondary indicators, charts.
- Green (primary CTA): principal buttons, confirm actions, success states.
- Neutral system: text, surfaces, borders—kept calm to let accents work.
Usage rules
- Never mix roles: do not use teal for primary CTAs or green for navigational links.
- Reduce ambiguity: one primary CTA per view; demote secondary actions.
- State clarity: hover/active/disabled states defined by tokens, not ad‑hoc colors.
- Charts & data: prefer teal families; reserve green for “go/success” semantics.
Accessibility by default
- AA contrast for text/UI on both accents; AAA for small text where feasible.
- Visible focus rings on all actionable elements; no outline removal.
- Reduced‑motion variants of hover/press states (150–250 ms default durations).
Governance & scale
- Semantic tokens (e.g.,
accent.link,cta.primary) map to teal/green across themes. - Design reviews check role misuse; lint rules catch color drift in code.
- Campaign themes may vary shades—roles remain constant.
Impact
- Faster task completion as users spot the primary action reliably.
- Lower cognitive load in data‑dense views; teal anchors navigation and reading flow.
- Brand coherence across products and seasons.
What’s next
We’re enriching token analytics to track CTA placement and link discoverability, and extending role separation to sound/vibration cues in multimodal contexts.