Brand
A quick reference for using the Asakiri name, logo, colors, and type. If you're contributing or building on Asakiri, start here.
Logo
Asakiri's mark is a green dew drop lit by a yellow sun, for the morning fog the name comes from. Keep it on its rounded tile, give it room to breathe, and pair it with the wordmark set in IBM Plex Sans. Don't recolor, rotate, or redraw it.
Download logoColor
Green on paper. Brand green carries accents and calls to action, ink is for text, and paper is for backgrounds. Colors are defined in OKLCH, the source of truth; hex is provided for convenience.
Brand
#006435
oklch(0.44 0.115 155)
Brand hover
#005325
oklch(0.38 0.115 155)
Brand ink
#F4FAF6
oklch(0.98 0.008 155)
Accent
#E4C23B
oklch(0.82 0.15 94)
Accent subtle
#FAECB2
oklch(0.94 0.075 96)
Accent text
#573900
oklch(0.37 0.09 82)
Ink
#141D17
oklch(0.22 0.018 155)
Ink 2
#455048
oklch(0.42 0.02 155)
Muted
#4B564E
oklch(0.44 0.018 155)
Paper
#FAFAF6
oklch(0.985 0.006 105)
Paper 2
#F3F2EB
oklch(0.96 0.01 105)
Rule
#E3E3DF
oklch(0.915 0.006 105)
Focus
#004818
oklch(0.34 0.12 155)
Typography
Two typefaces. Newsreader, a warm serif, carries display and headings; IBM Plex Sans handles body text and interface. For Japanese, these pair with Noto Serif JP and Noto Sans JP, falling back to the system Mincho and Gothic faces.
Aa あ
Newsreader
Noto Serif JPJapanese
Display · headings
Aa あ
IBM Plex Sans
Noto Sans JPJapanese
Body · interface & long-form
Voice
Calm and plain
Write simply. Prefer short, direct sentences over jargon and hype.
Explain, don't sell
Respect people's time and intelligence. We're here to teach and to help others teach.
Quietly warm
A little personality is welcome. Reach for restraint before exclamation marks.
Using the name
Asakiri, written 朝霧, means “morning fog” in Japanese. It's one word, with a capital A, and names both the project and the toolkit.
Do
- Write it as “Asakiri”, with a capital A.
- Use the leaf mark and wordmark as provided.
- Link to asakiri.com when referencing the project.
Don't
- Restyle, recolor, or redraw the logo.
- Use the name or logo to imply endorsement or affiliation.
- Stretch, rotate, or add effects to the mark.