Skip to content

.impeccable.md

Latest commit

 

History

History
35 lines (31 loc) · 4.47 KB

.impeccable.md

File metadata and controls

35 lines (31 loc) · 4.47 KB

Design Context

Users

K-12, high school, and college students plus self-directed learners of all ages. Academic users are time-pressured and juggling multiple subjects. Self-directed users are curious and motivated. Both groups want to feel capable and in control of their learning.

Brand Personality

Alive, growing, energetic — but also calm, trustworthy, and focused. The tension between vitality and steadiness is the brand's core. Think: a thriving plant in a quiet library. Growth is visible, but never chaotic. More atmospheric with animations.

Aesthetic Direction

  • Unified across marketing and app — landing, careers, about, and dashboard all share the same visual language
  • Atmospheric and cinematic — inspired by PlayStation's immersive, dramatic presence: bold typography, full use of space, visual weight and intention. Not dark — but carries that sense of depth and atmosphere in a light context
  • Background animation direction: game console menu style (Wii U / Playstation) — very subtle, barely-there colorful orbs drifting slowly in 3D space. Animated rendering in background menu. Orb colors are independent of branding — warm, atmospheric palette (soft blues, purples, ambers, teals). Kept at very low opacity — you feel them more than you see them. The effect is atmospheric ambience, not decoration. Like the glow under water. Depth through scale and opacity variation, very slow rotation. UI components remain solid and fully unblurred. The page's existing pale green background tint must be preserved. Green is reserved for UI branding only, not the animation.
  • Khan Academy's clarity as a baseline — accessible hierarchy, clean structure, educational warmth — but elevated with Sapling's own green identity and more visual ambition
  • Light mode — clean, airy, grounded; atmosphere comes from composition and type, not darkness
  • No glassmorphism — completely off the table. No blur effects, no frosted panels, no glass cards
  • Nature-inspired but structured — organic warmth (greens, earthy tones) with precise, intentional layout
  • Serif for soul, sans for function — Playfair Display / Spectral for brand moments, DM Sans for UI
  • Primary brand: #1B6C42 dark forest green
  • Positive references: PlayStation (atmospheric, cinematic, bold), Khan Academy (clear, warm, educational)
  • Anti-references: Anything that looks like a 2024–2025 AI SaaS product or ChatGPT wrapper. The specific fingerprints to eliminate:
    • Bubble panel disease — identical rounded cards tiled in grids, each with an icon + heading + body. Every AI product landing page looks like this. Sapling uses type hierarchy, editorial layout, and atmospheric depth instead of card containers.
    • Glassmorphism: frosted panels, backdrop-blur, translucent cards
    • Gradient text on headings (bg-clip-text)
    • Cyan-on-dark, neon accents, purple-to-blue gradients
    • "AI-Powered" pills with pulsing dots
    • Hero metric layouts (big number, small label, gradient accent)
    • Dark mode with glowing UI chrome
    • The counter-strategy: atmospheric background animation (PlayStation / Wii U style — barely-there drifting orbs, the knowledge-graph node canvas) does the work that generic bubble panels cannot. The background IS the personality. Solid, clean UI sits on top of that living atmosphere. The combination of grounded typography + atmospheric animation is what makes Sapling feel distinctive — not decorative surface treatments like cards and glass.

Design Principles

  1. Ground everything — surfaces should feel solid and real, not floating or translucent
  2. Let white space breathe — don't fill every pixel; negative space is part of the design
  3. Hierarchy through type, not decoration — use scale, weight, and spacing to guide the eye, not cards or dividers
  4. Color communicates, not decorates — green means growth/mastery, amber means in-progress, red means struggling; use color purposefully
  5. Motion serves atmosphere and understanding — animation is a first-class branding tool when used atmospherically. The floating knowledge-graph node canvas is the reference aesthetic: slow-drifting colored nodes in 3D space, barely-there, organic and alive. This vibe should carry into UI motion — entrances, transitions, and ambient effects should feel like the knowledge tree: purposeful depth, gentle drift, never frantic. Animation can impress when it genuinely represents the brand; it should not impress through spectacle alone.