TutorCruncher

Overview

TutorCruncher is enterprise-grade tutoring management software that consolidates scheduling, billing, payments, and lesson coordination into a single platform. Serving 1,800+ tutoring companies globally, it embodies a "Functional Clarity" aesthetic—combining a light, sky-blue canvas (#d5f3ff) with deep navy accents (#362e83) to create an interface that feels both approachable and authoritative. The brand personality is professional yet warm, speaking to business owners who value efficiency without sacrificing human connection. The UI prioritizes clarity through generous whitespace, high-contrast typography, and purposeful color blocking that guides users through complex workflows.

The voice is direct, confident, and solution-oriented. TutorCruncher speaks in the language of business outcomes: "Scale your business without the headache," "Built for how tutoring businesses actually work." The tone avoids jargon while maintaining credibility; example sentence: "From test prep centers to enterprise tutoring networks, TutorCruncher is an all-in-one platform to manage scheduling, USD billing, ACH payments, tutors, and lessons." Every interaction—from button labels to error messages—reinforces that this software understands the tutoring business.

Colors

The color system is built on a "Bright Minimalism" philosophy: a light, energetic background (#d5f3ff, rgb(213, 243, 255)) paired with a sophisticated primary accent (#362e83, rgb(54, 46, 131)) that commands attention on CTAs and key interactions. The primary color is used exclusively for high-priority actions ("Start a free trial," "Accept all") and interactive states, ensuring users always know where to click. Secondary blue (#3da2f5, rgb(61, 162, 245)) provides a lighter accent for supporting elements, links, and hover states, creating visual rhythm without competing with primary. The surface stack is deliberately minimal: white (#ffffff) for cards and containers, light gray (#f6f6f6, #ecf5f6) for subtle backgrounds, and the sky-blue base (#d5f3ff) for the page background. Text is alway

Typography

The type system pairs Halyard Display (headlines, CTAs, labels) with Inter (body, supporting text), creating a clear hierarchy that guides users through information architecture. Display and headline-lg sizes (90px, 60px) use Halyard Display at 700 weight with aggressive negative letter-spacing (-1.2px, -0.6px) to command attention on hero sections and major section breaks. Headline-md (40px, 700 weight, -0.4px letter-spacing) is used for subsection titles and card headers. Title-lg (32px, 600 weight) bridges headlines and body text, used for feature names and modal titles. Body-lg (20px, 400 weight, -0.4px letter-spacing) is the primary reading size for longer-form content, while body-md (16px, 400 weight, -0.32px letter-spacing) handles form labels, descriptions, and secondary text. Labe

Layout

The layout uses a 12-column grid with a max-width of 1360px, centered on the viewport with symmetric gutters of 24px. The page rhythm alternates between full-width hero sections (background: {colors.surface}, padding: 64px 24px) and contained content sections (max-width: 1100px, margin: 0 auto, padding: 40px 24px). Section separation uses lg spacing (40px) for breathing room between major content blocks; within sections, md spacing (24px) separates subsections and card groups. The hero section spans the full viewport height with a light blue background (#d5f3ff), featuring a large headline (60–90px), supporting copy (body-lg), and two primary CTAs side-by-side. Cards are arranged in responsive grids: 1 column on mobile, 2–3 columns on tablet, 4 columns on desktop, each with md padding (24p

Elevation & Depth

Depth is conveyed through a subtle shadow and border system rather than dramatic layering. Level 1 (Base): the page background is {colors.surface} (#d5f3ff) with no shadow. Level 2 (Standard Card): cards use box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15) with a 1px solid border at rgba(31, 55, 78, 0.15), creating a soft lift from the background. Level 3 (Elevated/Modals): modals and expanded cards use box-shadow: 0 6px 6px rgba(0, 0, 0, 0.25) with a 2px solid border at {colors.primary} (#362e83), signaling importance and focus. Interactive elements (buttons, inputs) use no shadow at rest; on hover,

Shapes

The shape philosophy is "Soft-Technical Pragmatism": rounded corners are used consistently to soften the interface while maintaining a business-appropriate aesthetic. Buttons and CTAs use {rounded.lg} (30px border-radius), creating a friendly, inviting appearance that encourages clicks without feeling playful. Cards and containers use {rounded.xl} (40px) for the most prominent surfaces (hero cards, feature cards), signaling importance and visual hierarchy. Modals and form containers use {rounded.DEFAULT} (8px), a tighter radius that conveys structure and formality. Inputs and smaller interacti

Components

Action Elements Buttons are the primary interaction mechanism and use a distinctive 3D lift effect. **Button-primary** (background: {colors.primary} #362e83, color: white, border: 1.5px solid #362e83, border-radius: 30px, padding: 12px 18px 14px, font-size: 18px, font-weight: 700, font-family: halyard-display) is used for high-priority CTAs like "Start a free trial" and "Accept all." On hover, apply transform: translateY(-6px) and box-shadow: 0 6px 0 0 #0c042c (tertiary) with a 0.2s linear transition, creating a tactile lift. On active/click, reduce the shadow to 0 2px 0 0 #0c042c and transform: translateY(-2px) with transition-duration: 0.1s. **Button-secondary** uses the same dimensions but with a transparent background, {colors.primary} text, and a 1.5px border; hover and active sta

Do's and Don'ts

**Do**

• Do use {colors.primary} (#362e83) exclusively for high-priority CTAs and interactive states—never dilute its impact by overusing it on secondary elements.
• Do maintain the 3D button lift effect (transform: translateY(-6px), box-shadow: 0 6px 0 0 #0c042c) on all primary buttons to reinforce the tactile, business-friendly interaction model.
• Do apply negative letter-spacing (-0.4px to -1.2px) on all display and headline text to create visual tightness and authority; body text should use 0 or minimal letter-spacing for readability.
• Do use the full surface stack (surface, surface-container, surface-container-high, surface-container-highest) to create subtle visual hierarchy without introducing new colors.
• Do pair Halyard Display with Inter: headlines and CTAs in Halyard, body and supporting text in Inter—never mix them within a single text block.
• Do use {rounded.lg} (30px) for buttons and {rounded.xl} (40px) for hero cards to signal importance; tighter radii (8px) for inputs and modals to convey structure.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) as primary text or background—always use {colors.on-surface} (#1f374e) for text and {colors.surface} (#d5f3ff) for the page background.
• Don't apply shadows to buttons at rest; only use box-shadow on hover and active states to maintain a clean, minimalist appearance.
• Don't introduce new accent colors outside the defined palette (primary #362e83, secondary #3da2f5, tertiary #0c042c)—the system is intentionally constrained to maintain brand cohesion.
• Don't use letter-spacing greater than 0.1em on body text; it reduces readability and feels scattered on a light background.
• Don't nest accordions or cards more than two levels deep; the visual hierarchy becomes confusing and violates the clarity-first principle.
• Don't apply box-shadow to more than 10% of elements on a single page—overuse dilutes the depth system and creates visual noise.