Supliful Brandkit.

Logo symbol

The standalone mark, without the wordmark. Use for avatars, app icons and tight spaces where the full logo won’t fit.

Misuse

The logo should always appear as supplied. Don’t do any of the following. Placeholder visuals, to be replaced with finished examples.

supliful

Co-branding & partner lockups

When Supliful appears alongside a partner brand, lock the two up with equal visual weight. X = the height of the lightning bolt, the same unit as the clear-space rule.

Partner mark

Horizontal lockup: Supliful · 1px Neutral-300 divider (gap 1X each side) · partner

Construction

Horizontal lockups are the default: Supliful on the left, a vertical divider, the partner mark on the right. Stack vertically (Supliful on top) only when a horizontal lockup won’t fit the space.

Divider

A 1px rule in Neutral-300, set to the full height of the taller mark, with a gap of 1X on each side.

Sizing parity

Match the two logos by optical height (the Supliful symbol’s height to the partner’s dominant element), not by bounding box. Equal visual weight is the goal. The partner mark is never larger than Supliful’s in a Supliful-issued asset, and never smaller in a partner-issued one.

Clear space

The standard 1X clear space applies to the outer edges of the whole lockup. The partner mark keeps its own clear space inside that.

Minimum size

The 120px / 24mm minimum applies to the smaller of the two marks, so neither drops below legibility.

Variant by background

Main logo on light, inverted/white on dark, the same rule as the standalone mark. Choose the partner’s equivalent variant for the same background.

Relationship label (optional)

“In partnership with” / “Powered by Supliful” in Caption style (0.875rem / 500), set in Neutral-600, placed above or below the lockup, never between the two marks.

Lockup don’ts

• Don’t merge or overlap the two marks.
• Don’t recolor the partner logo to Supliful green (or vice versa); each brand keeps its own colors.
• Don’t place a lockup on a busy photo.
• Don’t size the partner mark to dominate.
• Don’t omit the divider and let the marks float ambiguously.

Lockup diagram is a placeholder. Replace the partner slot with the real partner mark.

Values come from the design tokens.

Using the palette

Surfaces

White or Neutral-50 pages; Forest for hero, footer and other statement moments.

Text

Ink on light surfaces, White on Forest. Green and Amber are accents, not body text colors.

Green

The action color: buttons, links, interactive fills. One primary action per view. It stays green even in amber-accented layouts.

Amber

The highlight: one accented word in display type, a badge, a data point or a texture detail. A few percent of any layout, on Forest or paired with Ink — never behind white text.

Composed

A typical statement layout: Forest background, White display type with a single Amber word, a Green CTA, and at most one textural accent (tone-on-tone symbol or amber halftone). The brandkit hero above is this recipe.

Manrope

Scale

Values come from the design tokens; the small label is the token key (e.g. 5xl, extrabold).

Font stack

Apply this stack everywhere Manrope is used, including email and other contexts where the web font may not load. This is the typography.fontFamily.body token; the fallbacks keep metrics close to Manrope.

font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

Weights

Buttons

Pill-shaped, medium weight, 0.2s transitions, emerald focus ring. One primary per view; outline and ghost for everything alongside it.

Sizes

Card

White surface, 1px neutral-200 border, 16px radius, and a soft shadow that lifts on hover. In the dashboard, cards usually sit borderless on the gray page background; this bordered recipe is for standalone use.

Title images

If your title image needs a caption to explain who it’s for, it’s the wrong photo.
The subject in context carries the message; the empty space around it carries the layout.

Do

Leave generous empty space around the subject. The photo gets room to breathe, and the space doubles as room for headlines and UI.

Do

Choose colorful, naturally lit shots where the focal point is the subject doing the thing the message is about.

Do

When we speak to a vertical or client base, the image alone should say who it’s for, before a single word is read.

Don’t

Don’t use generic stock photography: no handshake-in-an-office, no fake “team” shots.

Don’t

Don’t run flat, washed-out, or heavily filtered photos. If the color doesn’t carry, the image doesn’t run.

Don’t

Don’t clutter the frame: no busy backgrounds, prop piles, or competing subjects fighting for attention.

'The do column is approved reference photography; the don’t column uses stock stand-ins for illustration only.

Supporting images

Where title images stay broad, supporting images go into detail: a specific vertical and the products attached to it, shown in real use. The focal point is always the user and the product; the set around them gives context, but never takes the lead.

Do

A skincare creator shows her own products on camera: the vertical is instant, and the user and product hold the frame.

Do

A coffee brand owner unboxes her lineup: a specific vertical and its products, with nothing competing for attention.

Do

A protein supplement in the daily routine: the product in use, and the vertical clear from the first glance.

Don’t

Don’t use monotone scenes that feel lifeless: everything blends into one washed-out tone and nothing pulls the eye.

Don’t

Don’t add abstract aesthetic images that don’t tell a story or help to drive it, however polished they look.

Don’t

Don’t publish imagery that is recognizably AI-generated. Generated images are acceptable only when they hold up as realistic.

Your brand in front. Our infrastructure behind it. Everything we write puts the seller in the hero seat and positions Supliful as the capable, reliable backend. We never compete with the customer’s brand for attention; we make theirs possible.

The five voice pillars

On-brand / off-brand

Words & phrases