Brand.
PerkUp's complete brand guide, on one page — who we are, how we sound, and every visual rule for the logo, colors, type, imagery, and asset library. This section is also the design spec for the rest of this wiki: the colors and type you see on every page trace back to here.
At a glance
01 Who we are Positioning + the 4 brand impressions every piece of communication must leave.
Who we are
PerkUp is a global swag platform — the largest global catalog, an advanced management platform, and global sourcing and fulfillment. The brand should feel premium, modern, and effortlessly international. And the name is always PerkUp: one word, capital P, capital U.
Every piece of communication should leave the reader with these four impressions. If a draft contradicts one of them, rewrite it.
Fun but secure
Playful and human, never reckless. The warmth is real; so is the trust.
Flexible and inclusive
Built for global teams and every kind of recipient. Choice is the feature.
Easy to use
Plain language, low friction. If it sounds complicated, it's wrong.
Modern
Current, clean, confident. Premium without being stuffy.
02 Logos Main wordmark, four product lockups, source files, and the do’s & don’ts.
Logos
One wordmark, one icon, four product lockups. The previews below are rendered from the wiki wordmark asset; download the production files from the brand library before using them anywhere external.
The main logo
The PerkUp logo is the wordmark plus icon. It comes in black and white; choose whichever holds contrast against the surface. The icon may stand alone when space is tight — but the wordmark must never appear without the icon.
Product lockups
Four product lines each have their own lockup, every one available in Light Mode, Dark Mode, All Black, and All White. Use the lockup that matches the product you're talking about — main PerkUp branding for the platform as a whole, product lockups when the message is about a specific line.
Source files
The editable master is PerkUpLogo.ai. Exported assets:
| Asset | Formats | Dimensions |
|---|---|---|
| Main logo — Black | PNG, SVG | 1972 × 592 px |
| Main logo — White | PNG, SVG | 1972 × 592 px |
| Icon — Black | PNG, SVG | 175 × 175 px |
| Icon — White | PNG, SVG | 209 × 209 px |
Do's and don'ts
Do
- Do keep generous clear space and let the logo sit on a clean, neutral surface.
Don't
- Don't separate the icon from the wordmark or distort the logo. The icon may appear alone; the wordmark may not appear without the icon.
- Don't clutter the layout around the logo — too many elements make it look cheap, not premium.
- Don't place black on purple or purple on black. These combinations kill contrast and readability.
03 Colors Primary + secondary palette, plus the wiki’s live design tokens.
Colors
Electric Indigo leads. Everything else supports it. The palette below is the brand source of truth; the design tokens powering this wiki are listed underneath so you can see exactly which values render on screen.
Primary colors
Three primary colors carry the brand. Electric Indigo is the dominant accent, and Subtle White and Nero Black set the neutral foundation.
Electric Indigo
#5C33FFSubtle White
#F1F5F9Nero Black
#222222Secondary colors
Four secondary colors extend the palette — used sparingly for product accents, illustration, and category coding (e.g. the product-line backgrounds). Each secondary color is the accent for one sub-brand.
Brilliant Rose
PerkUp Gifts #FF4CADLime Green
PerkUp Sustainability #00C312Blue Violet
PerkUp Gift Cards #882DE2Azure
PerkUp Swag #1681FFLive wiki design tokens
This wiki renders from the CSS custom properties in /_assets/wiki.css. These are the exact values on screen right now (dark theme). Treat them as the implementation of the palette above — not a second source of truth.
| Token | Value | Role |
|---|---|---|
--color-accent | #5d33ff | Primary accent, links, active states |
--color-accent-text | #c7b6ff | Accent text on dark surfaces |
--color-accent-soft | rgba(93,51,255,0.18) | Accent fills, soft backgrounds |
--color-bg | #0d0e10 | Page background (dark) |
--color-bg-elev | #16171b | Elevated surfaces, cards |
--color-bg-elev-2 | #1c1d22 | Second elevation |
--color-text | #ffffff | Primary text (dark theme) |
#5C33FF (RGB 92, 51, 255). The live wiki token --color-accent is #5d33ff (RGB 93, 51, 255) — one step off in the red channel. It's visually imperceptible, but it's a real divergence. Per the brand consistency rule it has not been changed on either side. Decision needed: align the wiki token to #5C33FF, or ratify #5d33ff as the on-screen value and update the brand doc.
04 Typography New Hero + Inter, the marketing type scale, and what this wiki ships.
Typography
New Hero carries the headlines, Inter carries everything you read. The marketing type scale below is the brand standard. This wiki itself runs on a system-font stack — that difference is called out at the bottom.
The two typefaces
New Hero
Used for main headlines and key messages. Its strong weight delivers high impact, clear hierarchy, and a bold brand presence — ideal for hero sections and primary titles. Bold handles secondary headlines and supporting titles.
Inter
Used for paragraphs and long-form content. Its clean, highly legible design ensures comfortable reading across digital applications. Bold uppercase handles labels, kicker text, and section markers without competing with the headlines.
Marketing type scale
The desktop scale from the brand guidelines. Samples are rendered in this wiki's font for layout reference — the specs (typeface, weight, size, line height, letter spacing) are the brand standard.
92 / 108 · -2.5px
72 / 88 · -2.5px
52 / 60 · -1.5px
36 / 48 · -1px
32 / 32 · 1px
32 / 44 · 0px
32 / 44 · 0px
24 / 32 · 0px
What this wiki runs on
This internal wiki deliberately ships no web fonts — it renders in the operating-system font stack for speed and zero network cost. From /_assets/wiki.css:
--font-stack: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "SF Mono", Menlo, Consolas, "Roboto Mono", monospace;
05 Photography & imagery People, swag, maps, and the iconography systems.
Photography & imagery
Three image families carry the brand: real people at work, premium swag product shots, and maps that prove our global-local reach. Everything should feel authentic, clean, and premium — never stock-like or cluttered.
People
People imagery should feel natural and work-focused, avoiding overly staged or stock-like visuals. Subjects are typically shown in real workplace contexts — using a laptop or tablet, opening gifts — to reflect authentic product interaction.
Swag
Swag is presented through realistic product imagery. Use clean backgrounds, soft lighting, and natural shadows to create depth so items feel premium and physically present. When choosing swag to feature, keep it in neutral colors — black, white, or grey. Swag PNGs can also be used to generate visuals with AI.
Maps
We use both flat and spherical map styles to visually communicate PerkUp's global swag distribution. These reinforce our international reach and ability to deliver locally.
The standard for swag imagery
Swag is a first impression — at HR events, attendees often see PerkUp for the first time on a physical item. It must reflect the same quality as the platform.
- Premium items — swag should feel high-quality.
- Clean & clear aesthetic — minimalist, neutral colors, no clutter, no visual noise.
- Professional, global, premium — the goal is to make PerkUp known as exactly that.
Iconography
Two icon systems, used for different jobs:
- Primary — Apple icons (SF Symbols). Line icons for UI and structured content. developer.apple.com · SF Symbols
- Secondary — Icons8 Color icons & Apple Emoji. Color icons and emoji for expressive, celebratory moments. icons8.com · Color
- Country flags — circle and full-icon styles for the global / fulfillment story.
currentColor) rather than SF Symbols — a pragmatic choice for a static, single-file site. The brand standard for product and marketing surfaces remains Apple icons (SF Symbols).Where to source images
Reach for these before generating anything new. Adobe Stock is the paid library (use the team's Adobe ID); Freepik and Pexels cover free stock and vectors. Mockups Design is the go-to for product mockup PSDs (apparel, drinkware, packaging) when we don't already have a shot.
How we use AI for imagery
AI is now part of every image we produce — generation, edits, and finishing. The full process, prompt library, and ongoing tool research live on the Image treatment | Research doc in Notion. Short version below.
Nothing should look obviously AI-generated. Check logos, proportions, text, fingers, shadows. The team is fully responsible for reviewing every AI output before it ships — "the AI made it" is not an excuse. When in doubt, redo it.
The tool stack
| Tool | Best for | How |
|---|---|---|
| ChatGPT / Gemini | Quick edits on existing images — change clothing, remove or replace logos, swap backgrounds, color tweaks. | Upload the image, describe the edit naturally. No specific prompt needed. |
| Google Flow | Generate new hyper-realistic lifestyle and product shots from scratch. | Draft the prompt in ChatGPT using reference images, then run it in Google Flow. |
| Figma / Photoshop | Finishing — expand canvas, remove backgrounds, retouch. (Figma plugin: Nano Banana 2.) | Figma Plugins panel, or select an image and use the bottom toolbar. |
The workflow
- Draft the prompt in Claude or ChatGPT (use the prompt library in the Notion doc).
- Upload the individual reference assets — loose PNGs of each swag item.
- Generate, then review against the brand bar above.
- Iterate — adjust hand size, fix item proportions, refine composition. When in doubt, redo it.
06 Asset library Drive masters, Figma source, Notion inventory — start here.
Asset library
Brand masters are in Google Drive; the logo source-of-truth is in Figma. Start here before recreating anything.
Source: PerkUp Brand Guidelines (Google Drive › PerkUp | Branding › 00_Guidelines › PerkUp Brand Guidelines.pdf). Live tokens from /_assets/wiki.css. Last verified 2026-06-07.