EINSTEIN DESIGN BRAIN — Global Default for Every Project
> This is a universal design directive. It applies to every project on this machine unless a project-level CLAUDE.md explicitly overrides it. It does not modify any existing files, components, or content — it only shapes how NEW hero sections, landing pages, and animated sequences are built from this point forward.
> **Override rule:** If any project CLAUDE.md contains a `## VISUAL DNA` or `## DESIGN OVERRIDE` section, that project's rules win. This file is the default, not the mandate.
---
1. THE CORE FEELING
The default aesthetic for hero sections and landing pages is a **film opening** — slow, deliberate, tension-building, then reveal.
Not a marketing page. Not a SaaS template. A *film opening*.
Concretely this means:
- The hero should not show everything at once. It should stage a reveal.
- The first frame should feel composed — like a shot, not a screen.
- There should be a moment of stillness before anything moves.
- When movement happens, it should feel intentional, not decorative.
- The viewer should feel "something is about to happen" before they see what it is.
A hero built under this directive should not look like it could be on any SaaS site. It should feel like it belongs to *this specific project* and no other.
---
2. HERO CONSTRUCTION RULES
When building a hero section, use this structure by default:
**Opening frame (the "shot"):**
- One central subject. Not a grid of features. Not a 2-column layout with a headline on the left and an illustration on the right.
- Generous negative space. The page should breathe.
- Typography does most of the visual work. Headlines should be large, confident, and typographically specific — not default sans-serif body-weight at 48px.
- The central element can be text, a single image, a single piece of data, or a single object. Never three of anything.
**The reveal sequence:**
- Content should appear in deliberate stages, not all at once.
- Use staggered entrances — the headline arrives first, supporting text a beat later, CTA or secondary elements last.
- Stagger timings should feel directed: 200–600ms gaps, not 50ms spray.
- Easing should be cinematic: prefer `cubic-bezier(0.22, 1, 0.36, 1)` (aka "easeOutExpo") or similar slow-out curves over linear or ease-in-out.
**The rhythm:**
- Let a beat of stillness exist before the first animation starts. ~300–500ms of nothing.
- Animations should feel like they're carrying weight. Faster is not better. A headline that takes 900ms to fully settle feels confident; one that takes 200ms feels nervous.
---
3. ANIMATION DEFAULTS (bold & cinematic, scroll-driven)
Animation is a first-class citizen in every hero, not an afterthought.
**Entry animations:**
- Default entry pattern: opacity 0 → 1, combined with a 20–40px translateY, over 700–1000ms, staggered across elements.
- Do not use bounce, spring overshoot, or playful physics. These feel consumer-app, not cinematic.
- Blur-to-clear transitions (filter: blur(8px) → blur(0)) are welcome as a secondary effect on the hero headline.
**Scroll-driven animation (default behavior):**
- As the user scrolls, the hero should not just disappear — it should transform, dissolve, scale, or transition into the next section.
- Use scroll progress (not fixed triggers) to drive animations wherever possible. Tools: Framer Motion's `useScroll` + `useTransform`, GSAP ScrollTrigger, or CSS `animation-timeline: scroll()` where supported.
- Fullscreen transitions between sections are welcome and encouraged. A section should not simply end; it should hand over to the next one.
**Parallax:**
- Subtle parallax is welcome (background moves slower than foreground, 0.3–0.5x rate).
- Avoid aggressive parallax that breaks legibility on mobile.
**Motion restraint:**
- Despite "bold & cinematic," never animate everything. Pick 2–4 hero elements to animate with weight. Let the rest hold still.
- Stillness is a compositional choice, not a failure of ambition.
---
4. TYPOGRAPHY AS HERO
In the default aesthetic, typography is the lead actor, not a supporting role.
- Hero headlines should be genuinely large: 72–140px on desktop, 44–72px on mobile. Not 32px with bold weight pretending to be large.
- Line-height on display type should be tight: 0.95–1.1. Default browser line-height is lazy.
- Letter-spacing should be considered — condensed display type usually needs slight negative tracking; light display type often benefits from slight positive tracking.
- Mix weights and styles within a single headline when it creates drama (e.g., a light regular weight next to an italic, or a word in a different family for emphasis). But do this ONCE per hero, not everywhere.
- Avoid Inter, Poppins, Montserrat, and DM Sans as hero display faces — they are the default "AI-built site" typefaces. Prefer: Fraunces, Editorial New, PP Neue Montreal, Migra, Söhne, Neue Haas Grotesk Display, Tiempos Headline, Fraktion, GT America, Reckless, Surt, Canela, Tanker, or typographically distinctive open-source alternatives like Fraunces, Instrument Serif, IBM Plex Serif, or Space Grotesk.
- When a project CLAUDE.md specifies its own typography (e.g., getgoldsilver specifies Barlow Condensed), that specification wins — do not override.
---
5. COLOR RESTRAINT
- The hero should generally use 2–3 colors. Not 5. Not a gradient containing 7 stops.
- One of those colors should be a surface color (background), one should be the primary type color, and one should be a reserved accent.
- The accent appears 1–2 times in the hero, never more. It is not a decorative element — it is a signal.
- Avoid gradient backgrounds by default. If a gradient is used, it should be a slow shift between two closely-related colors (not rainbow), and it should have a purpose (e.g., directing the eye toward a focal point).
- Avoid the default "AI landing page" palette: soft lavender, teal, pastel pink, peach. These now read as machine-made.
---
6. IMAGERY
- If imagery is used, it should feel earned, not decorative stock.
- One strong image beats a collage.
- Avoid: 3D abstract blobs, gradient meshes, isometric illustrations of smiling people at desks, generic "tech" abstractions (glowing circuit boards, floating cubes), AI-generated hero images that don't match the brand's real context.
- Prefer: real photography when available, documentary-style or editorial-style images, high-contrast black-and-white where appropriate, original illustration or typography-as-image over stock.
---
7. INTERACTION SIGNALS
- The primary CTA should be a real button — confident, restrained, one primary action. Not "Get Started for Free!" Not three CTAs fighting for attention.
- Hover states on the hero should be present but subtle. Avoid "scale(1.1)" hovers on everything — that's consumer-app behavior.
- A scroll indicator, if used, should be typographic or minimal (a small arrow, a word, a thin line animation), not an animated mouse icon.
---
8. MOBILE DEFAULTS
The cinematic treatment must survive on mobile. This is non-negotiable.
- Hero headline should still be large on mobile (44–72px), not collapsed to 28px for "safety."
- Scroll-driven animations should be simplified on mobile if they hurt performance, but not removed entirely.
- Negative space should be preserved; don't cram mobile with "more content because there's a scroll."
- Test on an actual small viewport before claiming done.
---
9. TECHNICAL PREFERENCES (when choice is available)
- **Animation library:** Framer Motion for React projects (it's already in most of this portfolio's stack). GSAP is acceptable when Framer Motion can't do what's needed.
- **Smooth scroll:** Lenis is preferred (already in use on getgoldsilver).
- **Performance:** Animations must not cause layout shifts. Use `transform` and `opacity`, not `top`, `left`, or `width`.
- **Reduced motion:** Respect `prefers-reduced-motion`. When set, replace motion with instant fades or no animation at all — never a half-hearted version of motion.
---
10. WHAT TO DO WHEN UNCERTAIN
When the brief is vague or the design direction unclear:
1. Ask before building. State the interpretation being considered. Don't just pick.
2. Propose the hero in words first — describe the opening frame, the reveal sequence, the stillness moments — before writing any code.
3. Reference this document's core feeling: film opening, bold cinematic, scroll-driven.
4. If the user has provided reference URLs or screenshots, study them for rhythm and restraint, not for surface features to copy.
---
11. ADDITIVE ONLY — DO NOT REFACTOR
This directive applies to NEW hero sections, landing pages, and animated sequences being built going forward.
- Do not "upgrade" or rewrite existing heroes on projects that are already shipped, unless explicitly asked.
- Do not delete existing animations, components, or design elements in the name of aligning to this brain.
- Do not touch any file that isn't directly part of the current task.
- Every change should be additive and traceable to an explicit user request.
---
*This is the default design brain. It is deliberately opinionated. Projects that need to override it should do so explicitly in their own CLAUDE.md under a `## VISUAL DNA` or `## DESIGN OVERRIDE` heading. In silence, build cinematic.*