Teamzo

Overview

Teamzo is a modern SaaS HR platform template that embodies 'Accessible Minimalism'—a design philosophy that prioritizes clarity and usability without sacrificing visual sophistication. The brand serves startups and growing companies seeking streamlined HR management, and the interface evokes confidence through clean typography, generous whitespace, and strategic use of a vibrant electric blue accent. The emotional response is one of calm professionalism: users feel they are in control of complex HR workflows, not overwhelmed by them. Teamzo's voice is direct, practical, and empowering—never corporate-speak, never jargon-heavy. The vocabulary favors action words (Get Started, Book a Demo, Manage) and concrete benefits (hiring, onboarding, payroll). Example sentence in brand voice: 'Teamzo handles the paperwork so your team can focus on what matters.'

Colors

The color system is built on a foundation of clean white (#ffffff) and soft off-white surfaces (#f7f9fb, #e0e4ee) that create visual breathing room. Primary (#195eff) is an electric, saturated blue used exclusively for call-to-action buttons, interactive states, and brand moments—it commands attention without aggression. Secondary (#69b9f0) is a lighter, more approachable sky blue reserved for supporting elements, badges, and secondary interactions. The dark text color (#191715) is near-black but not pure black, reducing eye strain on light backgrounds while maintaining 7:1 contrast ratio. Tertiary (#dfdfdf) serves as a neutral accent for dividers and disabled states. The outline token (#989dad) provides subtle borders at rgba(152, 154, 173, 1) for form fields and cards. Usage rules: Prima

Typography

The type system pairs Geist (a modern, geometric sans-serif) for headlines and display text with Inter (a highly legible humanist sans-serif) for body copy and labels. This pairing creates visual hierarchy through personality rather than weight alone: Geist's 600–700 weights at 40px–64px command attention in headlines, while Inter's 400 weight at 16px–18px ensures comfortable reading in dense content. Display text (64px, fontWeight 500) is reserved for hero headlines and uses -0.02em letter-spacing to tighten the letterforms. Headline-lg (40px, fontWeight 600) is used for section titles and major CTAs. Body-md (16px, fontWeight 400, lineHeight 24px) is the default paragraph text and maintains 1.5 line-height for accessibility. Label-md (14px, fontWeight 600, letterSpacing 0.01em) is applie

Layout

The layout system uses a 12-column grid with a max-width of 1280px, centered on the viewport with 24px gutters on desktop and 16px on mobile. The spacing scale is semantic: unit (8px) is the base increment, with sm (12px) for tight grouping, md (24px) for section separation, lg (40px) for major section breaks, and xl (64px) for hero and footer spacing. The hero section uses 80px vertical padding to create visual dominance, while card containers use 24px internal padding. Whitespace is treated as a design element, not wasted space—sections are separated by lg spacing (40px) to allow the eye to rest. Container max-width of 1280px ensures readability on ultra-wide displays without line lengths exceeding 75 characters. The grid is fluid on mobile (single column, 16px margins) and expands to 2–

Elevation & Depth

Depth is conveyed through subtle shadows and layered surfaces rather than dramatic drop-shadows. Level 1 (Base): the white surface (#ffffff) with no shadow. Level 2 (Standard Cards): surface-container-lowest (#f7f9fb) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08)—a soft, diffused shadow that suggests a card floating 4px above the background. Level 3 (Hover/Elevated): surface-container-low (#f0f2f5) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12)—a larger, more pronounced shadow indicating 12px elevation. Primary buttons use box-shadow: 0 2px 8px rgba(25, 94, 255, 0.2) at rest, transitioning t

Shapes

The shape philosophy is 'Geometric Approachability'—rounded corners are used consistently to soften the interface without sacrificing clarity or professionalism. Buttons use rounded-lg (16px) to create a friendly, clickable appearance while remaining distinct from cards. Cards and containers use rounded-xl (20px) for a more generous, inviting feel. Form inputs use rounded-DEFAULT (8px) to signal their functional purpose without excessive rounding. Badges and promotional elements use rounded-full (9999px) to create a pill shape that draws attention. The rationale: smaller radii (8px) are used f

Components

Action Elements Buttons are the primary interaction mechanism. Button-primary uses backgroundColor: {colors.primary} (#195eff), textColor: {colors.on-primary} (#ffffff), rounded: {rounded.lg} (16px), padding: 12px 24px, and height: 48px for touch-friendly sizing. On hover, the background darkens to #1100ff and shadow expands to 0 4px 16px rgba(25, 94, 255, 0.3). On active/pressed, the background becomes #0d00cc and shadow reduces to 0 2px 4px. All state transitions use transition: background-color 200ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 200ms cubic-bezier(0.4, 0, 0.2, 1). Button-secondary uses a transparent background with a 1px border in {colors.outline-variant} (#dadde4), and on hover, the background fills with {colors.surface-container-low} (#f0f2f5). Badges use backgroundCol

Do's and Don'ts

**Do**

• Do use primary (#195eff) exclusively for CTAs and interactive states—never for backgrounds or body text.
• Do maintain 24px gutters on desktop and 16px on mobile to ensure consistent whitespace and readability.
• Do apply 200ms transitions to all interactive state changes (hover, focus, active) using cubic-bezier(0.4, 0, 0.2, 1).
• Do use Geist for headlines (40px+) and Inter for body copy (16px–18px) to create clear visual hierarchy.
• Do keep button height at 48px minimum for touch accessibility on mobile devices.
• Do layer surfaces using the surface-container stack (#f7f9fb → #e0e4ee → #dadde4) to create subtle depth without dark overlays.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text—use #191715 for dark text and #ffffff only for surfaces.
• Don't apply shadows larger than 16px blur radius; keep elevation subtle and modern.
• Don't round button corners beyond 16px; excessive rounding reduces perceived clickability.
• Don't mix Geist and Inter within the same headline; use Geist for all display/headline text.
• Don't use secondary (#69b9f0) for primary CTAs; reserve it for supporting elements and badges only.
• Don't apply more than two levels of shadow depth in a single view; excessive layering creates visual noise.