Bobbin by TutorCruncher

Overview

Bobbin is an AI-powered lesson planning and tutoring platform that embodies 'Purposeful Warmth'—a design philosophy that balances sophisticated automation with human-centered approachability. The interface transforms complex educational workflows into intuitive, seamless experiences through a carefully calibrated dark-to-warm color palette and refined typography system. The brand serves tutoring companies and individual educators, evoking a sense of professional confidence paired with genuine care for the teaching craft. The aesthetic movement draws from 'Architectural Minimalism with Warmth': clean lines, purposeful spacing, and a restrained accent color (#fbf27e) that signals action and progress without overwhelming the interface. The emotional response is one of clarity and momentum—users feel supported, not burdened, by the technology.

Bobbin's voice is precise, encouraging, and grounded in the reality of tutoring work. The vocabulary avoids jargon in favor of concrete, action-oriented language: 'Plan without headaches,' 'Capture without confusion,' 'Report without procrastination.' The brand personality is that of a trusted colleague—knowledgeable, patient, and genuinely invested in the user's success. Example sentence in brand voice: 'Tell Bobbin what you're teaching next and it'll create a fully editable, structured lesson plan—so you spend less time planning and more time teaching.'

Colors

The color system centers on a sophisticated dark foundation (#1d1813 surface) paired with a warm, energetic accent (#fbf27e primary). This combination creates visual hierarchy without harshness: the dark background provides focus and reduces cognitive load, while the pale yellow accent (#fbf27e) signals interactive elements, CTAs, and moments of progress. Primary (#fbf27e) is used exclusively for call-to-action buttons, active states, and key interactive elements—it appears in the 'Start free trial' button (rgba(251, 242, 126, 1)) and secondary CTAs, creating a consistent visual language of action. The surface stack progresses from #0f0c0a (surface-container-lowest, used for deeply recessed elements) through #1d1813 (surface, the main canvas) to #3a3228 (surface-container-highest, for elev

Typography

The typography system pairs GT Alpina (serif, used for headlines and display text) with GT Standard (sans-serif, used for body and UI text), creating a sophisticated yet approachable visual hierarchy. Display and headline-lg use GT Alpina at 60px and 48px respectively with 400 weight and -0.02em letter-spacing, establishing a calm, editorial quality that conveys expertise without aggression. Body text (16px, 400 weight, 24px line-height) uses GT Standard for clarity and scannability, essential for a platform where users rapidly parse lesson plans and reports. The label system (14px and 12px) employs 500 weight and 0.01–0.05em letter-spacing to create visual distinction for interactive elements and metadata. When displaying small labels over busy backgrounds (e.g., proof tags like '5-10 min

Layout

The layout system employs a fluid 12-column grid with a maximum container width of 1512px, allowing content to breathe on large displays while remaining focused on smaller screens. The primary container uses padding of 24px (md spacing) on mobile and tablet, scaling to 80px (20 × 4px unit) on desktop, creating a responsive gutter that adapts to viewport width. Section separation uses lg spacing (40px) for major content blocks and md spacing (24px) for subsections, establishing a clear visual rhythm that guides users through the platform's features. The hero section occupies the full viewport height (950px as defined in CSS custom properties), with the primary CTA positioned at a comfortable thumb-reach height on mobile. Card-based layouts use 24px padding internally and are separated by 24

Elevation & Depth

Depth in Bobbin is conveyed through a restrained shadow system and subtle background color shifts rather than dramatic layering. Level 1 (Base) uses the surface color (#1d1813) with no shadow, establishing the primary canvas. Level 2 (Standard Cards) applies box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft separation from the background without drawing excessive attention. Level 3 (Elevated Modals and Overlays) uses box-shadow: 0 7px 15px rgba(250, 177, 47, 0.15), a warm-tinted shadow that subtly references the primary accent color and creates a sense of floating importance. The warm

Shapes

The shape philosophy is 'Refined Pragmatism'—rounded corners are used strategically to soften the interface while maintaining clarity and hierarchy. Buttons use full radius (9999px), creating a pill-shaped form that signals interactivity and approachability; this is applied consistently to all primary and secondary CTAs. Cards and containers use lg radius (24px), balancing softness with definition—sharp enough to feel intentional, rounded enough to feel welcoming. Input fields use DEFAULT radius (16px), slightly less rounded than cards to create visual distinction between containers and intera

Components

Action Elements Buttons are the primary interactive element and use full radius (9999px) with 12px vertical and 24px horizontal padding, resulting in a 48px height that meets accessibility touch-target guidelines. Primary buttons (#fbf27e on #1d1813) use 500 weight GT Standard at 14px, with a transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) on hover to #f0e367. Secondary buttons use a transparent background with a 1px solid border in #fbf27e, maintaining visual hierarchy while offering an alternative action path. Focus states apply a 3px outline in rgba(251, 242, 126, 0.3) with a 2px offset, ensuring keyboard navigation is always visible.

Containers & Surfaces Cards use 24px padding, 24px border-radius, and a 1px border in #70685c (outline-variant), creating subtle

Do's and Don'ts

**Do**

• Do use the primary yellow (#fbf27e) exclusively for CTAs, active states, and moments of progress—it is the visual signal for user action and must remain reserved and impactful.
• Do maintain the 16:1 contrast ratio between on-surface text (#f7f4f0) and surface background (#1d1813) to ensure accessibility and readability across all text sizes.
• Do apply the 150ms cubic-bezier(0.4, 0, 0.2, 1) transition timing consistently to all interactive state changes (hover, focus, active) to create a cohesive, responsive feel.
• Do use GT Alpina (serif) for headlines and display text to establish editorial authority; reserve GT Standard (sans-serif) for body, labels, and UI text for clarity.
• Do respect the spacing scale (md for component padding, lg for section separation) to maintain visual rhythm and prevent the interface from feeling cramped or scattered.

**Don't**

• Don't use the primary yellow (#fbf27e) for non-interactive elements, backgrounds, or decorative purposes—it must remain a signal of actionability and would lose impact if overused.
• Don't apply shadows darker than 0 7px 15px rgba(250, 177, 47, 0.15) or use pure black shadows; the warm-tinted shadow system is integral to the brand's aesthetic and should be preserved.
• Don't mix serif and sans-serif fonts within a single text block or component; maintain clear separation between GT Alpina (headlines) and GT Standard (body/UI) to preserve hierarchy.
• Don't use border-radius values outside the defined scale (sm: 12px, DEFAULT: 16px, md: 20px, lg: 24px, xl: 36px, full: 9999px)—arbitrary rounding breaks the visual system's coherence.
• Don't reduce the line-height below 1.3 for body text or below 1.25 for headlines; the generous line-height is essential for readability and the warm, spacious aesthetic.