Design System

Complete design system for the Percus backoffice application.

Brand Colors

Primary Palette

Deep Blue
#0F4C81
Primary brand color, headings, navigation

Sky Blue
#1E88E5
Interactive elements, links, highlights

Percus Orange
#FF6B35
Call-to-action, active states, highlights

Neutral Palette

Slate 900
#0F172A
Primary text

Slate 700
#334155
Secondary text

Slate 500
#64748B
Tertiary text, labels

Slate 300
#CBD5E1
Borders, dividers

Slate 100
#F1F5F9
Backgrounds, fills

Slate 50
#F8FAFC
Page backgrounds

Semantic Colors

Success
#10B981
Success states, positive metrics

Warning
#F59E0B
Warnings, caution states

Error
#EF4444
Errors, destructive actions

Info
#3B82F6
Informational messages

Typography

Font Family

Primary Font: Inter

font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

Why Inter?

• Excellent readability at all sizes
• Professional and modern
• Great support for numbers and data
• Widely used in SaaS applications

Type Scale

Level	Size	Weight	Line Height	Usage
Display	2.5rem (40px)	700	1.2	Page titles
H1	2rem (32px)	700	1.25	Main headings
H2	1.5rem (24px)	600	1.3	Section headings
H3	1.25rem (20px)	600	1.4	Subsection headings
H4	1.125rem (18px)	600	1.4	Card titles
Body Large	1rem (16px)	400	1.6	Primary body text
Body	0.875rem (14px)	400	1.5	Secondary body text
Small	0.75rem (12px)	500	1.5	Labels, captions

Spacing System

We use an 8px base unit for consistent spacing:

Token	Size	Usage
xs	0.25rem (4px)	Tight spacing
sm	0.5rem (8px)	Small gaps
md	1rem (16px)	Default spacing
lg	1.5rem (24px)	Section spacing
xl	2rem (32px)	Large gaps
2xl	3rem (48px)	Major sections

Border Radius

Token	Size	Usage
sm	6px	Buttons, badges
md	8px	Inputs, small cards
lg	12px	Cards, panels
xl	16px	Large containers
full	9999px	Pills, rounded buttons

Shadows

/* Small - Subtle elevation */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

/* Medium - Cards, dropdowns */
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

/* Large - Modals, popovers */
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);

/* Orange accent shadow (hover states) */
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.2);

Components

Buttons

Primary Button

background: #FF6B35;
color: white;
padding: 0.5rem 1rem;
border-radius: 6px;
font-weight: 600;
border: 1px solid #FF6B35;

Hover:

background: #E55A28;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);

Secondary Button

background: white;
color: #64748B;
padding: 0.5rem 1rem;
border-radius: 6px;
border: 1px solid #E2E8F0;

Hover:

border-color: #FF6B35;
color: #FF6B35;
background: #FFF5F1;

Cards

background: white;
border-radius: 12px;
padding: 1.5rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
border-left: 3px solid #F1F5F9;
transition: all 0.2s;

Hover:

border-left-color: #FF6B35;
box-shadow: 0 4px 12px rgba(255, 107, 53, 0.15);

Badges

Status Badges

Active (Production):

background: #FFE8DD;
color: #C7440A;
border: 1px solid #FFCDB3;
padding: 0.25rem 0.75rem;
border-radius: 999px;
font-size: 0.75rem;
font-weight: 600;

Testing:

background: #DBEAFE;
color: #1E40AF;
padding: 0.25rem 0.75rem;
border-radius: 999px;

Previous/Inactive:

background: #F1F5F9;
color: #64748B;
padding: 0.25rem 0.75rem;
border-radius: 999px;

Input Fields

padding: 0.625rem 1rem;
border: 1px solid #E2E8F0;
border-radius: 8px;
font-size: 0.875rem;

Focus:

outline: none;
border-color: #FF6B35;
box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);

Navigation

Top Navigation

• Height: 64px
• Background: white
• Border bottom: 1px solid #E2E8F0
• Sticky positioning

Project Tabs

• Active tab: Orange underline (#FF6B35), bold text
• Hover: Deep blue text (#0F4C81)
• Border bottom: 2px for active state

Icons & Emojis

We use emojis for quick visual indicators:

• 🟢 Production/Active
• 🔵 Testing/Beta
• ⚪ Previous/Inactive
• 📊 Analytics/Charts
• 📧 Email
• 🔔 Notifications
• ↑ Positive growth
• ↓ Negative change

Accessibility

Color Contrast

All text meets WCAG AA standards:

• Body text: 4.5:1 minimum
• Large text: 3:1 minimum
• Interactive elements: Clear focus states

Focus States

All interactive elements have visible focus indicators using orange glow:

box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);

Responsive Design

• Mobile-first approach
• Breakpoints: 640px, 768px, 1024px, 1280px
• Touch targets minimum 44x44px

Implementation

Tailwind CSS Configuration

The backoffice uses Tailwind CSS with custom configuration:

module.exports = {
  theme: {
    extend: {
      colors: {
        'percus-blue': '#0F4C81',
        'percus-sky': '#1E88E5',
        'percus-orange': '#FF6B35',
      },
      fontFamily: {
        sans: ['Inter', 'system-ui', 'sans-serif'],
      },
    },
  },
}

Design Principles

1. Clarity First - Information should be clear and scannable
2. Progressive Disclosure - Show what's needed, hide what's not
3. Consistent Patterns - Similar actions look similar
4. Feedback - Every action has a response
5. Data-Dense - Optimize for information density without clutter

UI Mockup

View the interactive mockup: static/design/backoffice-simplified.html

The mockup shows:

• Landing Page: Stats overview + project cards grid
• Project Detail - Templates: Version management table with Production/Testing/Previous indicators
• Project Detail - Integration: API credentials and code examples
• Project Detail - Analytics: Campaign-specific metrics and charts