Skill Wiki
Vercel
Achromatic minimalism as engineering principle: Geist Sans with extreme -2.4px to -2.…
$ prime install @community/persona-vercelProjection
Always in _index.xml · the agent never has to ask for this.
Vercel [persona] v1.0.0
Achromatic minimalism as engineering principle: Geist Sans with extreme -2.4px to -2.88px tracking on near-white #ffffff canvas, shadow-as-border replacing every CSS border, and grayscale-only chrome with workflow accents (Ship Red / Preview Pink / Develop Blue) reserved strictly for pipeline contexts.
Loaded when retrieval picks the atom as adjacent / supporting.
Vercel [persona] v1.0.0
Achromatic minimalism as engineering principle: Geist Sans with extreme -2.4px to -2.88px tracking on near-white #ffffff canvas, shadow-as-border replacing every CSS border, and grayscale-only chrome with workflow accents (Ship Red / Preview Pink / Develop Blue) reserved strictly for pipeline contexts.
School
vercel
Implies
- Font:
- Display: Geist (Geist Sans) with fallbacks Arial, Apple Color Emoji, Segoe UI Emoji
- Body: Geist weight 400 body, 500 UI, 600 headings — no bold 700 except 7px micro-badges
- Monospace: Geist Mono with fallbacks ui-monospace, SFMono-Regular, Roboto Mono, Menlo
- Color:
- Temperature: neutral
- Palette: Vercel Black #171717 primary, background #ffffff, gray-600 #4d4d4d, gray-500 #666666, gray-400 #808080, gray-100 #ebebeb, gray-50 #fafafa, link blue #0072f5, workflow Ship Red #ff5b4f, Preview Pink #de1d8d, Develop Blue #0a72ef (pipeline contexts only)
- Background: #ffffff
- Density: balanced — 8px base spacing (scale jumps 16px → 32px, no 20px or 24px), radius 2px inline / 4px small / 6px functional / 8px cards / 12px featured, 1200px max-width, 80–120px hero padding
- Layout: gallery-empty minimalism — centered 1200px, 12-col grid, 48px/600 hero with extreme negative tracking, feature grids with shadow-bordered cards
- Imagery: monochrome product screenshots with multi-layer shadow stacks; Develop Blue/Preview Pink/Ship Red workflow pipeline diagrams as brand imagery
- Motion: opacity-only and shadow transitions — 200ms ease-out; no bouncy springs; liga ligatures structural not decorative
Example Brands
- Vercel
Composition
- Must Include:
- @impeccable/template-oklch-palette
- @community/pattern-button-press-feedback
- @impeccable/template-card-hover-lift
- Must Avoid:
- @community/anti-pattern-thin-weight-body
- @community/anti-pattern-generic-saas-blue
- Typography Required:
- Display: Geist Sans
- Weight Signature: 600
- Tracking: -2.4px to -2.88px at 48px display
- Color Required:
- Background: #ffffff
- Primary: #171717
- Border Style: box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)
- Motion Prescriptions:
- @impeccable/template-card-hover-lift
- @impeccable/template-easing-curves
Loaded when retrieval picks the atom as a focal / direct hit.
Vercel [persona] v1.0.0
Achromatic minimalism as engineering principle: Geist Sans with extreme -2.4px to -2.88px tracking on near-white #ffffff canvas, shadow-as-border replacing every CSS border, and grayscale-only chrome with workflow accents (Ship Red / Preview Pink / Develop Blue) reserved strictly for pipeline contexts.
School
vercel
Implies
- Font:
- Display: Geist (Geist Sans) with fallbacks Arial, Apple Color Emoji, Segoe UI Emoji
- Body: Geist weight 400 body, 500 UI, 600 headings — no bold 700 except 7px micro-badges
- Monospace: Geist Mono with fallbacks ui-monospace, SFMono-Regular, Roboto Mono, Menlo
- Color:
- Temperature: neutral
- Palette: Vercel Black #171717 primary, background #ffffff, gray-600 #4d4d4d, gray-500 #666666, gray-400 #808080, gray-100 #ebebeb, gray-50 #fafafa, link blue #0072f5, workflow Ship Red #ff5b4f, Preview Pink #de1d8d, Develop Blue #0a72ef (pipeline contexts only)
- Background: #ffffff
- Density: balanced — 8px base spacing (scale jumps 16px → 32px, no 20px or 24px), radius 2px inline / 4px small / 6px functional / 8px cards / 12px featured, 1200px max-width, 80–120px hero padding
- Layout: gallery-empty minimalism — centered 1200px, 12-col grid, 48px/600 hero with extreme negative tracking, feature grids with shadow-bordered cards
- Imagery: monochrome product screenshots with multi-layer shadow stacks; Develop Blue/Preview Pink/Ship Red workflow pipeline diagrams as brand imagery
- Motion: opacity-only and shadow transitions — 200ms ease-out; no bouncy springs; liga ligatures structural not decorative
Example Brands
- Vercel
Composition
- Must Include:
- @impeccable/template-oklch-palette
- @community/pattern-button-press-feedback
- @impeccable/template-card-hover-lift
- Must Avoid:
- @community/anti-pattern-thin-weight-body
- @community/anti-pattern-generic-saas-blue
- Typography Required:
- Display: Geist Sans
- Weight Signature: 600
- Tracking: -2.4px to -2.88px at 48px display
- Color Required:
- Background: #ffffff
- Primary: #171717
- Border Style: box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.08)
- Motion Prescriptions:
- @impeccable/template-card-hover-lift
- @impeccable/template-easing-curves
Relations
contradicts: [@community/anti-pattern-thin-weight-body, @community/anti-pattern-generic-saas-blue]
Compatible
- vercel-clean
- swiss-modernist
- dense-pragmatist
- tokyo-minimal
Conflicts
- brutalist
- warm-institutional
- notion-warm
- magazine-editorial
Contradicts
- @community/anti-pattern-thin-weight-body
- @community/anti-pattern-generic-saas-blue
Source
prime-system/examples/frontend-design/primes/compiled/@community/persona-vercel/atom.yaml