Apptivo

Overview

Apptivo's design system embodies 'Professional Clarity'—a design philosophy that prioritizes actionable information hierarchy and user confidence in enterprise software. The brand serves mid-market sales teams and SMBs who demand both power and simplicity; the interface transforms complex CRM workflows into intuitive, task-focused experiences. The aesthetic combines warm, energetic accent colors (primary orange #dd5e0b, secondary cyan #1fade4) against a clean white canvas, creating visual energy without cognitive overload. The emotional response is one of capability and control: users feel equipped to manage their pipeline, not overwhelmed by it.

Apptivo's voice is direct, professional, and empowering—never patronizing, never breathless. The brand uses concrete language ('close deals,' 'manage leads,' 'grow your business') and avoids marketing hyperbole. Vocabulary leans toward action verbs and business outcomes. Example sentence in brand voice: 'Your sales pipeline is now visible in one dashboard—track every deal from first contact to close.'

Colors

The color system is built on a foundation of trust (white surface #ffffff, neutral text #3c3f40) with two complementary accent roles. Primary orange (#dd5e0b) is the signature action color—used exclusively on high-priority CTAs ('Try For Free,' 'Get Started'), form submissions, and success states. This warm, energetic hue signals forward momentum and is never used for passive elements. Secondary cyan (#1fade4) serves as a supporting accent for secondary actions, links, and informational highlights; it provides visual contrast without competing for attention. Tertiary teal (#6bbdb2) is reserved for status badges, confirmations, and data visualization accents. The surface stack progresses from pure white (#ffffff) through carefully calibrated grays (#f5f5f5 → #dddddd) to create subtle depth

Typography

The type system uses Inter exclusively, a geometric sans-serif that conveys modernity and clarity. Display (60px, 700 weight, -0.04em tracking) is reserved for hero headlines and major page titles; Headline-lg (42px, 600 weight) anchors section introductions; Headline-md (28px, 600 weight) breaks content into scannable chunks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory copy and feature descriptions, while Body-md (16px, 400 weight, 24px line-height) is the default for body text and form labels. Label-md (14px, 600 weight, 0.01em tracking) is applied to button text, navigation items, and form field labels to ensure crisp readability at smaller sizes. Label-sm (12px, 500 weight, 0.02em tracking) is used for helper text, timestamps, and secondary metadata. All headl

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing flexible content scaling from mobile (single column) to desktop (multi-column layouts). The gutter spacing is consistently 24px (md spacing unit), creating rhythm and breathing room between sections. Page sections are separated using lg spacing (40px) for major transitions (hero to features, features to testimonials) and md spacing (24px) for subsection breaks. The white background (#ffffff) is the dominant surface, with subtle surface-container variants (#f5f5f5, #e8e8e8) used sparingly for card backgrounds or section dividers to avoid visual fragmentation. Input fields and form containers use the full-width approach with max-width constraints on desktop to maintain focus. The spacing scale is seman

Elevation & Depth

Elevation in Apptivo's system is achieved through subtle shadows and surface color shifts rather than dramatic depth. Level 1 (Base): the white background (#ffffff) with no shadow. Level 2 (Standard Card): box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), used on cards, input fields, and standard containers; background is white or surface-container-low (#f0f0f0). Level 3 (Elevated/Modal): box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), applied to modals, dropdowns, and floating panels; background is white with a subtle border at 1px solid #d8d8d8. Hover states on cards transition to Level 3 shadow over 2

Shapes

The shape philosophy is 'Approachable Precision'—combining rounded corners for friendliness with strategic sharpness for professional authority. Primary buttons use full-radius (border-radius: 9999px, padding: 10px 54px) to signal warmth and approachability; secondary buttons use minimal radius (4px) to convey technical precision. Input fields use full-radius (50px) to match primary buttons, creating visual cohesion in forms. Cards and containers use md radius (12px, 0.75rem) as the default, balancing softness with structure. Modals and overlays use lg radius (16px, 1rem) to distinguish them f

Components

Action Elements Buttons are the primary interaction mechanism. Primary buttons (background: #dd5e0b, color: #ffffff, border-radius: 9999px, padding: 10px 54px, height: 44px, font-weight: 600) are used for high-priority CTAs like 'Try For Free' and 'Get Started'; they use Inter label-md typography and transition to #ff8c42 on hover over 200ms. Secondary buttons (background: #1fade4, color: #ffffff, border-radius: 4px, padding: 12px 10px, height: 40px) are for supporting actions like 'Schedule Demo' or 'Contact Us'; they use the same typography but a more technical border-radius. Tertiary buttons (background: transparent, color: #3c3f40, border: 1px solid #aeaeae, border-radius: 8px) are for low-priority actions and use the surface-container-high background on hover. All buttons include

Do's and Don'ts

**Do**

• Do use primary orange (#dd5e0b) exclusively for high-priority CTAs and success states—never for passive elements or backgrounds.
• Do maintain the 24px gutter spacing between sections and 12px padding within components to create consistent visual rhythm.
• Do apply full-radius (border-radius: 9999px) to all primary buttons and input fields to signal approachability and create visual cohesion.
• Do use Inter typography at the specified weights and sizes; never mix typefaces or deviate from the defined scale.
• Do apply the 200ms transition on all interactive states (hover, focus, active) to provide smooth, predictable feedback.
• Do use the surface-container variants (#f5f5f5, #e8e8e8, #dddddd) for subtle depth; never introduce new grays outside this stack.

**Don't**

• Don't use secondary cyan (#1fade4) for primary CTAs—it is a supporting accent only and will dilute the primary action hierarchy.
• Don't apply shadows larger than 0 8px 24px rgba(0, 0, 0, 0.12) on standard elements; excessive shadow depth creates visual noise.
• Don't use border-radius values outside the defined scale (sm, DEFAULT, md, lg, xl, full); arbitrary radii break the design system.
• Don't mix Inter with system fonts or other typefaces; the type system is built on Inter's geometric clarity and must remain consistent.
• Don't apply color directly to text without using the on-surface or on-primary token pairs; hardcoded colors break accessibility and theming.
• Don't use more than two accent colors in a single interface section; visual complexity should be reserved for data-heavy contexts like dashboards.