StoreHubWeb Kit

StoreHub Web Kit

Foundations for landing pages that feel unmistakably StoreHub.

Light-first, responsive building blocks for consistent marketing pages. Every visual value below comes from the shared brand tokens.

01 - Colour

Brand, accents, and tint ramps

Use StoreHub Orange as the primary accent and StoreHub Black for readable text.

StoreHub Orange--sh-orange
Bold Orange--sh-bold-orange
Azure--sh-azure
Pink--sh-pink
StoreHub Orange100% to 10%
100
80
60
40
20
10
Bold Orange100% to 10%
100
80
60
40
20
10
Azure100% to 10%
100
80
60
40
20
10
Pink100% to 10%
100
80
60
40
20
10
StoreHub Black100% to 10%
100
80
60
40
20
10

02 - Gradients

Three harmonious blends

These are the only approved gradients. Keep them as occasional emphasis.

OrangeBold Orange to StoreHub Orange--sh-gradient-orange
SunsetBold Orange to Pink--sh-gradient-sunset
DuskPink to Azure--sh-gradient-dusk

03 - Typography

A clear, disciplined hierarchy

Barlow is for headlines. Open Sans is for body copy and interface text.

Display Barlow Black - 900

Run your business better.

H1 Barlow Black - 900

Everything you need to grow.

H2 Barlow ExtraBold - 800

Built for ambitious businesses.

H3 Barlow Bold - 700

Make every customer count.

Sub Barlow Semibold - 600

Simple tools, thoughtful support, stronger growth.

Body Open Sans Regular - 400

Bring sales, customers, and operations together in one easy-to-use platform designed for growing businesses.

04 - Spacing

A 4px base rhythm

Use the named scale for gaps, padding, and layout. Section spacing has its own fluid token.

space-14px
space-28px
space-312px
space-416px
space-524px
space-632px
space-748px
space-864px
space-996px
space-10128px

05 - Icons

Lucide line icons for functional UI

Use a consistent 1.75px stroke. Filled icons are reserved for non-functional presentation work.

Shopping cart
Store
Chart
Users
Receipt
Message
Gift
Support
Shield
Zap
Settings
Arrow

06 - Logo

Wordmark lockups

Choose the asset that preserves contrast. Never recolour, stretch, rotate, or add effects.

StoreHub
Light surface lockup
StoreHub
Dark accent surface lockup

Give the wordmark room to breathe. Keep clear space on every side, avoid busy backgrounds, and never place the standalone H logomark beside the wordmark.

07 - Primitive states

Buttons and pills

Keyboard focus is visible on every interactive control. Hover and press the enabled examples to see their states.

Button variants

Sizes and icon

Disabled

Pill tones

NeutralOrangeAzurePinkDark

Sizes and icon

SmallMediumWith icon

08 - Surface helpers

Cards and fields

Supporting primitive examples for form and content composition.

Card

A clean content surface

Cards use tokenised borders, radii, spacing, and shadows.

We will only use this to contact you.

Enter your business name.