Uniqode Brand Guidelines

01  Brand Overview

About This Guide

The foundation for everyone who creates Uniqode assets. Refer here before any design or communication work.

02  Logo

Logo

The Uniqode wordmark and symbol. Use the full logo wherever possible; fall back to the standalone symbol only when space forces it.

Logo Usage

Symbol Mark: Standalone Use

Use the standalone symbol where the full wordmark won't fit, such as app icons, favicons, social avatars, chatbot personas, URL chips, and embroidery.

03  Color Palette

Color Palette

Brand-approved background gradients for hero sections, decks, and social posts. Download individually or grab all as a zip.

Gradient 1

Gradient 2

Gradient 3

Gradient 4

Gradient 5

Gradient 6

04  Typography

Uniqode uses three typefaces, each with a specific, non-interchangeable role. The fonts below are rendered using the actual brand font files.

Typography Do's & Don'ts

Additional Rules

Slides text

Use Inter weights only. Uniqode Sans and HEX Franklin are not supported.

Product UI text

Follow product design typography styles. See the Ohana Design System.

Italic text

Use only in exceptional cases; avoid in regular content.

CTA text

Write in sentence case. Never use all caps or title case.

Heading text

Write in sentence case, capitalizing only the first letter.

Bullet text

Keep character count uniform per text style for visual balance.

Micro text

Use Uniqode Sans Micro for small sizes and sticker cutouts only.

05  Photography

Real people in real business settings: warm, authentic, and purposeful. Never generic stock. Every photo ladders up to one or more of the three principles below.

Approved Subjects

Four content areas to source or shoot against when sourcing photography:

Local BusinessesCafes, bakeries, retail shops, and restaurants, spanning small and large-scale enterprise contexts that show who uses Uniqode in the wild.

Customer SupportEmployees and internal team in action, highlighting Uniqode's customer-service cornerstone and human side.

CityscapesUrban landscapes and skylines, highlighting where Uniqode is being used and grounding the brand in the physical world.

Client PortraitsPortraits of real clients, to pair alongside testimonials, case studies, and customer stories.

Types of photos to use

Photography should be used to warm up the overall tone of the brand. Photographs should be used throughout the website to show people interacting with our product and highlight our customer service.

Real people, real settingsTeams collaborating, customers scanning QR codes in natural contexts. No staged poses.

Product in contextProduct UI on real devices in natural environments. Good lighting. No plain white-background product shots.

Candid, unposed momentsCatch people mid-action in real environments, and skip the stiff handshake, boardroom pose, and plain-backdrop product shot.

Diverse, global representationPeople of varied backgrounds, ages, and industries. Uniqode serves 40+ countries, so reflect that range.

Photo Treatment

When images lack warmth and can't be reshot in a brighter environment, edit them to add that warmth. Adjust saturation and temperature, but never overdo it or give the photo an unnatural yellow hue.

Before

Cool, flat, under-saturated: reads as stock.

After

Warmer temperature + mild saturation bump: feels human.

Considerations

A few watchouts when creating new or editing existing photography.

Our photography feels warm with a slight yellow tint, so when editing, don't overdo it and give the photo an unnaturally yellow hue.

Don't use stock photography that is clearly posed and expected. Our photography should feel real and depict real people and businesses.

Don't overlap imagery and graphic elements if there isn't enough contrast; lower the brightness or add a dark overlay when needed.

Don't use type over a busy image as it's hard to read.

Photo Do's & Don'ts

06  Iconography

Icons

Icons simplify and enhance user experiences. Use them as small visual aids within UI, emailers, and marketing surfaces, never as illustrations or hero visuals.

In Use

Icons live in small, functional moments: list items, UI toolbars, stat cards, CTAs. Pair them with short labels, since icons alone rarely carry meaning.

Examples below show a few common use cases of how icons can be applied across UI, emailers, and marketing surfaces.

Industry lists: paired with short labels.

Chat widgets: send, link, reaction affordances.

Product toolbars: search, notifications, export.

Feature cards: single supporting icon.

Considerations: Please Do Not

Don't modify the form of existing icons.

Don't color icons: keep them monochrome.

Don't use icons as illustrations.

Don't scale up: icons are for small, functional moments.

07  Stitches

The stitch is Uniqode's signature brand element: a cross-shaped motif representing the seamless connection between physical and digital worlds. It appears across all materials to create a distinctly Uniqode look.

Macro Solid

↓ Dark↓ Light

Macro Textured

↓ Dark↓ Light

Micro Solid

↓ Dark↓ Light

Micro Textured

↓ Dark↓ Light

Stitch Do's & Don'ts

08  Patterns

Full-surface stitch patterns for use as backgrounds in presentations, social posts, and brand materials.

Pattern 01

↓ PNG

Pattern 02

↓ PNG

Pattern 03

↓ PNG

Pattern 04

↓ PNG

Pattern 05

↓ PNG

Pattern 06

↓ PNG

Pattern 07

↓ PNG

Pattern 08

↓ PNG

Pattern 09

↓ PNG

09  Illustrations

Uniqode uses a distinctive cross-stitch pixel aesthetic across all illustrations, rendered in Uniqode Blue and Light Blue on dark backgrounds. All approved illustrations are in the central asset library.

Bulk Creation

↓ PNG

Customization

↓ PNG

Digital Business Cards

↓ PNG

Dynamic Update

↓ PNG

Integrations

↓ PNG

QR Code Generation

↓ PNG

Security

↓ PNG

Tracking & Analysis

↓ PNG

Use Case Example

↓ PNG

Please Do Not

Do not use an illustration on top of a color that appears within the illustration, since parts will disappear.

Do not use a 3–4 color illustration on top of any colors aside from dark purple or white.

Do not combine illustrations to create a new illustration.

Do not use the illustrations in colors outside of the illustration palette.

10  Layout Systems

Layout Systems

The building blocks that hold Uniqode layouts together: rounded corners as the base shape language, composite shapes for bold backgrounds, Bento Box grids for content density, and glassmorphism for floating UI.

Corner Radius

Every rectangle and square in a Uniqode layout wears rounded corners. Soft edges keep surfaces warm, friendly, and unmistakably on-brand. Pick a radius that matches the size of the shape: small chips take a small radius, big hero containers take a big one. Any rectangle you reach for in the systems below, whether a composite shape, a bento tile, or a glass card, starts from this scale.

Radius Scale

Each tile shows concentric radii in action: the inner shape's radius stays a step below the outer's so the two curves remain parallel. Guides in magenta mark the outer corner and the inner corner.

Where It Shows Up

• Buttons & CTAsPrimary, secondary, ghost, pill-shaped share buttons.
• Tiles & CardsFeature tiles, stat blocks, bento grid cells, testimonial cards.
• Boxes & ContainersCallouts, modals, dropdowns, toast banners, sidebar panels.
• Image & Media FramesPhoto crops, video thumbnails, avatars, illustration frames.
• Inputs & Form FieldsText fields, search bars, selectors, toggles, tags.
• Badges & ChipsStatus pills, category filters, notification counts.

How to Choose

• Smaller shape → smaller radius. A 32px chip with a 24px radius turns into a lozenge.
• Nested shapes should use concentric radii: inner radius ≈ outer radius minus the padding, so gaps look parallel.
• Never mix sharp corners with rounded ones in the same composition. Pick a radius family per surface and stay with it.
• Go pill only for single-line actions or labels. Use rectangles with radius for anything taller than one line.

Composite Shapes

Abstract forms built by merging multiple squares or rectangles and applying a union in Figma so the whole thing flattens into a single composite. Edges and corners are softened with a radius for rounded corners. Use them as backgrounds filled with solid colors, patterns, videos, or photos.

Stencil cut-outSubtract the composite shape from a larger form to create a photo frame.

Image fillCrop a photo into the composite form by filling the shape with an image.

Pure backgroundUse the shape as a solid background for other elements to overlay on top.

Glass subtractApply a liquid-glass effect to a larger container, then subtract the composite shape to punch through it.

Video fillCrop a looping video into the composite form by filling the shape with video.

Solid color fillFill the shape with a single brand color as an abstract color block.

Bento Box Layouts

Modular grid of mixed-size tiles: multiple photos, feature grids, product overviews, and case-study highlights. Often used in PPT decks too.

What's a Bento Box Layout?

A modular grid of mixed-size tiles, each holding one idea, image, or stat. Great for decks and overviews.

Glassmorphism

Frosted-glass surfaces over imagery or color. Use on floating UI, such as badges, CTAs, overlays, and product mockups in real-world scenes, to feel modern and layered without competing with content underneath.

UI Preview

Scan-to-connect

QR drops visitors straight into your funnel: trackable, customizable, and on-brand.

Get started

11  UniCraft

UniCraft

On-brand, self-serve generators. Open any tool in a new tab.

12  Quick Links

Quick Links

Jump-off points to the resources you reach for most: design files, asset libraries, and internal systems.

13  Downloads

Downloads

All Uniqode brand assets in one place. Grab individual categories or download everything as a single ZIP.

14  Brand Quiz

Brand Guidelines Challenge

Two minutes. Ten questions. Zero mercy. Ace it, become Brand Guidelines Challenge champion.