lllin000_PaperForge/paperforge/plugin/docs/design/DESIGN.md

version	name	description	colors	typography	rounded	spacing	components
alpha	Vercel-Inspired-design-analysis	An inspired interpretation of Vercel's design language — a developer-platform brand whose surface is a stark black-and-ink duet on near-white canvas, broken at hero scale by a multi-color mesh gradient (cyan / blue / magenta / amber) that acts as the entire decorative system, paired with a custom geometric sans for headlines and a monospaced caption face for technical labels.	primary on-primary ink body mute hairline hairline-strong canvas canvas-soft canvas-soft-2 link link-deep link-bg-soft success error error-soft error-deep warning warning-soft warning-deep violet violet-soft violet-deep cyan cyan-soft cyan-deep highlight-pink highlight-magenta gradient-develop-start gradient-develop-end gradient-preview-start gradient-preview-end gradient-ship-start gradient-ship-end selection-bg selection-fg #171717 #ffffff #171717 #4d4d4d #888888 #ebebeb #a1a1a1 #ffffff #fafafa #f5f5f5 #0070f3 #0761d1 #d3e5ff #0070f3 #ee0000 #f7d4d6 #c50000 #f5a623 #ffefcf #ab570a #7928ca #d8ccf1 #4c2889 #50e3c2 #aaffec #29bc9b #ff0080 #eb367f #007cf0 #00dfd8 #7928ca #ff0080 #ff4d4d #f9cb28 #171717 #f2f2f2	display-xl display-lg display-md display-sm body-lg body-md body-md-strong body-sm body-sm-strong caption caption-mono code button-md button-lg fontFamily fontSize fontWeight lineHeight letterSpacing Geist, Inter, system-ui, -apple-system, sans-serif 48px 600 48px -2.4px fontFamily fontSize fontWeight lineHeight letterSpacing Geist, Inter, system-ui, -apple-system, sans-serif 32px 600 40px -1.28px fontFamily fontSize fontWeight lineHeight letterSpacing Geist, Inter, system-ui, -apple-system, sans-serif 24px 600 32px -0.96px fontFamily fontSize fontWeight lineHeight letterSpacing Geist, Inter, system-ui, -apple-system, sans-serif 20px 600 28px -0.6px fontFamily fontSize fontWeight lineHeight letterSpacing Geist, Inter, system-ui, -apple-system, sans-serif 18px 400 28px 0px fontFamily fontSize fontWeight lineHeight Geist, Inter, system-ui, -apple-system, sans-serif 16px 400 24px fontFamily fontSize fontWeight lineHeight Geist, Inter, system-ui, -apple-system, sans-serif 16px 500 24px fontFamily fontSize fontWeight lineHeight letterSpacing Geist, Inter, system-ui, -apple-system, sans-serif 14px 400 20px -0.28px fontFamily fontSize fontWeight lineHeight letterSpacing Geist, Inter, system-ui, -apple-system, sans-serif 14px 500 20px -0.28px fontFamily fontSize fontWeight lineHeight Geist, Inter, system-ui, -apple-system, sans-serif 12px 400 16px fontFamily fontSize fontWeight lineHeight Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace 12px 400 16px fontFamily fontSize fontWeight lineHeight Geist Mono, ui-monospace, SFMono-Regular, Menlo, Monaco, monospace 13px 400 20px fontFamily fontSize fontWeight lineHeight Geist, Inter, system-ui, -apple-system, sans-serif 14px 500 20px fontFamily fontSize fontWeight lineHeight Geist, Inter, system-ui, -apple-system, sans-serif 16px 500 24px	none xs sm md lg xl pill-sm pill full 0px 4px 6px 8px 12px 16px 64px 100px 9999px	xxs xs sm md lg xl 2xl 3xl 4xl 5xl 6xl section 4px 8px 12px 16px 24px 32px 40px 48px 64px 96px 128px 192px	nav-bar nav-link nav-cta-signup nav-cta-login nav-cta-ask-ai button-primary button-secondary button-primary-sm button-secondary-sm tab-ghost icon-button-circular card-marketing card-marketing-large card-soft template-card code-editor-mockup form-input form-input-sm form-input-lg badge-secondary pricing-card pricing-card-featured logo-strip hero-band feature-mesh-band showcase-band-light showcase-band-dark footer link-inline banner-marketing ex-pricing-tier ex-pricing-tier-featured ex-product-selector ex-cart-drawer ex-app-shell-row ex-data-table-cell ex-auth-form-card ex-modal-card ex-empty-state-card ex-toast backgroundColor textColor typography height padding {colors.canvas} {colors.ink} {typography.body-sm} 64px {spacing.sm} {spacing.lg} textColor typography rounded padding {colors.body} {typography.body-sm} {rounded.full} {spacing.xs} {spacing.sm} backgroundColor textColor typography rounded padding height {colors.primary} {colors.on-primary} {typography.body-sm-strong} {rounded.sm} 0px {spacing.xs} 28px backgroundColor textColor typography rounded padding height {colors.canvas} {colors.ink} {typography.body-sm-strong} {rounded.sm} 0px {spacing.xs} 28px backgroundColor textColor borderColor typography rounded padding height {colors.canvas} {colors.ink} {colors.hairline} {typography.body-sm-strong} {rounded.sm} 0px {spacing.xs} 28px backgroundColor textColor typography rounded padding {colors.primary} {colors.on-primary} {typography.button-lg} {rounded.pill} 0px {spacing.sm} backgroundColor textColor typography rounded padding {colors.canvas} {colors.ink} {typography.button-lg} {rounded.pill} 0px {spacing.sm} backgroundColor textColor typography rounded padding {colors.primary} {colors.on-primary} {typography.button-md} {rounded.pill} 0px {spacing.xs} backgroundColor textColor typography rounded padding {colors.canvas} {colors.ink} {typography.button-md} {rounded.pill} 0px {spacing.xs} backgroundColor textColor typography rounded padding {colors.canvas} {colors.ink} {typography.body-sm} {rounded.pill-sm} 0px {spacing.md} backgroundColor textColor borderColor rounded {colors.canvas} {colors.ink} {colors.hairline} {rounded.full} backgroundColor textColor typography rounded padding {colors.canvas} {colors.ink} {typography.body-md} {rounded.md} {spacing.lg} backgroundColor textColor typography rounded padding {colors.canvas} {colors.ink} {typography.body-md} {rounded.lg} {spacing.xl} backgroundColor textColor typography rounded padding {colors.canvas-soft} {colors.ink} {typography.body-md} {rounded.md} {spacing.lg} backgroundColor textColor typography rounded padding {colors.canvas} {colors.ink} {typography.body-md} {rounded.md} {spacing.md} backgroundColor textColor typography rounded padding {colors.primary} {colors.on-primary} {typography.code} {rounded.md} {spacing.lg} backgroundColor textColor borderColor typography rounded padding height {colors.canvas} {colors.ink} {colors.hairline} {typography.body-sm} {rounded.sm} 0px {spacing.sm} 40px backgroundColor textColor borderColor typography rounded padding height {colors.canvas} {colors.ink} {colors.hairline} {typography.body-sm} {rounded.sm} 0px {spacing.sm} 32px backgroundColor textColor borderColor typography rounded padding height {colors.canvas} {colors.ink} {colors.hairline} {typography.body-md} {rounded.sm} 0px {spacing.sm} 48px backgroundColor textColor typography rounded padding {colors.canvas-soft} {colors.body} {typography.caption} {rounded.full} 0px {spacing.xs} backgroundColor textColor typography rounded padding {colors.canvas} {colors.ink} {typography.body-md} {rounded.lg} {spacing.xl} backgroundColor textColor typography rounded padding {colors.primary} {colors.on-primary} {typography.body-md} {rounded.lg} {spacing.xl} backgroundColor textColor typography padding {colors.canvas} {colors.body} {typography.body-sm} {spacing.lg} {spacing.xl} backgroundColor textColor typography padding {colors.canvas} {colors.ink} {typography.display-xl} {spacing.4xl} {spacing.lg} backgroundColor textColor typography padding {colors.canvas} {colors.ink} {typography.display-lg} {spacing.5xl} {spacing.lg} backgroundColor textColor typography padding {colors.canvas-soft} {colors.ink} {typography.display-lg} {spacing.5xl} {spacing.lg} backgroundColor textColor typography padding {colors.primary} {colors.on-primary} {typography.display-lg} {spacing.5xl} {spacing.lg} backgroundColor textColor typography padding {colors.canvas} {colors.body} {typography.body-sm} {spacing.4xl} {spacing.lg} textColor typography {colors.link} {typography.body-md} backgroundColor textColor typography rounded padding {colors.canvas-soft} {colors.body} {typography.body-sm} {rounded.full} {spacing.xs} {spacing.sm} description backgroundColor textColor borderColor rounded padding Default tier card. Mirrors pricing-card chrome on canvas-soft surface with a hairline border. {colors.canvas-soft} {colors.ink} {colors.hairline} {rounded.lg} {spacing.xl} description backgroundColor textColor rounded padding Featured tier — polarity-flipped to ink primary with white text and white CTA. {colors.ink} {colors.on-primary} {rounded.lg} {spacing.xl} description backgroundColor rounded padding What's Included summary card — repurposed for the brand's GPU / inference / Pro feature tiers. {colors.canvas-soft} {rounded.md} {spacing.lg} description backgroundColor rounded padding item-divider Subscription summary — line items per add-on (NOT a literal e-commerce cart). {colors.canvas} {rounded.md} {spacing.lg} {colors.hairline} description backgroundColor activeIndicator rounded padding Sidebar nav row. Active state uses brand primary as a left-edge indicator bar. {colors.canvas} {colors.primary} {rounded.sm} {spacing.xs} {spacing.sm} description headerBackground headerTypography bodyTypography cellPadding rowBorder Mirrors the brand's table chrome. Header uses caption-mono uppercase mono; body uses body-sm. {colors.canvas-soft} {typography.caption-mono} {typography.body-sm} {spacing.xs} {spacing.sm} {colors.hairline} description backgroundColor rounded padding Sign-in / sign-up card. Mirrors card-marketing-large chrome with form-input primitives inside. {colors.canvas-soft} {rounded.lg} {spacing.xl} description backgroundColor rounded padding Modal dialog surface — same chrome as card-marketing-large with Level 5 modal shadow. {colors.canvas} {rounded.lg} {spacing.xl} description backgroundColor rounded padding captionTypography Empty-state illustration frame. Generous padding on canvas-soft. {colors.canvas-soft} {rounded.lg} {spacing.3xl} {typography.body-md} description backgroundColor rounded padding typography Toast notification surface — flat-cornered card-marketing chrome with Level 4 shadow. {colors.canvas} {rounded.md} {spacing.sm} {spacing.md} {typography.body-sm}