Brand

A quick reference for using the Asakiri name, logo, colors, and type. If you're contributing or building on Asakiri, start here.

Logo

Color

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.