Serviceplan

Overview

Serviceplan is an energetic educational platform designed to inspire learners through bold, warm visual language. The brand embodies 'Warm Maximalism'—a design philosophy that celebrates confident color, generous whitespace, and purposeful hierarchy. The interface celebrates the primary accent color (#ed4b00, a vibrant burnt orange) as the signature call-to-action, paired with a clean white canvas and supporting warm tones. The emotional response is one of approachability and momentum: users feel welcomed and motivated to engage. The brand personality is direct, encouraging, and human-centered—never corporate or sterile. Voice: conversational yet authoritative, action-oriented without being pushy. Example sentence: 'Ready to spark your potential? Join thousands learning with us today.'

Colors

The color system prioritizes warmth and accessibility through a carefully orchestrated accent-driven palette. Primary (#ed4b00) is the signature burnt orange used exclusively on call-to-action buttons, active states, and key interactive elements—it commands attention without overwhelming. On-primary (#ffffff) ensures maximum contrast (WCAG AAA compliant at 18.5:1). Secondary (#ff6900, a brighter orange) provides supporting warmth for highlights and secondary CTAs. Tertiary (#00d084, a vibrant teal) introduces a cool accent for status indicators, badges, and success states, creating visual rhythm. The surface stack anchors the design: surface (#ffffff) is the primary canvas, surface-container-low (#dedede) provides subtle depth for input fields and secondary containers, and surface-containe

Typography

The type system uses Avenir Next LT Pro as the primary typeface, delivering a modern, humanist aesthetic that balances warmth with clarity. Display (60px, 700 weight, -0.04em tracking) anchors hero sections and major announcements with commanding presence. Headline-lg (40px, 600 weight) structures page sections, while headline-md (28px, 600 weight) organizes subsections. Body-lg (18px, 400 weight, 28px line-height) is reserved for introductory paragraphs and featured content; body-md (16px, 400 weight, 24px line-height) serves as the default body text. Label-md (14px, 600 weight, 0.02em tracking) is applied to button text and form labels, ensuring legibility at smaller scales. All headlines use -0.02em to -0.04em negative letter-spacing to create visual tightness and energy. Body text main

Layout

The layout follows a 12-column grid system with a maximum container width of 1280px, ensuring content remains scannable on all devices. The spacing scale is semantic: unit (8px) is the baseline, with sm (12px) for tight grouping, md (24px) for standard section separation, lg (40px) for major section breaks, and xl (64px) for hero-to-content transitions. Gutter spacing is consistently 24px on desktop, reducing to 12px on tablets and 8px on mobile. Whitespace is generous—sections are separated by lg (40px) minimum, and card padding uses md (24px) to create breathing room around content. The container-max (1280px) prevents line lengths from exceeding 75 characters on body text, maintaining optimal readability. Grid columns are used fluidly: full-width on mobile, 6-column on tablet, and 12-col

Elevation & Depth

Elevation is conveyed through subtle shadows and layering rather than dramatic depth. Level 1 (Base): flat surfaces with no shadow, used for the primary canvas and body backgrounds. Level 2 (Standard Cards): box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), applied to cards, input fields, and standard containers—this creates a soft lift of 4px. Level 3 (Elevated/Modals): box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12), reserved for modals, dropdowns, and floating elements that demand focus. Hover states on interactive elements transition to Level 3 shadows with a 200ms cubic-bezier(0.4, 0, 0.2, 1) timin

Shapes

The shape philosophy is 'Approachable Modernity'—combining soft, rounded corners with occasional sharp edges to balance friendliness with clarity. Buttons use full (9999px) border-radius to create pill-shaped CTAs that feel inviting and clickable. Cards and containers use lg (1rem / 16px) border-radius for a modern, slightly rounded aesthetic that avoids excessive softness. Input fields use DEFAULT (0.5rem / 8px) border-radius for a subtle, professional appearance. Badges and status indicators use full (9999px) to emphasize their secondary, decorative role. The rationale: full-radius buttons a

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses {colors.primary} (#ed4b00) background with {colors.on-primary} (#ffffff) text, full border-radius, 12px 32px padding, and 48px height for touch-friendly targets. The label-md typography (14px, 600 weight) ensures legibility. Hover state transitions to #d63f00 with box-shadow: 0 8px 20px rgba(237, 75, 0, 0.3) and transform: translateY(-2px) over 200ms. Active state uses #b83500 with reduced shadow (0 2px 8px) and no transform. Button-secondary mirrors the primary structure but uses transparent background with 2px solid {colors.primary} border and {colors.primary} text. Hover state fills with {colors.primary-container} (#ffd9fa) while maintaining the border.

Containers & Surfaces Cards use {colors.surfa

Do's and Don'ts

**Do**

• Do use primary (#ed4b00) exclusively on CTAs, active states, and key interactive elements—never on passive text or backgrounds.
• Do maintain 24px gutter spacing on desktop and 12px on mobile to preserve readability and visual breathing room.
• Do apply 200ms cubic-bezier(0.4, 0, 0.2, 1) transitions to all interactive hover states for smooth, predictable feedback.
• Do use full (9999px) border-radius on buttons and badges to signal interactivity and approachability.
• Do pair warm primary and secondary colors with cool tertiary (#00d084) to create visual rhythm and prevent monotony.
• Do ensure all body text uses 24px line-height minimum and 16px font size for accessibility and comfort.

**Don't**

• Don't use primary color (#ed4b00) on body text, backgrounds, or non-interactive elements—reserve it for actions only.
• Don't apply shadows darker than rgba(0, 0, 0, 0.12) as they conflict with the warm, approachable aesthetic.
• Don't use border-radius smaller than 8px on interactive elements; it reduces perceived clickability.
• Don't mix typefaces; Avenir Next LT Pro is the sole font family across all scales and weights.
• Don't reduce padding below 12px on cards or containers; whitespace is a core brand value.
• Don't apply transitions longer than 300ms on interactive elements; they feel sluggish and reduce perceived responsiveness.