Superhuman
Luxury-productivity aesthetic: Super Sans VF at non-standard weight 540 / line-height 0.…
$ aoe install @community/persona-superhumanProjection
Always in _index.xml · the agent never has to ask for this.
Superhuman [persona] v1.0.0
Luxury-productivity aesthetic: Super Sans VF at non-standard weight 540 / line-height 0.96 on pure white with a single cinematic hero in Mysteria Purple #1b1938, warm cream #e9e5dd CTAs, and lavender #cbb7fb as the sole accent.
Loaded when retrieval picks the atom as adjacent / supporting.
Superhuman [persona] v1.0.0
Luxury-productivity aesthetic: Super Sans VF at non-standard weight 540 / line-height 0.96 on pure white with a single cinematic hero in Mysteria Purple #1b1938, warm cream #e9e5dd CTAs, and lavender #cbb7fb as the sole accent.
School
superhuman
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Implies
- Font:
- Display: Super Sans VF variable font with fallbacks system-ui, -apple-system, Segoe UI, Roboto
- Body: Super Sans VF weight 460 — workhorse body weight between conventional 400 and 500
- Accent: Messina Sans / Messina Serif / Messina Mono (Luzi Type) for product UI contexts
- Color:
- Temperature: neutral
- Palette: hero bg #1b1938 Mysteria Purple, primary text #292827 Charcoal Ink (warm near-black), dark text color(srgb 1 1 1 / 0.95), accent #cbb7fb Lavender Glow, link #714cb6 Amethyst Link, button bg #e9e5dd Warm Cream, border #dcd7d3 Parchment Border
- Background: #ffffff
- Density: spacious — only two radius values (8px buttons/spans, 16px cards/links), 8px base spacing, 48–80px vertical section padding, ~1200px max-width
- Layout: cinematic single hero gradient dissolving to all-white content body, large product screenshots as content anchors, minimal surrounding copy
- Imagery: large product UI screenshots (email interface) as primary content — the interface sells itself; no stock photography
- Motion: cinematic but quiet — hero gradient is the one dramatic gesture; interactive states use opacity + underline, not color shifts or animation
Example Brands
- Superhuman
Composition
- Must Include:
- @impeccable/template-card-hover-lift
- @community/fact-variable-font-axes
- @community/principle-typography-hierarchy
- Must Avoid:
- @impeccable/persona-brutalist
- @impeccable/persona-dense-pragmatist
- Typography Required:
- Display: Super Sans VF weight 540
- Body: Super Sans VF weight 460
- Line Height Display: 0.96
- Color Required:
- Background: #ffffff
- Hero: #1b1938
- Accent: #cbb7fb
- Motion Prescriptions:
- @impeccable/template-easing-curves
- @impeccable/template-card-hover-lift
Loaded when retrieval picks the atom as a focal / direct hit.
Superhuman [persona] v1.0.0
Luxury-productivity aesthetic: Super Sans VF at non-standard weight 540 / line-height 0.96 on pure white with a single cinematic hero in Mysteria Purple #1b1938, warm cream #e9e5dd CTAs, and lavender #cbb7fb as the sole accent.
School
superhuman
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Implies
- Font:
- Display: Super Sans VF variable font with fallbacks system-ui, -apple-system, Segoe UI, Roboto
- Body: Super Sans VF weight 460 — workhorse body weight between conventional 400 and 500
- Accent: Messina Sans / Messina Serif / Messina Mono (Luzi Type) for product UI contexts
- Color:
- Temperature: neutral
- Palette: hero bg #1b1938 Mysteria Purple, primary text #292827 Charcoal Ink (warm near-black), dark text color(srgb 1 1 1 / 0.95), accent #cbb7fb Lavender Glow, link #714cb6 Amethyst Link, button bg #e9e5dd Warm Cream, border #dcd7d3 Parchment Border
- Background: #ffffff
- Density: spacious — only two radius values (8px buttons/spans, 16px cards/links), 8px base spacing, 48–80px vertical section padding, ~1200px max-width
- Layout: cinematic single hero gradient dissolving to all-white content body, large product screenshots as content anchors, minimal surrounding copy
- Imagery: large product UI screenshots (email interface) as primary content — the interface sells itself; no stock photography
- Motion: cinematic but quiet — hero gradient is the one dramatic gesture; interactive states use opacity + underline, not color shifts or animation
Example Brands
- Superhuman
Composition
- Must Include:
- @impeccable/template-card-hover-lift
- @community/fact-variable-font-axes
- @community/principle-typography-hierarchy
- Must Avoid:
- @impeccable/persona-brutalist
- @impeccable/persona-dense-pragmatist
- Typography Required:
- Display: Super Sans VF weight 540
- Body: Super Sans VF weight 460
- Line Height Display: 0.96
- Color Required:
- Background: #ffffff
- Hero: #1b1938
- Accent: #cbb7fb
- Motion Prescriptions:
- @impeccable/template-easing-curves
- @impeccable/template-card-hover-lift
Relations
related: [@impeccable/persona-editorial, @impeccable/template-easing-curves, @impeccable/template-card-hover-lift, @community/principle-typography-hierarchy, @community/check-line-length-optimal, @community/fact-variable-font-axes, @community/constraint-typography-weight-blacklist, @community/fact-line-height-readability, @community/principle-color-system-foundation, @community/check-contrast-aa, @community/rule-single-accent-color, @community/rule-brand-color-primary-only, @community/anti-pattern-generic-saas-blue, @community/check-color-blacklist-brand, @community/constraint-max-color-roles-7] compatible: [editorial, warm-institutional, notion-warm, stripe-fintech] conflicts: [brutalist, dense-pragmatist, vercel-clean] contradicts: [@impeccable/persona-brutalist, @impeccable/persona-dense-pragmatist]
Compatible
- editorial
- warm-institutional
- notion-warm
- stripe-fintech
Conflicts
- brutalist
- dense-pragmatist
- vercel-clean
Contradicts
- @impeccable/persona-brutalist
- @impeccable/persona-dense-pragmatist
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/persona-superhuman/atom.yaml