01

Design Principles

Seven core principles that guide every design decision across Web, iPad, Phone, and Touch Device products.

01
Clarity Over Cleverness

Every element serves a purpose. Data-heavy interfaces demand immediate legibility. When in doubt, simplify.

02
Outcome-Focused

Lead with the metric, the next action, or the insight. Surfaces answer "what happened" and "what should I do next" first.

03
Progressive Disclosure

Show only what matters at each level. Summary first, detail on demand. Respect the user's attention budget.

04
Touch-First, Pointer-Enhanced

All four products must work with touch. Minimum 44px touch targets. Design for fingers first, enhance for precision.

05
Consistent Motion

Animation communicates state changes and guides attention. It never decorates for its own sake. Respect prefers-reduced-motion.

06
Accessible by Default

WCAG AA compliance built in from the start. Color contrast, focus indicators, semantic markup, and keyboard navigation in every component.

07
Brand Coherence

The depth gradient, teal accent, Inter typeface, and solution-color system must be recognizable on every surface.

02

Color System

A unified palette spanning brand identity, solution verticals, semantic states, and dark/light modes.

Brand Palette
COPY
Cyan
#0CF4DF
Primary accent (dark)
COPY
Teal
#00BBA5
Eyebrows, links
COPY
Blue
#254FE5
Action gradient end
COPY
Deep Blue
#1F3395
Light surface accent
COPY
Cobalt
#3257D9
Secondary blue
COPY
Navy
#1A2E73
Dark section tones
COPY
Deep Navy
#061341
Dark text
COPY
Midnight
#0B0B3C
Deepest background
COPY
Plum
#7C316D
Warm gradient
Solution Verticals
COPY
Violet
#6B21D4
Trade Shows
COPY
Sol-Teal
#5FD9C2
Tech Recruiting
COPY
Amber
#F2B33D
Field Sales
COPY
Indigo
#3A2073
Facilities
COPY
Crimson
#F25E3D
Venues & Events
Semantic Colors
COPY
Success
#0CF4DF
COPY
Success Muted
#5FD9C2
COPY
Warning
#F2B33D
COPY
Error
#E5484D
COPY
Info
#3257D9
Brand Gradients
Action
135deg, #0CF4DF → #254FE5
Brand
135deg, #00BBA5 → #254FE5
Hero
135deg, #0CF4DF → #5BA8F5
Depth
180deg, #7C316D → #0B0B3C 45% → #1A2E73
Depth Reversed
0deg, #7C316D → #0B0B3C 45% → #1A2E73
Trade Shows (Violet)
Dark
135deg, #2D0770 → #4A0FA8 55% → #9B5FE8
Light Section
145deg, #F8F4FF → #EDE6FF
Card Accent
145deg, #F8F4FF → #EDE6FF
Case Study Cinematic
135deg, #040E28 → #0B0B3C 30% → #5B2E91 60% → #040E28
Tech Recruiting (Teal)
Dark
135deg, #040E28 → #1A8A76 55% → #5FD9C2
Light Section
145deg, #E8FDF8 → #F0FFFC
Card Accent
145deg, #E8FDF8 → #D8FAF2
Case Study Cinematic
135deg, #040E28 → #0B0B3C 30% → #1A8A76 60% → #040E28
Field Sales (Amber)
Dark
135deg, #1A0A00 → #A86B00 55% → #F2B33D
Light Section
145deg, #FFF9E8 → #FFFCF0
Card Accent
145deg, #FFF9E8 → #FFF3CC
Case Study Cinematic
135deg, #040E28 → #0B0B3C 30% → #A86B00 60% → #040E28
Facilities (Indigo)
Dark
135deg, #0D0820 → #3A2073 55% → #5B4499
Light Section
145deg, #EEF0FF → #F4F5FF
Card Accent
145deg, #EEF0FF → #E4E0F8
Case Study Cinematic
135deg, #040E28 → #0B0B3C 30% → #3A2073 60% → #040E28
Venues & Events (Crimson)
Dark
135deg, #1A0400 → #8F200A 55% → #F25E3D
Light Section
145deg, #FFF2EE → #FFF7F5
Card Accent
145deg, #FFF2EE → #FFE8E0
Case Study Cinematic
135deg, #040E28 → #0B0B3C 30% → #8F200A 60% → #040E28
Contrast Ratios (WCAG AA)
PairRatioLevel
White on Deep Navy16.5:1AAA
Charcoal on White16.8:1AAA
Cyan on Midnight10.1:1AAA
Teal on White3.1:1Large text only
Error on White4.6:1AA
03

Typography

Inter is the sole typeface across all products. Headlines use weight 500, subheads use weight 300.

Type Scale
LevelSizeWeightLHSample
Display36-72px5001.05Every badge tells a story
H128-52px5001.10Capture. Connect. Convert.
H224-40px5001.15Built for the moments that matter
H324px5001.25Real-time lead intelligence
H420px6001.30ROX Score Breakdown
Body Lg16px4001.70Momentify transforms how teams capture and convert leads at events.
Body15px4001.60Scan a badge, capture context, and sync to your CRM.
Body Sm14px4001.60Secondary text and descriptions
Caption13px4001.50Metadata, timestamps, footer links
Eyebrow12px6001.35SECTION LABEL
Label11px6001.35TAG LABEL
Micro10px6001.35TINY UI CHROME
Subhead Treatment

Subheads always use weight 300 (light) at 15px with 60% opacity of the base text color.

EYEBROW TEXT
Headline Weight 500
This is a subhead at weight 300. It provides supporting context beneath the headline. Always lighter, always secondary.
04

Spacing & Layout

An 8px base grid with responsive section padding and a 12-column layout system.

Spacing Scale (8px base)
space-1
4px
space-2
8px
space-3
12px
space-4
16px
space-6
24px
space-8
32px
space-12
48px
space-16
64px
space-20
80px
space-24
96px
Breakpoints
Mobile
0 - 639px
Tablet
640 - 1023px
Desktop
1024 - 1279px
Wide
1280px +
Container
Standard: mx-auto max-w-7xl px-6 lg:px-12 /* 1280px max */ Narrow: mx-auto max-w-3xl px-6 /* 768px max */ Wide: mx-auto max-w-screen-xl px-6 lg:px-16 /* 1280px max */ Grid: 4 cols (mobile) → 8 cols (tablet) → 12 cols (desktop) Gutter: 16px (mobile) → 24px (desktop) Section: py-16 sm:py-20 lg:py-24
05

Elevation & Radius

Shadow and corner radius tokens that create consistent depth across surfaces.

Elevation Scale
Level 0none
Level 1Subtle divider
Level 2Resting cards
Level 3Elevated cards
Level 4Modals, dropdowns
OverlayFull overlays
Border Radius
sm4px
md6px
lg8px
xl12px
2xl16px
full9999px
06

Motion

Duration and easing tokens for consistent, purposeful animation across all products.

Duration Scale
Instant
100ms
Fast
150ms
Normal
220ms
Moderate
350ms
Slow
500ms
Slower
700ms
Standard Framer Motion Variants
// Entrance animation const fadeUp = { hidden: { opacity: 0, y: 20 }, visible: { opacity: 1, y: 0, transition: { duration: 0.5, ease: "easeOut" } }, }; // Stagger children const stagger = { hidden: {}, visible: { transition: { staggerChildren: 0.08 } }, }; // Viewport trigger <motion.div initial="hidden" whileInView="visible" viewport={{ once: true, amount: 0.15 }} variants={stagger} />
07

Core Components

24 production-ready components with interactive previews. Each includes anatomy, states, and accessibility guidance.

Button (Dark Surface)
Primary: white bg. Secondary: bordered. Ghost: text only.
States: default, hover, active, focus, disabled, loading
Button (Light Surface)
Gradient: action gradient. Destructive: error red for delete actions.
Sizes: sm (32px), md (40px), lg (48px)
Pill Tabs / Solution Selector
Active tab gets solution color fill. Inactive: outlined.
We'll send your ROX report here
Company name already exists
Input
Default, hover (teal glow), focus (ring), error (red border + message).
Select
Custom styled to match Input. Uses appearance:none with chevron.
Badge scanning
Lead scoring
Real-time
Batch sync
Checkbox & Radio
Checked: teal fill. Radio: teal dot. Both 20px with visible focus ring.
Real-time sync
Notifications
Toggle / Switch
On: teal track. Off: muted. 40x22px with 18px thumb.
Active Trade Show Field Sales Event Elite ROX Critical Draft
Badge
11px uppercase, 600 weight. Tinted background with matching text.
✓ Lead saved to CRM
✗ Sync failed. Retry?
⚠ Badge scanner low battery
ℹ 3 new leads captured
Toast / Notification
Success, error, warning, info. Auto-dismiss 5s (except error).
JH
MB
AK
A
B
C
Avatar
Sizes: 24/32/40/56/80px. Stacked with -8px overlap + white border.
Export as PDF
Tooltip
13px, 6px 10px padding, 300ms show delay. Auto-flip placement.
Overview
Leads
Analytics
Tab panel content with AnimatePresence crossfade
Tabs
Pill (active fill), underline, segmented variants. 250ms crossfade.
Sync Progress
Upload
Progress Bar
6px (default) or 4px (compact). Action gradient fill.
Skeleton Loader
Pulse animation at 1.5s. Match dimensions of content being loaded.
Case Study
Mustang CAT
85% faster lead capture at CONEXPO-CON/AGG 2026.
Card
Variants: default, elevated, dark, outline, solution, interactive.
LeadEventScore
Sarah ChenCONEXPO92
Mike TorresDevCon58
Table
Header: uppercase 11px. Rows: 48px min. Hover highlight. Sortable.
Dashboard / Events / CONEXPO 2026
Breadcrumb
13px, separator at 30% opacity. Current page: weight 500.
Export Leads×
Select format and date range for your export.
Modal / Dialog
Overlay blur, focus trap, Escape to close. Sizes: sm/md/lg.
Edit Event
Duplicate
Delete
Dropdown Menu
12px radius, shadow-xl. Items: 36px min height. Keyboard nav.
What is badge scanning?⌄
Badge scanning captures attendee data from event credentials using NFC, QR, or barcode technology.
How does ROX scoring work?⌄
Accordion
Chevron rotates 180deg. Content height animates. Button trigger.
←
1
2
3
...
12
→
Pagination
Active: teal fill. 36px items. Ellipsis for overflow. Keyboard nav.
Content above
Content below
Or
Divider
Horizontal, vertical, or with centered label. Dark surface variant.
08

Design Patterns

Reusable patterns for common interface scenarios across all products.

Forms

Single-column layout, max-width 480px. Labels above inputs.

  • Validate on blur, not on keystroke
  • Error: red border + message below field
  • Focus first invalid field on submit
  • Spinner inside submit button while loading
  • Field-to-field gap: 20px (space-5)

Navigation

Platform-specific patterns for each product surface.

  • Web: Fixed top bar + collapsible sidebar (240px)
  • iPad: Top bar + optional bottom tabs
  • Phone: Top bar + bottom tab bar (5 max)
  • Touch: Minimal chrome, maximum content
  • Max 7 top-level items on desktop

Error States

Specific, actionable, and never show raw errors.

  • Input: Red border + message below
  • Page: Centered illustration + next step
  • Network: Toast with retry action
  • 404/500: Illustration + link to home
  • Use role="alert" for critical errors

Empty States

Guide users toward their first action.

  • Muted icon (48px, 30% opacity)
  • Headline: 20px, weight 500
  • Description: 15px, weight 400, muted
  • Primary action button below
  • Centered, py-16 vertical padding

Loading States

Skeleton loaders for initial, spinners for refresh.

  • Initial load: skeleton matching content layout
  • Data refresh: opacity 0.5 + spinner
  • Button: inline spinner replaces label
  • Images: gray placeholder with fade-in
  • Never block entire page with full spinner

Touch Targets

Minimum sizes per product for reliable touch input.

  • Web App: 36px min, 44px recommended
  • iPad App: 44px min, 48px recommended
  • Phone App: 44px min, 48px recommended
  • Touch Device: 48px min, 56px recommended
  • Icon buttons: 8px padding around icon
09

Dos & Don'ts

Clear guidelines for consistent implementation across teams.

Color

Do

  • Use teal (#00BBA5) for eyebrows and interactive accents
  • Use cyan (#0CF4DF) on dark backgrounds only
  • Apply gradient text only on Display/H1 over dark surfaces
  • Verify contrast ratios when layering opacity values

Don't

  • Use teal for small body text on white (fails contrast)
  • Use cyan on white or light backgrounds
  • Apply gradient text on light backgrounds or body text
  • Use error red for decorative elements
Typography

Do

  • Use weight 500 for headlines, weight 300 for subheads
  • Use uppercase + tracking for eyebrows (12px/600)
  • Use clamp() for responsive headline sizing
  • Keep body text at 15px across all breakpoints

Don't

  • Use weight 700 (bold) for headlines
  • Use uppercase for body text or headlines
  • Use fixed pixel sizes for headlines across breakpoints
  • Allow widows or orphans in paragraphs
Components

Do

  • Use semantic HTML (button, nav, table)
  • Provide aria-label on icon-only buttons
  • Trap focus inside open modals
  • Animate with opacity and transform only

Don't

  • Use div with click handlers for interactive elements
  • Leave icon buttons without accessible names
  • Animate width, height, top, left (layout thrash)
  • Replay entrance animations on every scroll
Content

Do

  • Use hyphens over em dashes
  • Lead with outcomes and metrics
  • Keep button labels concise (1-3 words)
  • Use sentence case for UI labels

Don't

  • Use em dashes in any copy
  • Lead with feature descriptions
  • Write sentences as button labels
  • Use Title Case or ALL CAPS for labels (except eyebrows)
10

Developer Handoff

Naming conventions, token usage, and implementation notes for all four products.

Token Usage Priority
1. Tailwind utility classes (preferred) 2. CSS custom properties via var() (when Tailwind lacks a utility) 3. Inline hex values (only for dynamic/computed values) Never hardcode hex values that exist as tokens.
Naming Conventions
/* CSS / Token Names */ {category}-{property}-{variant} color-brand-cyan, spacing-4, radius-lg, elevation-3 /* Components */ PascalCase, no abbreviations Button, InputField, SelectMenu, ModalDialog /* Props */ camelCase Boolean: isDisabled, isLoading, hasError Handler: onClick, onChange, onBlur Enum: variant="primary", size="md"
Component Hierarchy
Primitives (atomic) Button, Input, Select, Checkbox, Radio, Toggle, Badge, Avatar, Divider, Skeleton, Spinner, ProgressBar Composites (combine primitives) InputField, Card, Modal, Toast, Tooltip, Dropdown, Tabs, Accordion, Table, Breadcrumb, Gauge Patterns (composites + layout + behavior) Navbar, Sidebar, FormPage, DataTable, EmptyState, ErrorBoundary, PageShell
Platform-Specific Notes
ConcernWeb AppiPadPhoneTouch Device
FrameworkNext.js + ReactReact Native / WebViewReact Native / WebViewReact (kiosk)
Min Target36px44px44px48px
Nav PatternSidebar 240pxBottom tabsBottom tabsMinimal
Body Text15px16px16px18px
Hover StatesYesNoNoNo
Z-Index Scale
z-base: 0 default stacking z-dropdown: 10 dropdown menus, popovers z-sticky: 20 sticky headers, floating elements z-overlay: 30 modal overlays, sidepanel backdrops z-modal: 40 modal dialogs z-navbar: 50 fixed navigation bar z-toast: 60 toast notifications (always on top)
Key Files
Website/src/app/globals.css All CSS tokens, gradients, keyframes Website/src/app/layout.tsx Font imports, root HTML structure Website/design-tokens.json Structured token file (JSON) Website/DESIGN_SYSTEM.md Full written specification Brand/design-system.html This visual reference (you are here)