Brand Book
The complete brand identity, voice guidelines, and visual design system for Unduit
Foundation
Design Tokens
Colors, gradients, typography scale, border radii, and shadows that define the Unduit visual language.
Brand Colors
Gradients
Typography Scale
Border Radii
Shadow Scale
Category 1
Input Controls
Components that allow users to enter data, make choices, or trigger actions — from simple buttons to sliders.
Buttons
Primary Button
Secondary Button
Danger / Destructive Button
Icon-only Button
FAB (Floating Action Button)
Text Fields
Selection Controls
Checkboxes
Radio Buttons
Toggles / Switches
Slider
Date Picker
Category 3
Informational Components
Feedback, status updates, and contextual helpers that keep users informed at all times.
Progress Bar
Loading Spinner
Toast / Snackbar
Badges
Tooltips
Category 4
Containment & Layout
Structure components that group, organise, and present content in a cohesive, scannable way.
Cards
Accordion
Modal / Dialog
Data Table
| Asset | Status | Assigned To | Location | Value |
|---|
Carousel
1 / 3
Category 5
Global Components
Persistent UI components that appear on every page - the Navbar and Footer architecture, specs, and sub-patterns.
Navbar
Height
92px
H-Padding
42px
Background
rgba(255,255,255,0.60)
Blur
backdrop-blur-md
Position
Fixed / z-50
Logo Size
134 x 32px
Mega Menu - Icon Pill
Footer
Background
#FAF9F8
Min-height (XL)
620px
Top Padding
80px (pt-20)
Grid
4 columns (desktop)
Column Gap
60px
Max Width
1440px
Newsletter Card
Subscribe to our newsletter
Footer Link Column
All Services
Back to Top Button
Category 6
Page Patterns
Structural templates and layout conventions used to compose consistent, scannable pages across the platform.
Section Label + Heading Pattern
Section Label
Power Word Gradient, Rest Dark
Supporting description. Body copy is always #374051 at 16-20px,
Regular weight, max-width 540px.
Label Size
11px / Uppercase
Label Color
#FF5F00 or rgba(0,0,0,0.38)
Heading Size
36px - 46px
Heading Weight
Semibold (600)
Line Height
1.1
Letter Spacing
tight (-0.02em)
Logo Ticker (Trust Strip)
Animation
20s linear infinite
Transform
translateX(-50%)
Mask
Fade 10% each side
Overflow
hidden
List Width
max-content (2x items)
Wrap
nowrap
Hero Section Pattern
AI-Driven IT Agent
for Global Execution
Unduit is the IT agent that runs enterprise IT.
It plans, executes, and governs IT operations globally, allowing organizations to scale fluidly.
CTA Section Pattern
Ready to get started?
Transform your IT operations with Unduit today.
Service Page Layout Stack
Category 7
Imagery
How background videos, SVG illustrations, gradient overlays, and background patterns are used across the platform - with layout examples.
Imagery Roles
Background Video
Hero sections - full-bleed, opacity 0.55-0.6, object-cover, translateY(120px) offset to frame the subject centrally.
SVG Illustrations
Service page heroes - right-column, object-contain, max-width 850px, aspect-ratio 1.4/1. Always crisp and vector-based.
Background Patterns
Feature/Impact sections - SVG tiled or positioned at 100% cover. Used as a textured backdrop behind glassmorphism cards.
Gradient Overlays
Radial or linear gradients layered over white to warm up hero backgrounds. Max opacity 0.4 - never obscure text.
Layout Example - Full-Bleed Hero (Centered)
AI-Driven IT Asset
Lifecycle Management
A complete solution to manage every device from acquisition to disposal.
Video Opacity
0.55 - 0.60
Video Offset
translateY(120px)
Video Fit
object-cover
Content Z
z-10 (above video)
Layout Example - Split Hero (Text Left / Illustration Right)
Track and Manage
Real-time visibility into every asset. Know exactly where every device is at all times.
Text Column
45% width
Image Column
55% width
Image Fit
object-contain
Max Width
850px
Layout Example - Background Pattern with Glassmorphism Cards
Zero Redundancy
Contextual description supporting the benefit shown in this card.
Managed Compliance
Contextual description supporting the benefit shown in this card.
Increased Security
Contextual description supporting the benefit shown in this card.
Card BG
rgba(255,255,255,0.45)
Card Border
2px solid #FFF
Backdrop Blur
20px
Pattern Opacity
≤ 0.06
Layout Example - CTA Section with Background Image
This isn't free forever
The Unduit AI agent works across this app ecosystem to execute lifecycle operations from start to finish.
Container BG
Orange gradient + SVG bg-image
SVG Fit
background-size: cover
Border Radius
50px (inner + outer)
Card BG
rgba(255,255,255,0.45) + blur(20px)
Imagery Rules
Do
- Use vector SVGs for all product illustrations - never rasterize
- Keep video opacity at 0.55-0.6 so text always reads clearly on top
- Offset background video with translateY to frame it naturally
- Use radial gradient overlays (max opacity 0.4) to warm up hero bg
- Always wrap illustrations in an aspect-ratio container to prevent reflow
Don't
- Place background imagery behind text without a transparent overlay
- Use photography or photos - Unduit uses vector illustrations only
- Scale illustrations beyond their natural container (no stretching)
- Use imagery with heavy detail at small sizes - keep it clean and minimal
- Apply backdrop-blur to content cards that sit over plain white backgrounds
Logo Usage
Rules and specifications for displaying the Unduit wordmark and U mark across all surfaces and backgrounds.
Logo variants
Full wordmark · dark · light background
Full wordmark · white “undu” + orange gradient “it” · dark background
Full wordmark · white · orange gradient background
"U" mark · orange gradient · accent use · 48 x 52px
Sizing specifications
Navbar
134 x 32 px
Footer
112 x 28 px
Favicon / app icon
32 x 32 px (U mark)
Minimum wordmark
80 px wide
Clear space
Maintain a minimum clear space equal to the height of the U mark (52px) on all sides of the logo. Never place other elements inside this exclusion zone.
Approved backgrounds
White
Off-white / #FAF9F8
Dark / #1A1A1A
Orange gradient
Logo dos & don'ts
Do
- Use the provided SVG files - never recreate or redraw the logo
- Use the full wordmark on all external-facing surfaces
- Maintain the minimum clear space rule around the logo
- Use the dark wordmark on white and off-white backgrounds
- Use white “undu” + orange gradient “it” on dark (#1A1A1A) backgrounds
- Use the white wordmark on orange gradient backgrounds
- Scale the logo proportionally - never stretch or squish
Don't
- Place the dark wordmark on dark or gradient backgrounds
- Use a CSS invert filter on the logo - use the correct colour variant instead
- Rotate, skew, or add effects (drop shadows, outlines, glows) to the logo
- Use the wordmark smaller than 80 px wide
- Change the logo colours - use only the three approved variants
- Place any element inside the logo's clear space zone
- Use an old or rasterised version of the logo - always use the SVG
Guidelines
Dos & Don'ts
Core rules that preserve visual consistency, brand integrity, and quality across all components and pages.
Typography
Do
- Use SF Pro Display exclusively - Regular, Medium, Semibold, Bold
- Apply orange gradient only to the first word or a single keyword in a heading
- Use lineHeight 1.1 for headings and 1.6 for body copy
- Use tracking-tight (-0.02em) on all section headings
Don't
- Use system fonts or web fonts other than SF Pro Display
- Apply gradient to entire paragraphs or long body text - accents only
- Mix font weights outside of 400, 500, 600, and 700
- Use italic - no italic variant of SF Pro Display is in use
Colors
Do
- Use #1A1A1A for all headings and primary text
- Use #374051 for body copy and descriptions
- Use #FAF9F8 as alternate section background instead of pure white
- Reserve orange gradient for interactive elements and keyword highlights
Don't
- Use orange as a large solid background fill - gradient accents only
- Introduce new brand colors outside the defined palette
- Use pure black (#000) for text - always use #1A1A1A
- Place low-contrast text on orange gradient backgrounds
Buttons
Do
- Use dark gradient (134deg, #475565 → #000710) for all primary CTAs
- Include the .btn-arrow reveal animation on primary buttons
- Apply scale-105 on hover and scale-95 on active for all buttons
- Keep button heights always at 50px
Don't
- Use flat or solid orange for primary buttons - always use gradients
- Create buttons shorter than 44px or taller than 56px
- Add a border to the primary dark-gradient button
- Place more than 2 CTA buttons side-by-side in a single section
Cards
Do
- Use border-radius 26-28px for feature and impact cards
- Use border: 2px solid #FFFFFF (glass border) for card edges
- Add box-shadow: 0 4px 30px rgba(0,0,0,0.05) for depth
- Use #FAF9F8 or rgba(255,255,255,0.45) as card backgrounds
Don't
- Use hard opaque colored backgrounds inside card grids
- Mix card border-radius values within the same section
- Apply backdrop-blur to content cards - reserve for overlays/navbar only
- Make cards narrower than 240px or wider than 380px in a grid
Icons
Do
- Use Lucide React exclusively for all functional icons
- Set strokeWidth to 1.8px consistently across all icons
- Size icons 16px (nav/small) to 28px (cards/large) by context
- Use icon pills (28x28px, border-radius 7px) inside navigation menus
Don't
- Mix icon libraries - no Font Awesome, Heroicons, or Material Icons
- Use filled icon variants unless intentional (e.g. FAB buttons)
- Use icons larger than 32px without a containing pill or badge
- Change icon stroke widths arbitrarily - keep 1.8px uniform
Animations
Do
- Use Framer Motion for all entrance and interaction animations
- Use the standard ease curve [0.22, 1, 0.36, 1] for all transitions
- Stagger list and card animations with 0.05-0.10s delays
- Start entrance animations at y: 30, opacity: 0
Don't
- Use raw CSS animations for complex entrance effects - use Framer Motion
- Animate more than 3 properties simultaneously on one element
- Use bounce or elastic easing - stick to the standard ease curve
- Animate static text content unnecessarily
Spacing
Do
- Use py-24 to py-32 (96-128px) for section vertical padding
- Maintain 14px gaps between cards in a grid
- Keep heading-to-description spacing at 16px (mb-4)
- Keep description-to-CTA spacing at 32px (mt-8)
Don't
- Use section padding below py-16 (64px)
- Use more than 32px card gap - it will look too sparse
- Nest sections inside sections - keep each section top-level
- Add inconsistent padding inside card components
Navigation
Do
- Keep navbar height exactly at 92px - never modify this value
- Maintain 42px horizontal padding in the navbar
- Use hover-triggered dropdowns with 120ms close timeout
- Apply glassmorphism: rgba(255,255,255,0.60) + backdrop-blur-md
Don't
- Place non-navigational content (banners, promos) in the navbar
- Show more than 5 top-level nav categories
- Use click-triggered dropdowns - hover is the standard
- Remove or reduce the backdrop-blur effect from the navbar
