Skip to content

DESIGN.md

Latest commit

 

History

History
392 lines (340 loc) · 17 KB

DESIGN.md

File metadata and controls

392 lines (340 loc) · 17 KB
version alpha
name Pagewell Void Type System
description Cinematic pure-black marketing design system with self-hosted Geist display type, Inter micro-typography, Geist Mono technical UI, pill CTAs, product screenshots, and Framer Blue accents.
colors
primary on-primary accent secondary surface
#000000
#ffffff
#0099ff
#a6a6a6
#090909
typography
display-hero display-section heading-section heading-feature display-accent card-title feature-title sub-heading body-lg body nav-ui body-readable caption label small-caption micro-code badge micro-uppercase
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Geist Variable, Geist, Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
110px
650
0.88
-4.75px
'tnum' 1
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Geist Variable, Geist, Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
85px
620
0.96
-3.4px
'tnum' 1
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Geist Variable, Geist, Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
62px
620
1
-2.6px
'tnum' 1
fontFamily fontSize fontWeight lineHeight letterSpacing
Geist Variable, Geist, Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
32px
620
1.12
-0.9px
fontFamily fontSize fontWeight lineHeight letterSpacing
Geist Variable, Geist, Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
61.5px
300
1
-2.4px
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
24px
450
1.3
-0.2px
'cv01' 1, 'cv05' 1, 'cv09' 1, 'cv11' 1, 'ss03' 1, 'ss07' 1
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
22px
650
1.2
-0.6px
'cv05' 1
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
20px
600
1.2
-0.5px
'cv01' 1, 'cv09' 1
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
18px
400
1.35
-0.01px
'cv01' 1, 'cv05' 1, 'cv09' 1, 'cv11' 1, 'ss03' 1, 'ss07' 1
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
15px
400
1.4
-0.01px
'cv11' 1
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
15px
450
1
-0.12px
'cv06' 1, 'cv11' 1, 'dlig' 1, 'ss03' 1
fontFamily fontSize fontWeight lineHeight letterSpacing
Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
14px
400
1.6
0px
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
14px
400
1.4
0px
'cv01' 1, 'cv06' 1, 'cv09' 1, 'cv11' 1, 'ss03' 1, 'ss07' 1
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
13px
500
1.6
0px
'cv06' 1, 'cv11' 1, 'ss03' 1
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
12px
400
1.4
0px
'cv01' 1, 'cv06' 1, 'cv09' 1, 'cv11' 1, 'ss03' 1, 'ss07' 1
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Geist Mono Variable, Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
11px
450
1.6
0px
'tnum' 1
fontFamily fontSize fontWeight lineHeight letterSpacing fontFeature
Inter Variable, Inter, -apple-system, BlinkMacSystemFont, system-ui, sans-serif
10px
650
1.1
0.04em
'cv01' 1, 'cv09' 1
fontFamily fontSize fontWeight lineHeight letterSpacing
Geist Mono Variable, Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace
10px
450
1
0.06em
spacing
px 2xs xs sm md lg base 10 12 15 20 30 35 section-sm section-md section-lg container
1px
2px
3px
4px
5px
6px
8px
10px
12px
15px
20px
30px
35px
60px
80px
120px
1200px
rounded
micro sm thumbnail md card lg xl pill full
1px
5px
7px
8px
12px
15px
20px
40px
100px
components
button-primary button-frosted button-ghost link-accent muted-copy card-dark input-dark nav-bar product-screenshot
backgroundColor textColor typography rounded padding height
{colors.on-primary}
{colors.primary}
{typography.nav-ui}
{rounded.full}
10px 15px
40px
backgroundColor textColor typography rounded padding height
rgba(255, 255, 255, 0.1)
{colors.on-primary}
{typography.nav-ui}
{rounded.pill}
10px 15px
40px
backgroundColor textColor typography rounded padding height
{colors.primary}
{colors.on-primary}
{typography.nav-ui}
{rounded.pill}
10px 15px
40px
backgroundColor textColor typography
{colors.primary}
{colors.accent}
{typography.nav-ui}
backgroundColor textColor typography
{colors.primary}
{colors.secondary}
{typography.body}
backgroundColor textColor typography rounded padding
{colors.surface}
{colors.on-primary}
{typography.card-title}
{rounded.card}
30px
backgroundColor textColor typography rounded padding
{colors.surface}
{colors.on-primary}
{typography.body}
{rounded.md}
12px
backgroundColor textColor typography rounded padding height
{colors.primary}
{colors.on-primary}
{typography.nav-ui}
{rounded.pill}
8px 10px
56px
backgroundColor textColor rounded width
{colors.primary}
{colors.on-primary}
{rounded.card}
100%

Pagewell Void Type System

Overview

This system is a cinematic, tool-obsessed dark canvas for product-forward marketing pages. The UI should feel like product screenshots and live demos are floating in deep space: pure black, high contrast, crisp geometric display typography, restrained copy, and a single electric accent.

The defining personality is precision under pressure. Headlines use self-hosted Geist Variable with confident variable weights and moderate negative tracking; body and UI text use self-hosted Inter Variable; technical labels and code use Geist Mono. Framer Blue appears only where interaction or focus needs to be unmistakable. The product is the hero art, so avoid decorative illustration and let screenshots, demos, and UI surfaces carry the narrative.

Use this file as the source of truth for generated pages. The YAML front matter follows the Google Labs Code DESIGN.md format; alpha/translucent values that cannot be represented as hex color tokens are documented in prose and component literals.

Colors

The palette is intentionally minimal: a pure black void, white text, muted silver secondary copy, near-black elevated surfaces, and Framer Blue as the only accent.

  • Void Black / Primary (#000000): Page background and default canvas. Do not substitute charcoal, warm black, or gray-tinted dark surfaces.
  • Pure White / On Primary (#ffffff): High-emphasis text and solid pill CTA backgrounds.
  • Framer Blue / Accent (#0099ff): Links, focus borders, blue ring shadows, and interactive highlights only.
  • Muted Silver / Secondary (#a6a6a6): Body copy, secondary descriptions, labels, customer logos, and subdued metadata.
  • Near Black / Surface (#090909): Elevated dark cards and contained UI previews that need separation from the void.

Translucent values are part of the system even though the machine-readable color tokens must remain hex:

  • Frosted white: rgba(255, 255, 255, 0.1) for glassy pill buttons and subtle dark-surface overlays.
  • Frosted hover: rgba(255, 255, 255, 0.5) only for temporary hover/active emphasis.
  • Ghost text: rgba(255, 255, 255, 0.6) for tertiary text and placeholders.
  • Blue glow: rgba(0, 153, 255, 0.15) for ring shadows and low-opacity focus halos.

No other accent colors should appear in marketing UI. If a browser-default content link is unavoidable, use it only inside long-form content and do not promote it to a brand token.

Typography

Display type uses Geist Variable / Geist at weights 620–680. The brand gesture is clean compression, not novelty: large words should feel precise and high-contrast with moderate negative tracking. Avoid unavailable proprietary font names and avoid overly tight spacing that makes all-caps words feel distorted.

Body, UI, and captions use Inter Variable / Inter with OpenType features such as cv01, cv05, cv09, cv11, ss03, and ss07. Small text should feel custom and engineered rather than generic. Use Geist Mono Variable / Geist Mono for code, command snippets, tiny uppercase labels, tables, and technical metadata.

Primary hierarchy:

Role Token Size Weight Line Height Letter Spacing
Display Hero typography.display-hero 110px 650 0.88 -4.75px
Section Display typography.display-section 85px 620 0.96 -3.4px
Section Heading typography.heading-section 62px 620 1 -2.6px
Feature Heading typography.heading-feature 32px 620 1.12 -0.9px
Accent Display typography.display-accent 61.5px 300 1 -2.4px
Card Title typography.card-title 24px 450 1.3 -0.2px
Feature Title typography.feature-title 22px 650 1.2 -0.6px
Sub-heading typography.sub-heading 20px 600 1.2 -0.5px
Body Large typography.body-lg 18px 400 1.35 -0.01px
Body typography.body 15px 400 1.4 -0.01px
Nav/UI typography.nav-ui 15px 450 1 -0.12px
Readable Body typography.body-readable 14px 400 1.6 0px
Caption typography.caption 14px 400 1.4 0px
Label typography.label 13px 500 1.6 0px
Small Caption typography.small-caption 12px 400 1.4 0px
Micro Code typography.micro-code 11px 450 1.6 0px
Badge typography.badge 10px 650 1.1 0.04em
Micro Uppercase typography.micro-uppercase 10px 450 1 0.06em

Responsive display scaling should preserve the same clean compression: hero type moves from 110px desktop to 85px tablet, 62px small tablet, and roughly 40px mobile with proportionally reduced negative tracking.

Layout

Use an 8px base spacing rhythm with small precision steps (1px, 2px, 3px, 4px, 5px, 6px) and Framer-like practical steps (10px, 12px, 15px, 20px, 30px, 35px). Max content width is approximately 1200px, centered.

Spacing philosophy:

  • Breathe through darkness: Sections should have dramatic vertical pauses: 120px desktop, 80px tablet, and 60px mobile.
  • Dense within, spacious between: Headline blocks and product UI are tightly composed, but each section floats in generous void.
  • Product-first density: Product screenshots and demos may be visually dense; surrounding marketing copy should stay sparse.

Layout patterns:

  • Full-width hero with centered or product-adjacent display copy.
  • Product screenshots and demos as primary visual anchors.
  • Two-column feature sections on desktop: copy around 40%, screenshot or demo around 60%.
  • Single-column stacked sections on mobile below 809px.
  • Avoid light panels and decorative image sections; the black canvas is persistent.

Breakpoints:

  • Mobile (<809px): Stacked features, hamburger nav, full-width pill CTAs, hero around 40px, section spacing around 60px.
  • Tablet (809px–1199px): Two-column features begin, screenshots scale down, nav may collapse non-essential links.
  • Desktop (>1199px): Full nav and CTA, 110px hero, full 1200px container rhythm.

Elevation & Depth

Depth is inverted for a black interface. Use rings, edge highlights, and low-opacity glow instead of traditional heavy drop shadows.

Elevation levels:

Level Treatment Use
Level 0 No shadow, pure #000000 Page background and open void
Level 1 rgba(0, 153, 255, 0.15) 0px 0px 0px 1px Card borders, interactive outlines, focus containment
Level 2 rgb(9, 9, 9) 0px 0px 0px 2px Subtle near-black containment on dark surfaces
Level 3 rgba(255, 255, 255, 0.1) 0px 0.5px 0px 0.5px, rgba(0, 0, 0, 0.25) 0px 10px 30px Floating cards, overlays, elevated product surfaces

Use Framer Blue radial glows only at very low opacity behind important product screenshots or active/focused elements. Do not use decorative gradients as major backgrounds.

Shapes

The shape language is soft only where it signals interactivity. Buttons are always pills; cards and screenshots are moderately rounded; tiny UI elements stay precise.

  • 1px: Micro-elements and precision separators.
  • 5px–7px: Small UI elements and thumbnails.
  • 8px: Standard controls, inputs, code blocks, and compact interactive elements.
  • 10px–12px: Cards and product screenshots.
  • 15px–20px: Large feature cards and containers.
  • 30px–40px: Nav pills and pagination.
  • 100px: Full pill CTAs, tags, and primary actions.

Never square off buttons. Never use 40px+ radii on normal cards or large content containers.

Components

Buttons

  • Solid white pill (components.button-primary): #ffffff background, #000000 text, 100px radius, 10px 15px padding, minimum 40px height. Use for primary CTAs on dark surfaces.
  • Frosted pill (components.button-frosted): rgba(255, 255, 255, 0.1) background, pill radius, scale/opacity transitions. Use sparingly as a glassy secondary action; verify contrast in context.
  • Ghost button (components.button-ghost): No visible background, white text, subtle frosted hover reveal. Use for low-emphasis actions.
  • Motion should be simple: opacity transitions and scale-based press states. Avoid bouncy or playful animation.

Cards and containers

  • Use #000000 or #090909 surfaces with 10px–15px radius.
  • Prefer the Framer Blue ring shadow: rgba(0, 153, 255, 0.15) 0px 0px 0px 1px.
  • Elevated cards may add the Level 3 white edge highlight and deep ambient shadow.
  • Feature cards use 15px–30px internal padding and keep text hierarchy restrained.

Product screenshots

  • Product UI is the hero art. Place screenshots full-width or padded inside dark containers.
  • Use 8px–12px radius, subtle containment, and responsive scaling.
  • Maintain aspect ratios; lazy-load below-the-fold screenshots.
  • Do not add decorative illustrations when a product screenshot or demo can communicate the point.

Inputs and forms

  • Inputs use dark surfaces, white text, subtle borders, and 8px radius.
  • Placeholder text: rgba(255, 255, 255, 0.4).
  • Focus: 1px solid #0099ff plus optional rgba(0, 153, 255, 0.15) halo.

Navigation

  • Fixed/sticky black nav with white Inter text at 15px.
  • Links hover through opacity or frosted background changes, not new colors.
  • Right-side CTA is a white or frosted pill.
  • Collapse to hamburger below the mobile breakpoint while preserving the black canvas.

Trust and social proof

  • Logos, testimonials, and metadata should be muted silver on black.
  • Keep ornamentation minimal; the trust signal is product fidelity, not decorative badges.

Do's and Don'ts

Do:

  • Use pure black (#000000) as the page background.
  • Use Framer Blue (#0099ff) only for interactive accents, focus rings, links, and borders.
  • Use Geist Variable for display type with confident 620–680 weights and moderate negative tracking.
  • Apply Inter OpenType features for refined body/UI typography and Geist Mono for technical text.
  • Make every button pill-shaped.
  • Let product screenshots, demos, and UI previews carry the visual story.
  • Use blue ring shadows for dark card containment.

Don't:

  • Do not replace black with charcoal, warm gray, or brown-tinted dark backgrounds.
  • Do not reference unavailable proprietary fonts or mix in decorative novelty fonts.
  • Do not introduce extra accent colors, decorative gradients, or playful illustrations.
  • Do not place light/white section backgrounds behind marketing content.
  • Do not use squared buttons or oversized card radii.
  • Do not add heavy drop shadows; use subtle rings and edge highlights.
  • Do not over-tighten display tracking or use positive letter spacing on large display text.