motif.

Motif is a color palette I created for my own use, as well as the project I use to automatically apply it to various software.
# meta

well, the color scheme itself is originated from this exact website, the one currently you presumably are on… but I liked it so much I ported the palette to my Forgejo and Navidrome instances. the source code itself for the palette spec and the tools I use for generating the palette for varied software is available at git.celikci.me/egecelikci/motif.

WCAG 2.2 AA. Every text/background pair a target ships must meet 4.5:1, and UI borders and non-text indicators 3:1. Legibility comes first when the two conflict.

palette

light

9 tokens

  • bg

    page background

    #fef6e4

  • surface

    raised surfaces: cards, menus, popovers

    #f3e1d8

  • text

    primary body text

    #172c66

  • textMuted

    secondary text, placeholders, timestamps (verified against every surface a target ships)

    #45527e

  • border

    dividers and input borders

    #f3d2c1

  • borderHover

    input border on hover/focus

    #e3b79d

  • primary

    brand accent: links, primary buttons, focus

    #a60c49

  • primaryOffset

    primary hover/pressed

    #8a0a3d

  • secondary

    supporting accent

    #2d6a7a

dark

9 tokens

  • bg

    page background

    #3a2a55

  • surface

    raised surfaces: cards, menus, popovers

    #4a3a6a

  • text

    primary body text

    #e8e2f3

  • textMuted

    secondary text, placeholders, timestamps (verified against every surface a target ships)

    #d0c8e8

  • border

    dividers and input borders

    #52427a

  • borderHover

    input border on hover/focus

    #6b5794

  • primary

    brand accent: links, primary buttons, focus

    #ff8e8c

  • primaryOffset

    primary hover/pressed

    #ef5a58

  • secondary

    supporting accent

    #abd1c6