ShopStack — Brand Board v2

01

Logo & Brand Identity

Dark Background

Light Background

Accent / Purple Background

Monochrome

Inverted

Symbol Only

On Gradient

Clearspace — min. 24px exclusion zone

← 24px → ← 24px → ← 24px → ← 24px →

ShopStack

Min. logo width: 80px

Min. icon: 24×24px

Clearspace: 24px all sides

= cap-height of "S"

Logo Don'ts

✕Recolour the logo

✕Stretch or distort proportions

✕Add drop shadow to logo

✕Use BroshK for body text

✕Place on low-contrast backgrounds

BroshK — logo font by Roman Panchenko · commercial licence · wordmark use only · UI: Inter · Code labels: JetBrains Mono

02

Color Palette

Base

#0A0A0F

Background

Accent

#5C22F4

CTA · Primary

Hover

#7040F8

Hover state

Text

#F8FAFC

Main text

Muted

#94A3B8

Labels · sub

Colors in Context — how they work together

White on Accent Get Started Free CTAs · primary buttons

Muted on Glass Plugin Name Cards · panels · overlays

Text on Base shopstack.eu Main content areas

Tint on Accent E-commerce Tags · glass buttons

Brand Gradient ShopStack Heroes · app icons · merch

Primary · 135°

Deep · 135°

Radial Glow

03

Typography System

Logo · BroshK	BroshK · 32 · logo only
H1	64 / 900 / −0.05em
Heading 2	40 / 800 / −0.04em
Heading 3	24 / 700 / −0.02em
Heading 4	18 / 600 / −0.01em
Body text — 15px. ShopStack powers your e-commerce stack with composable, developer-first plugins.	15 / 400 / 1.7lh
Small / Caption · metadata and timestamps	13 / 400
CTA BUTTON LABEL	13 / 600 / +0.04em
EYEBROW · SECTION LABEL	Mono · 10 · +0.16em

BroshK — Logo font

Aa

Commercial licence · wordmark & display only

Inter — UI & Body

Aa

Light 300 Regular 400 Medium 500 SemiBold 600 Bold 700 ExtraBold 800 Black 900

JetBrains Mono — Code & Labels

Aa

HEX values · px specs · code labels · data

04

Spacing Scale — Design Tokens

4

xs

8

sm

12

md

16

lg

24

xl

32

2xl

48

3xl

64

section

80

hero

micro

icon gap

inline

component

card pad

section pad

block gap

page pad

hero gap

Border Radius Tokens

2pxnone

4pxsm

8pxmd

12pxlg

16pxxl

24pxcard

999pxpill

05

UI Components

01 — Solid · No gradient

bg: #5C22F4 (solid, no gradient)
hover: #7040F8 + glow shadow
radius: 999px · 13px / 600
disabled: opacity 0.38

02 — Glassmorphism

bg: accent/10% · backdrop blur(8px)
border: accent/30%
hover: bg/20% + border/50%

03 — Outline / Ghost

bg: transparent
border: white/12%
hover: white/4% fill

Glass Card

Plugin

Checkout Optimizer

Reduce cart abandonment by up to 38% with AI-powered checkout flow analysis.

v3.1.0 LIVE

Tags & Status

E-commerce Live Beta New

Input Field

06

Brand Mockups

Business Card

Alexander W.

Head of Product

[email protected]
shopstack.eu
+421 900 000 000

ShopStack

Front · 85×54mm

Back · brand accent

App Icon — iOS / Android

iOS Home Screen

Sizes

16×16 · favicon

32×32 · browser tab

60×60 · iOS App

80×80 · Android

Merch — Mug

ShopStack

330ml · dark gloss ceramic

Merch — Tote Bag

ShopStack

Natural canvas · screen print

Email Signature

From: [email protected]
Subject: ShopStack plugin update v3.1

Alexander W.

Head of Product · ShopStack

[email protected]

shopstack.eu

+421 900 000 000

Light background · used in email clients

Social Media · Instagram 1080×1080

Dark · accent · square format

Exterior Signage — Real Environment

ShopStack

07

Brand Voice & Tone

Brand Personality

Developer-first

Technical, precise, no fluff. Respects the intelligence of builders.

Direct & Confident

Short sentences. Active voice. Claims are backed by numbers.

Calm & Premium

No hype. No exclamation marks in headlines. Linear.app energy.

Voice Examples — Do & Don't

✓ Do

"Works out of the box. Configure in 2 minutes."

✗ Don't

"Revolutionary AI-powered solution for your amazing store!"

✓ Do

"38% fewer abandoned carts. Measured across 1,200 stores."

✗ Don't

"Dramatically boost your conversions to the next level today!"

✓ Do

"One line of code. Full checkout control."

✗ Don't

"Super easy seamless integration with tons of great features!"