Tutorbase

Overview

Tutorbase is a purpose-built SaaS platform for tutoring centers and language schools, designed to replace fragmented spreadsheet workflows with a unified, intelligent management system. The brand embodies "Practical Minimalism"—a design philosophy that prioritizes clarity, efficiency, and task-focused workflows over decorative elements. The aesthetic is clean, professional, and approachable: a near-black primary color (#18181b) paired with vibrant accent blues (#3b82f6) and greens (#16a34a) creates visual hierarchy without sacrificing accessibility. The UI evokes confidence and reliability, speaking to educators who value precision and time-saving automation.

Tutorbase's voice is direct, solution-oriented, and empathetic to the pain points of tutoring business operators. The tone avoids jargon; instead, it uses concrete, action-oriented language. Vocabulary emphasizes simplicity ("Stop juggling apps"), automation ("automate billing"), and business outcomes ("run your business"). The brand personality is that of a trusted operational partner—knowledgeable but never condescending, efficient but never cold. Example sentence in brand voice: "Your calendar now understands tutoring—lessons, rooms, and instructor availability sync in real time, so you spend less time scheduling and more time teaching."

Colors

The color system is anchored in a near-black primary (#18181b) that serves as the dominant text and button color, conveying authority and professionalism. This is paired with a secondary blue (#3b82f6) used for interactive elements, links, and data visualization (e.g., calendar event highlights), and a tertiary green (#16a34a) for success states, availability indicators, and positive confirmations. The surface stack uses a clean white (#ffffff) as the base with carefully calibrated grays (surface-container: #e5e7eb, on-surface-variant: #6b7280) to create subtle visual separation without introducing visual noise. Error states use a warm red (#ef4444) for destructive actions and validation feedback. The outline-variant (#d4d4d8) is used for subtle borders on input fields and card separators,

Typography

The type system uses Plus Jakarta Sans (a geometric, friendly sans-serif) for headlines and display text, paired with Inter (a highly legible humanist sans-serif) for body copy and UI labels. This pairing creates a visual hierarchy that feels both modern and accessible: Plus Jakarta Sans's distinctive letterforms draw attention to key messaging (headlines at 50px, fontWeight 700, lineHeight 58px with -0.03em tracking), while Inter's neutral character ensures body text remains scannable at 16px, fontWeight 400, lineHeight 24px. The label system uses Plus Jakarta Sans at 14px, fontWeight 500 with 0.01em tracking for button text and form labels, creating visual distinction from body copy. For small UI elements (badges, timestamps), label-sm uses Inter at 12px, fontWeight 500 with 0.02em track

Layout

The layout system uses a 12-column grid with a maximum container width of 1280px, allowing for flexible, responsive design that scales from mobile (single column) to desktop (full grid). The page rhythm is governed by semantic spacing: lg spacing (40px) separates major sections (hero, features, testimonials), md spacing (24px) is used for component padding and section subsections, and sm spacing (12px) is used for internal component spacing (button padding, list item gaps). The gutter (24px) is applied consistently to left/right margins on all major containers, ensuring content never touches viewport edges. White space is treated as a design element: generous vertical rhythm (1.5x line-height on body text) and breathing room around cards and buttons reduce cognitive load and guide the eye

Elevation & Depth

Depth in Tutorbase is achieved through a subtle shadow and border system rather than dramatic layering. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for subtle UI elements like hover states on list items, md (0 3px 8px rgba(0, 0, 0, 0.15)) for standard cards and dropdowns, and lg (0 8px 24px rgba(15, 23, 42, 0.25)) for modals and elevated overlays. Every card and interactive container includes a 1px border in outline-variant (#d4d4d8), which provides visual definition without relying solely on shadow. On hover, cards transition from md to lg shadow with a 150ms cub

Shapes

The shape philosophy is "Soft-Technical"—rounded corners are used strategically to soften the interface without introducing organic or playful aesthetics. Buttons and primary interactive elements use lg radius (1rem / 16px), creating a friendly, approachable feel while maintaining a professional appearance. Cards and containers use xl radius (1.5rem / 24px), providing visual softness and making the interface feel less rigid. Input fields and smaller UI components use DEFAULT radius (0.5rem / 8px), a subtle rounding that aids visual scanning without drawing attention. The full radius (9999px) i

Components

Action Elements Buttons are the primary affordance for user action. The button-primary component uses a solid near-black background (#18181b) with white text, 10px vertical / 20px horizontal padding, and lg radius (16px). On hover, the background shifts to primary-container (#2d2d30) with a 150ms transition, creating a subtle but perceptible state change. The button-cta-large variant increases padding to 16px / 32px and height to 48px, used for hero CTAs and primary form submissions. All buttons use Plus Jakarta Sans at 14px, fontWeight 500, ensuring text remains crisp and scannable. Secondary buttons use a transparent background with a 1px outline in outline (#9ca3af), allowing them to sit comfortably alongside primary buttons without competing for attention.

Containers & Surface

Do's and Don'ts

**Do**

• Do use the near-black primary (#18181b) for all primary CTAs and main navigation—it is the most trustworthy and professional color in the system.
• Do apply the secondary blue (#3b82f6) exclusively to interactive elements (links, active states, data highlights) so it remains a reliable affordance for user interaction.
• Do maintain generous white space (lg spacing: 40px) between major sections to reduce cognitive load and guide the eye through the interface.
• Do use Plus Jakarta Sans for all headlines and display text to create visual hierarchy; reserve Inter for body copy and UI labels.
• Do transition all interactive elements (buttons, cards, inputs) with 150ms cubic-bezier(0.4, 0, 0.2, 1) easing to create a cohesive, polished feel.
• Do use the tertiary green (#16a34a) for success states and positive confirmations (e.g., "Available", "Confirmed") to create a consistent language for positive outcomes.

**Don't**

• Don't use the secondary blue (#3b82f6) for body text, backgrounds, or non-interactive elements—it must remain reserved for interactive affordances.
• Don't apply shadows heavier than lg (0 8px 24px rgba(15, 23, 42, 0.25)) to avoid creating a cluttered, layered appearance that contradicts the Practical Minimalism aesthetic.
• Don't use rounded corners smaller than DEFAULT (8px) on interactive elements; the softness is a key part of the approachable brand personality.
• Don't mix Plus Jakarta Sans and Inter within a single headline or body paragraph—maintain clear typographic hierarchy by using Plus Jakarta Sans for headlines only.
• Don't apply color to more than one accent color per component (e.g., don't use both blue and green in a single button or card)—this creates visual confusion and dilutes the color system.
• Don't use the error red (#ef4444) for non-destructive actions or warnings; reserve it exclusively for errors, deletions, and critical alerts.