Refto
Bobbin

Bobbin

Bobbin is an AI tutoring platform from TutorCruncher that plans lessons, captures live notes, and writes parent reports so tutors spend more time teaching.

Scrolling AnimationSaasGradientEducationAiAnimationBig Background VideoClean
4.0
13
Visits
Visit

Categories

SaasEducationAi

Available Pages

Home

Version History

Design Analysis

Bobbin Home design analysis

Build a product-marketing shell that feels direct and usable for educators rather than abstract and startup-polished. Anchor the system with one hero emphasis color and then relax into calmer supporting surfaces. Keep fo...

Key Takeaways

  • Build a product-marketing shell that feels direct and usable for educators rather than abstract and startup-polished.
  • Anchor the system with one hero emphasis color and then relax into calmer supporting surfaces.
  • Keep forms and cards legible first; novelty comes second.
  • Favor product captures, tutor workflow scenes, or simple educational diagrams.
  • Use high-contrast hero framing before introducing softer downstream modules.
  • Base the shell on 0C0C0B and keep FFF7D8 as the primary reading color.

Overview

  • Build a product-marketing shell that feels direct and usable for educators rather than abstract and startup-polished.
  • Anchor the system with one hero emphasis color and then relax into calmer supporting surfaces.
  • Keep forms and cards legible first; novelty comes second.

Image Direction

  • Favor product captures, tutor workflow scenes, or simple educational diagrams.
  • Use high-contrast hero framing before introducing softer downstream modules.

Colors

  • Base the shell on 0C0C0B and keep FFF7D8 as the primary reading color.
  • Use F3E3A2 as the main emphasis color and keep it scarce enough to preserve hierarchy.
  • Let 1B1815 and 8C8273 separate secondary surfaces without introducing noisy ornament.

Typography

  • Use GT Standard as the display voice. It should read as assertive display sans.
  • Use GT Standard for body copy, controls, and supporting metadata.
  • Let scale and spacing create emphasis before adding extra font families or decorative effects.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Blackboard Yellow Tutoring Product

A bold education-product shell built from black stages, buttery yellow hero emphasis, and direct utility cards that feel calmer below the fold.

bold, clear, and learner-facing

Primary mode: darkeducation software marketingui-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
bold, clear, and learner-facing
Density
3
Variance
3
Motion
2
Signals
primary background #0C0C0B · primary action #F3E3A2 · display font GT Standard · body font GT Standard

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Primary
#F3E3A2
Secondary
#FFFFFF
Neutral
#0C0C0B
Surface
#1B1815
On Surface
#FFF7D8
Usage rules
Keep #F3E3A2 reserved for intentional emphasis.
Use #1B1815 and #8C8273 to separate layers without over-framing them.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

xs
0.5rem
sm
0.75rem
md
1rem
lg
1.5rem
xl
2.5rem
section_gap
clamp(4rem, 8vw, 7rem)

Token Radii

Corner radii tokens with a live surface sample.

control
14px
card
18px
full
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
GT Standard
assertive display sans
Body
GT Standard
practical UI sans

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
4.5rem/—
Display
H2
2.75rem/—
H2
Body
1rem/—
Body
Label
0.9rem/—
Label

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Keep the display voice dominant in headlines only. · Use the body family consistently for UI and supporting text.

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
150ms-220ms
Easing
cubic-bezier(.3,0,.2,1)

Motion

Resolved motion token values.

PropertyValue
duration150ms-220ms
easingcubic-bezier(.3,0,.2,1)

Layout Principles

Use a clear hero split, then shift into tidy proof cards and FAQs.
Let the top of the page feel punchy while the rest of the page becomes easier to scan.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary
Base Attributes
Background
#FBF27E
Text
#111111
Border
none
Radius
999px
Padding
0 24px
Min height
48px
Shadow
none
Font family
"GT Standard", system-ui, sans-serif
Font size
16px
Font weight
500
Specimen label
Get started
Buttons secondary
Base Attributes
Background
rgba(255,255,255,0.10)
Text
rgba(255,255,255,0.9)
Border
1px solid rgba(255,255,255,0.18)
Radius
999px
Padding
0 24px
Min height
48px
Shadow
none
Font family
"GT Standard", system-ui, sans-serif
Font size
16px
Font weight
500
Backdrop filter
blur(16px)
Specimen label
Learn more
Cards default
Feature Card
Component preview content
Base Attributes
Background
#FFFFFF
Text
#111111
Border
none
Radius
20px
Padding
28px
Min width
280px
Shadow
none
Specimen label
Feature Card
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
transparent
Text
rgba(255,255,255,0.9)
Height
38px
Active text
#FFFFFF
Item padding
0 16px
Item radius
999px
Specimen label
Get started
Inputs default
Base Attributes
Background
#FFFFFF
Text
#111111
Placeholder color
rgba(17,17,17,0.4)
Border
1px solid rgba(17,17,17,0.08)
Radius
999px
Padding
0 16px
Min height
44px
Font family
"GT Standard", system-ui, sans-serif
Font size
14px
Specimen label
Your email address

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    Do not promote default browser blue links into the canonical palette.
  • -
    Do not treat low-confidence DOM wrappers as polished component evidence.
  • -
    Do not add extra accent colors that were not visually supported by the source.