Brand kit

Marks, colors, and type. The palette is built from traditional Japanese colors: woodblock blues, pigment greens, earth-toned accents.

Logos Colors Type

Logos

Marks

Self-hosted brand marks. SVG and PNG for web; EPS where available for print. The Surmado originals also live on surmado.com.

Surmado full logo (light background) SVG · EPS
Surmado full logo (dark background) SVG · EPS
Surmado wordmark (light background) SVG
Surmado wordmark (dark background) SVG
Surmado icon (light background) SVG
Surmado icon (dark background) SVG
Surmado one-color logo SVG
Scoobert Doobert logo · Grizzard Graphics PNG · EPS
LOVE y? mark · Grizzard Graphics PNG
Love Music More logo · Grizzard Graphics PNG

Colors · his personal brand colors

1: Green (primary)

The primary brand color, from the site homepage. Forest is the dark anchor; verdigris is the lighter shade for tints and accents.

Forest #1F332B forest · 深緑 fukamidori Primary brand color, from the site homepage.

Verdigris #3E8E6E verdigris · 緑青 rokushō Interactive tint and accents. The woodblock verdigris pigment.

Pine #2F453A --pine · 松葉 matsuba Secondary green (web).

Olive #4C5242 --olive Body text and utility green (web).

2: Blue (secondary)

All the blues come from Japanese woodblock prints, not a generic web-blue: the Prussian blue (ベロ藍, bero-ai) and indigo (藍, ai) Hokusai used in The Great Wave.

Deep Sea #002A41 deepSea · 紺 kon Near-black indigo. Gradient base, shadows, contrast text.

Ocean #1F5E8C ocean · ベロ藍 bero-ai Prussian blue. Powers the Deep Sea app theme.

Ukiyo blue #245070 ukiyoBlue · 藍 ai Woodblock slate. Links and quiet emphasis.

Mist #7FA8B6 mist · 水浅葱 mizu-asagi Pale highlight, hairlines, soft fills.

3: Accents

Used sparingly: gold for calls to action, plus two rarer warm accents.

Gold #F8B500 gold · 山吹 yamabuki Calls to action (apps). Muted brass 金茶 #B89058 on the web.

Rust #9E4B3A --rust · 弁柄 bengara The red iron-oxide of prints and torii. Rare (web).

Jacaranda #6E6597 --jacaranda · 藤 fuji Wisteria violet. Rare accent, used once (web).

Surfaces

The website uses warm paper; the apps use cool paper over dark themes. Green ties the two together.

Web: warm Rice-paper #F4EEDD · ink #111714.

Apps: cool Paper #EFF9FE over dark themes · ink #071D2B.

Type · by purpose

Three typefaces, by purpose

One typeface per purpose: Literata for reading, Fraunces for display, Inter for UI.

Display → Fraunces

Answer for it.

Hero words, large titles, and display type. The app default.

Prose → Literata

A serif for reading at length: essays, definitions, and long-form pages.

Website body and long-form text.

UI → Inter

Settings · Log a set · 12:04 · 87 kg · Continue

App chrome, controls, onboarding, and numbers.

Japanese (/jp) pairs Noto Serif JP with Literata.

Full spec and tokens: the design system's STYLE-GUIDE.md.