SubjectYokko Lab SiteDesign

Why I built the Yokko Lab palette around Forest Green

A look at why I chose #16a34a as the accent, how supporting greens fill in the gaps, and how the neutral tones quietly support long-form reading.

3 min read
  • palette
  • branding
  • color-theory

Columns is for longer pieces on AI, technology, design, and marketing — one theme at a time. I open the series with my own site palette because the intent behind every choice is right here in the implementation, which makes it a good warm-up before turning the lens outward.

The base accent

The Yokko Lab site runs on white with a forest green axis. I picked #16a34a because it sits in the band where "nature," "growth," and "calm" overlap.

  • Forest GreenAccent
  • Deep PineAccent Hover
  • ConiferOn Accent BG
  • Soft LimeAccent Soft
The four-step accent ramp covering links, hovers, tags, and dark-on-accent text.

One accent shade is never enough. I add #15803d for the slight sink on hover, #14532d for readable text on the accent background, and #22c55e for a softer overlay. Together they let me swing between assertive and gentle.

Neutrals beside the accent

The more distinct the brand color, the more carefully its neutrals need to be tuned. Yokko Lab's neutrals avoid cool blue and lean a degree or two warm.

  • PageBG Primary
  • PaperBG Reading
  • BeigeInline Code
  • CreamCode Block
Four neutrals for surfaces, reading, and code. Avoiding cool grays keeps green from looking out of place.

#fbfbf8 (Paper) is the candidate background for article surfaces, and #f4f1ea (Beige) backs inline code. By avoiding cool grays I keep the forest green from feeling like a foreign accent.

Text hierarchy

I hold text colors to three steps.

  • PrimaryBody
  • SecondaryLead / Sub
  • FaintDate / Meta
Primary, secondary, and faint, all clearing WCAG AA contrast.

#4a4a4a is set a hair darker than the common #525252. That single percent in long-form bodies adds up to noticeably less eye fatigue.

Takeaways

  • A single accent always cracks under hover/tag/dark-on-accent stress — plan a four-step ramp
  • Warm-leaning neutrals help green-family accents recede into context
  • For Japanese long-form, #4a4a4a lands better than the default mid-gray

The next column may step beyond design — AI, technology, or marketing topics are also fair game in this series.