Brand

The mark, the wordmark, the violet.

Everything you need to put Shoppex in a video, a thread, a deck or your own store page. Take the files, keep the shapes.

Download the kitAsk about a use

Files

SVG for anything that scales, PNG for everything else.

Every export that exists is linked here. The number on a chip is the pixel size.

App icon

The square avatar: Discord, Telegram, X, GitHub, app stores. Purple is the default; the dark and light versions are for platforms that put an avatar on their own background.

Shoppex purple
PurpleSVG2565121024
Shoppex gradient
GradientSVG256512
Shoppex dark
DarkSVG256512
Shoppex light
LightSVG256512

Mark

The two blocks without the rounded square. Use it where the container already draws a shape, and never below 16 pixels.

Shoppex violet
VioletSVG128512
Shoppex white
WhiteSVG128512

Favicon

The tab icon is the dark app icon, on every Shoppex surface. Browsers scale it down themselves.

Shoppex favicon
FaviconSVG256512

Wordmark

Mark plus name, set in Plus Jakarta Sans. Pick the version for the ground it lands on rather than recolouring one of the others.

Shoppex on dark
On darkSVG400800
Shoppex on light
On lightSVG400800
Shoppex on violet
On violetSVG400800

Palette

One violet and three darks.

The values this site paints with. Nothing else is a Shoppex colour.

  • Brand violet

    #7C3AED

    The mark, and every primary button.

  • Violet 800

    #5B21B6

    End of the gradient icon. Never on its own.

  • Violet 400

    #A78BFA

    Accent words in headlines on dark.

  • Canvas

    #050505

    The page.

  • Elevated

    #0C0C0E

    Cards and panels one step up.

  • Hairline

    #1C1C20

    Every border and rule.

Rules

Five of them.

Short enough to read once. If something you want to do is not covered, ask in Discord and we will say yes or no in a message, not in a form.

  • The name is Shoppex

    Capital S, one word, no space, no hyphen. Not SHOPPEX in running text, not Shoppex.io when you mean the product.

  • Ship the files as they are

    Do not recolour the mark, do not stretch it, do not add a shadow, an outline or a second glyph next to it.

  • Give it room

    Clear space on every side of at least half the height of the mark. Nothing sits inside that box.

  • The wordmark sets the name lowercase

    That is the logo file. In writing it is Shoppex, with the capital.

  • Do not imply we sent you

    Reviews, tutorials, comparisons and "built on Shoppex" are fine. Partner, official and endorsed are not, unless we wrote it down with you.