Loaditude
Brand Identity
The complete guide to our visual language, voice, and design principles. Inspired by Wise's clarity and confidence, built for warehouse operations.
Brand Story
Who we are, what we believe, and how we show up.
Brand Essence
Loaditude is warehouse management software that brings radical clarity to complex operations. We believe warehouses deserve the same beautiful, intuitive tools that fintech gave to banking.
Our name “Wild” signals boldness — we're not another grey enterprise tool. We're the modern alternative that operators actually enjoy using.
Brand Archetype
Primary: The Explorer
Freedom, discovery, breaking boundaries
Secondary: The Magician
Transformation, making complexity simple
We Are
- Clear, confident, and direct
- Modern but never flashy for the sake of it
- Operationally obsessed — every pixel earns its place
We Are Not
- Corporate, stiff, or “enterprise-grey”
- Overly playful or cartoony
- Cluttered, noisy, or information-overloaded
Color Palette
Our palette is rooted in nature — neon lime on deep forest green. Vibrant where it matters, restrained everywhere else.
Primary — Neon Lime
The signature colour. Use for CTAs, active states, links, and key interactive elements. Never use as large background fills except on splash / loading screens.
#9FE870#9DE76E#82C95A#B8F094#F0FDDFDark — Forest Green
Used for headings, sidebar, dark surfaces, and text on light backgrounds. This is our “black” — we never use pure #000.
#163300#172012#1E4800#2A5C00Neutrals
Slate-based neutral scale. Use Gray-600 for body text, Gray-400 for secondary, Gray-200 for borders, Gray-50 for backgrounds.
#F8FAFC#F1F5F9#E2E8F0#CBD5E1#94A3B8#64748B#475569#334155#1E293B#0F172ASemantic Colors
Used for status, alerts, badges, and feedback. Each has a background-safe light variant.
Module Colors
Each product module has a dedicated accent for tab switching and module-specific highlights.
Warehouse
#9DE76ETransport
#3B82F6Color Usage Ratio
Follow this hierarchy to maintain the Wise-inspired feel: lots of white space, dark green for authority, lime for action.
White > Dark Forest > Neutral Grey > Neon Lime accent
Typography
Two fonts, clear hierarchy, negative letter-spacing on headlines for density and punch.
Font Families
Manrope
Display / Headlines — weights 600, 700, 800
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Inter
Body / UI — weights 400, 500, 600, 700
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
Type Scale
48px / 70036px / 70030px / 70024px / 60020px / 60018px / 60016px / 40014px / 40012px / 400Typography Rules
Use Manrope Bold for page titles and section headings. Always apply negative letter-spacing (-0.02em) at display sizes.
Use Inter Regular for body text. Use Inter Medium (500) for labels, Inter Semibold (600) for sub-headings.
Headings use dark forest green (#163300 or #172012). Body text uses Gray-600 (#475569). Secondary text uses Gray-400 (#94A3B8).
Never use pure black (#000000) for text. Always use our dark forest green or slate grays.
Avoid all-caps except for small labels, badges, and section overlines (like “01” section numbers).
Never mix more than 3 font weights on a single screen. Stick to a clear hierarchy.
Spacing & Layout
4px base unit. Generous whitespace is non-negotiable — it's what makes us feel premium.
Spacing Scale
xs (4px)sm (8px)md (16px)lg (24px)xl (32px)2xl (40px)3xl / section (48px)4xl / section-lg (64px)5xl / section-xl (80px)Border Radius
sm (4px)Tags, small badges
md (8px)Inputs, small cards
lg (12px)Cards, modals
xl (16px)Large cards, containers
full (9999px)Buttons (pills), avatars
Layout Principles
Use generous page margins: 16px mobile, 24px tablet, 32-48px desktop. Content breathes.
Maintain 16px minimum gap between form fields. 24px between content sections. 48-80px between page sections.
Bottom-pin primary CTAs on mobile (sticky to bottom with safe area padding). Wise pattern.
Never cram content edge-to-edge. If something feels tight, add spacing — not borders or dividers.
Shadows
Subtle, low-opacity shadows. We use elevation sparingly — flat is default, shadow is for focused/interactive elements.
Inputs & Forms
Clean, well-spaced forms with clear labels. The Wise approach: one question per screen when possible.
Input Styles
Default: border-gray-200. Focus: border-[#163300].
Focused state — dark green border, no box shadow.
Please enter a valid email address.
Form Layout Rules
Labels above inputs, never floating inside. Bold (600) weight, dark green color.
Helper text below input in gray-400 (12-13px). Error text in red replaces helper text.
Vertical stacking only. Full-width inputs. 16px gap between fields. Single-column layout on mobile.
Rounded corners (8px) for inputs. Not pills. This differentiates inputs from buttons visually.
Never use placeholder text as the only label. Placeholders are for examples, not labels.
Avoid inline validation while typing. Validate on blur or on submit. Less noise.
Cards & Containers
White cards on light backgrounds. Subtle borders preferred over shadows. Clean, breathable.
Default Card
White + border
border: #DFE5DC, radius: 16px
Elevated Card
White + shadow
shadow: md, radius: 16px
Surface Card
Neutral soft bg
bg: #F2F5F7, no border
Info Box
Contextual information or tips. Lime-tinted background.
Warning Box
Important warnings. Yellow-tinted background.
Error Box
Errors and destructive warnings. Red-tinted background.
Bottom Sheet / Modal
On mobile, prefer bottom sheets over centered modals. White card, top corners 20-24px radius, X button top-right, generous inner padding.
Sheet Title
Content goes here with generous padding.
Icons & Imagery
Material Symbols Outlined as our primary icon set. Consistent weight, never mixed styles.
Icon System
Library: Google Material Symbols Outlined
Weight: 400 for UI icons, 300 for decorative, 600 for emphasis
Size: 20px in navigation, 24px inline, 32px+ for feature highlights
Color: Inherits text color. Dark green for primary, gray-400 for inactive, primary green for active states.
Icon Containers
Icons in lists or grids often sit inside circular or rounded containers for visual weight.
Icon Rules
Use Material Symbols Outlined consistently. Set font-variation-settings for weight (wght 300-600).
In list items, place icons in circular containers (40-48px) with a tinted background matching the semantic context.
Never mix icon libraries on the same screen. No Heroicons + Material + FontAwesome. Pick one.
Avoid decorative icons that don't aid comprehension. Every icon should clarify meaning, not just fill space.
Logo Usage
The Loaditude logo appears as a wordmark with the “W” icon mark. The icon mark is a rounded square with the letter “W” in bold, set on our primary lime background.
Minimum clear space: 8px around all sides. Never stretch, rotate, or recolor the logo.
Feedback & States
Loading, empty, success, error — every state has a pattern.
Status Badges & Tags
Progress / Timeline
Toast / Snackbar
Empty States
No products yet
Add your first product to start managing inventory.
Loading Skeleton
Use pulsing gray blocks matching the layout shape. Never use spinners as the primary loading pattern for content areas.
Mobile Patterns
Specific guidance for the Expo/React Native mobile app — Wise's mobile DNA.
Screen Layout
- 1.Title top-left, large and bold (28-32px). Always left-aligned.
- 2.Back button (gray circle) top-left, or X close top-right.
- 3.Primary CTA pinned to bottom, full-width, with safe area padding.
- 4.Content scrolls freely between header and bottom CTA.
- 5.16-20px horizontal padding on all screens.
Touch Targets
- Minimum 44x44px for all interactive elements (iOS HIG requirement).
- Buttons: 48-56px height, full-width preferred.
- List items: 56-64px row height with 16px horizontal padding.
- Tab bar icons: 48x48px touch area minimum.
Splash Screen
Full-screen primary lime (#9FE870) background. Centred logo mark in dark forest green. Wise's exact pattern.
Success Screen
White background. Large green checkmark or illustration centred. Bold title. “Done” button at bottom.
All done
Your transfer has been submitted.
List Items (Wise Pattern)
Icon (in circle) + content (title + subtitle) + chevron right. Thin gray divider between items.
Products
342 items
Locations
12 zones
Shipments
7 pending
Voice & Tone
How Loaditude speaks — inspired by Wise's clarity, adapted for warehouse operators.
Voice Dimensions
Lean casual, never stiff
Professional foundation, friendly warmth
Mostly serious — operations matter
Balanced energy
Strongly simple
Modern and forward-looking
Language Patterns
Sounds like us:
- “Does everything look right?”
- “Your inventory has been updated.”
- “Let's get your warehouse set up.”
- “3 orders ready to ship.”
- “That's your location sorted.”
Never sounds like us:
- “Leverage our enterprise-grade solution!”
- “AMAZING DEAL! Don't miss out!!!”
- “The aforementioned inventory adjustment...”
- “Synergize your supply chain workflow.”
- “Oopsie! Something went wrong :((”
Writing Rules
Use contractions. “You're” not “You are”. “We'll” not “We will”. Matches the Wise voice.
Second person (“you / your”) for user-facing copy. First person plural (“we”) for company voice. Never third person.
Direct CTAs: “Continue”, “Add product”, “Save changes”. Start with a verb. Short and clear.
Headlines as questions on decision screens: “Does everything look right?” “What are you shipping?”
No exclamation marks in UI copy (except celebratory success moments). No ALL CAPS except badges/labels.
Never use jargon without context. Say “storage locations” not “bin allocation matrix”.
Brand Compliance Checklist
Use this to verify if new screens, features, or marketing materials feel like Loaditude.
Design Review Checklist
Quick Reference — Token Cheat Sheet
| Token | Value | Usage |
|---|---|---|
| Primary CTA bg | #9FE870 | Buttons, active states, links |
| Primary hover | #82C95A | Button hover, link hover |
| Primary surface | #F0FDDF | Info boxes, tag bgs, feature icon bgs |
| Heading text | #163300 | Page titles, section titles, bold labels |
| Sidebar bg | #172012 | Dashboard sidebar, dark surfaces |
| Body text | #475569 | Paragraphs, descriptions (gray-600) |
| Secondary text | #94A3B8 | Timestamps, help text (gray-400) |
| Border | #DFE5DC | Card borders, dividers |
| Neutral bg | #F2F5F7 | Section alternates, surface cards |
| Page bg | #F8FAFC | Main background (gray-50) |
| Error | #EF4444 / #FEE2E2 | Error text, destructive btns, error bg |
| Warning | #F59E0B / #FEF3C7 | Warning badges, alert bg |
| Info | #3B82F6 / #DBEAFE | Info badges, TMS module |
| Font display | Manrope 700 | Headlines, page titles |
| Font body | Inter 400 | Body, labels, UI text |
| Radius card | 16px | Cards, containers |
| Radius input | 8px | Inputs, select fields |
| Radius button | 9999px | All buttons (pill) |