Supabase
Dark-mode-native BaaS developer aesthetic: Circular weight 400 at 1.00 line-height on near-black #171717 with PostgreSQL-green #3ecf8e as identity-only accent, depth built entirely from border-color stepping rather than …
$ aoe install @community/persona-supabaseProjection
Always in _index.xml · the agent never has to ask for this.
Supabase [persona] v1.0.0
Dark-mode-native BaaS developer aesthetic: Circular weight 400 at 1.00 line-height on near-black #171717 with PostgreSQL-green #3ecf8e as identity-only accent, depth built entirely from border-color stepping rather than shadows.
Loaded when retrieval picks the atom as adjacent / supporting.
Supabase [persona] v1.0.0
Dark-mode-native BaaS developer aesthetic: Circular weight 400 at 1.00 line-height on near-black #171717 with PostgreSQL-green #3ecf8e as identity-only accent, depth built entirely from border-color stepping rather than shadows.
School
supabase
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Implies
- Font:
- Display: Circular with fallbacks custom-font, Helvetica Neue, Helvetica, Arial
- Body: Circular weight 400 — same family across display and body
- Monospace: Source Code Pro with fallbacks Office Code Pro, Menlo
- Color:
- Temperature: cool-neutral
- Palette: brand green #3ecf8e logo/accent, link green #00c573, green border rgba(62,207,142,0.3), page bg #171717, button/deepest bg #0f0f0f, primary text #fafafa, secondary text #b4b4b4, muted #898989, border subtle #242424, card border #2e2e2e, button border #363636
- Background: #171717
- Density: airy sections — 8px base spacing, dramatic section scale 48 → 90 → 96 → 128px, cards 8–16px radius, pill CTAs at 9999px, single 600px mobile/desktop breakpoint
- Layout: single-column hero with terminal-command density, large pill CTAs, OSS-identity section anchors with Source Code Pro uppercase mono labels
- Imagery: product-first — terminal screenshots and database diagrams; no stock photography; glass dark rgba(41,41,41,0.84) surfaces for overlaid panels
- Motion: minimal — rgba(0,0,0,0.1) 0px 4px 12px focus-only shadow; hover states via border-color stepping, not movement
Example Brands
- Supabase
Composition
- Must Include:
- @impeccable/template-oklch-palette
- @impeccable/template-oklch-dark-mode-cascade
- Must Avoid:
- @impeccable/persona-warm-institutional
- @impeccable/persona-notion-warm
- Typography Required:
- Display: Circular
- Weight Signature: 400
- Line Height Display: 1.00
- Color Required:
- Background: #171717
- Accent: #3ecf8e
- Border Depth: #242424 → #2e2e2e → #363636
- Motion Prescriptions:
- @community/pattern-hover-lift
- @impeccable/template-dark-mode-toggle
Loaded when retrieval picks the atom as a focal / direct hit.
Supabase [persona] v1.0.0
Dark-mode-native BaaS developer aesthetic: Circular weight 400 at 1.00 line-height on near-black #171717 with PostgreSQL-green #3ecf8e as identity-only accent, depth built entirely from border-color stepping rather than shadows.
School
supabase
Meta
- License: Apache-2.0
- License Provenance: package-authorship-claim
Implies
- Font:
- Display: Circular with fallbacks custom-font, Helvetica Neue, Helvetica, Arial
- Body: Circular weight 400 — same family across display and body
- Monospace: Source Code Pro with fallbacks Office Code Pro, Menlo
- Color:
- Temperature: cool-neutral
- Palette: brand green #3ecf8e logo/accent, link green #00c573, green border rgba(62,207,142,0.3), page bg #171717, button/deepest bg #0f0f0f, primary text #fafafa, secondary text #b4b4b4, muted #898989, border subtle #242424, card border #2e2e2e, button border #363636
- Background: #171717
- Density: airy sections — 8px base spacing, dramatic section scale 48 → 90 → 96 → 128px, cards 8–16px radius, pill CTAs at 9999px, single 600px mobile/desktop breakpoint
- Layout: single-column hero with terminal-command density, large pill CTAs, OSS-identity section anchors with Source Code Pro uppercase mono labels
- Imagery: product-first — terminal screenshots and database diagrams; no stock photography; glass dark rgba(41,41,41,0.84) surfaces for overlaid panels
- Motion: minimal — rgba(0,0,0,0.1) 0px 4px 12px focus-only shadow; hover states via border-color stepping, not movement
Example Brands
- Supabase
Composition
- Must Include:
- @impeccable/template-oklch-palette
- @impeccable/template-oklch-dark-mode-cascade
- Must Avoid:
- @impeccable/persona-warm-institutional
- @impeccable/persona-notion-warm
- Typography Required:
- Display: Circular
- Weight Signature: 400
- Line Height Display: 1.00
- Color Required:
- Background: #171717
- Accent: #3ecf8e
- Border Depth: #242424 → #2e2e2e → #363636
- Motion Prescriptions:
- @community/pattern-hover-lift
- @impeccable/template-dark-mode-toggle
Relations
related: [@impeccable/persona-vercel-clean, @impeccable/template-oklch-palette, @impeccable/template-dark-mode-toggle, @community/principle-typography-hierarchy, @community/check-line-length-optimal, @community/fact-monospace-purpose, @community/rule-font-self-host, @community/rule-typography-letter-spacing, @impeccable/template-oklch-dark-mode-cascade, @community/pattern-color-dark-mode-pairing, @community/principle-color-system-foundation, @community/check-color-oklch-required, @community/check-color-dark-mode-cascade, @community/check-contrast-aa, @community/rule-single-accent-color, @community/anti-pattern-generic-saas-blue, @community/check-color-blacklist-brand] compatible: [vercel-clean, dense-pragmatist, swiss-modernist, tokyo-minimal] conflicts: [warm-institutional, magazine-editorial, notion-warm] contradicts: [@impeccable/persona-warm-institutional, @impeccable/persona-notion-warm]
Compatible
- vercel-clean
- dense-pragmatist
- swiss-modernist
- tokyo-minimal
Conflicts
- warm-institutional
- magazine-editorial
- notion-warm
Contradicts
- @impeccable/persona-warm-institutional
- @impeccable/persona-notion-warm
Source
aoe-engine/examples/frontend-design/primes/compiled/@community/persona-supabase/atom.yaml