Poetic — Turn your business into software

Design Specification — Poetic — Turn your business into software

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FDFDFC), ink text (#21201C), a vivid accent (#221FC3). All type is set in suisse. Detected font weights: 500, 600, 700. Detected style signatures: technical / mono accents.

Logo asset(s): https://poetic.com/_next/static/media/inner3.2k0eujwx99d4t.png · https://poetic.com/_next/static/media/chime-logo.0u5jajqlkfs6m.svg

Color System

Detected palette (by frequency)

Assigned roles

Roles are taken from the page's own semantic CSS custom properties when present, otherwise inferred from usage frequency + luminance/saturation.

Surface ramp (derived from detected light neutrals)

Typography

Primary typeface: suisse — stack: suisse

Font stacks (most used first)

• suisse
• var(--font-sans)
• suisse Fallback
• var(--font-mono)
• var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji")
• var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace)
• var(--font-numeral)

Derived type scale

Font sizes (by frequency)

Weights in use: 500, 600, 700

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Derived spacing scale

Raw values (by frequency)

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 768px

Grid columns (largest detected grid): 4

Breakpoints

• 40rem
• 48rem
• 64rem
• 80rem
• 96rem
• 1720px

Animation & Motion

Easing curves

• cubic-bezier(0, 0, .2, 1)
• cubic-bezier(.4, 0, .6, 1)
• cubic-bezier(.4, 0, .2, 1)
• var(--tw-ease,var(--default-transition-timing-function))
• var(--ease-out)
• cubic-bezier(.4,0,.2,1)

Keyframes

@keyframes sheet-overlay-in { 0%{opacity:0}to{opacity:1} }
@keyframes sheet-overlay-out { 0%{opacity:1}to{opacity:0} }
@keyframes sheet-in { 0%{opacity:0}to{opacity:1} }
@keyframes sheet-out { 0%,55%{opacity:1}to{opacity:0} }
@keyframes menu-item-in { 0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)} }
@keyframes menu-item-out { 0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:translateY(8px)} }
@keyframes intro-logo { 0%{opacity:0}70%{opacity:1}to{opacity:1} }
@keyframes intro-bar { 0%{opacity:0;transform:translate(-56px)}12%{opacity:1}50%{opacity:1;transform:translate(256px)}78%{opacity:1;transform:translate(256px)}80%{opacity:0;transform:translate(256px)}83%{opacity:0;transform:translate(256px)}85%{opacity:1;transform:translate(256px)}88%{opacity:1;transform:translate(256px)}90%{opacity:0;transform:translate(256px)}93%{opacity:0;transform:translate(256px)}95%{opacity:1;transform:translate(256px)}98%{opacity:1;transform:translate(256px)}to{opacity:0;transform:translate(256 }
@keyframes intro-fade-out { to{opacity:0} }
@keyframes intro-cover-wipe { 0%{transform:translate(0)}to{transform:translate(100%)} }
@keyframes hover-trail-pop { 0%{transform:scale(0)}to{transform:scale(1)} }
@keyframes pulse { 50%{opacity:.5} }

Animations

• var(--animate-pulse)
• 1s linear .5s both intro-logo
• 1s cubic-bezier(.4,0,.2,1) .5s both intro-bar

Components

Extracted from the page's own interactive elements (classes → resolved CSS values).

button-primary — sample text: “AIG”

button-secondary — sample text: “SOFI”

navigation-link

badge

Source Design Tokens (CSS custom properties)

:root {
  --font-suisse: "suisse", "suisse Fallback";
  --font-sans: var(--font-suisse), "Suisse Intl", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Monaco, "Cascadia Code", Consolas, monospace;
  --color-amber-400: #fcbb00;
  --color-amber-500: #f99c00;
  --color-amber-700: #b75000;
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --leading-tight: 1.25;
  --leading-relaxed: 1.625;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --ease-out: cubic-bezier(0, 0, .2, 1);
  --animate-pulse: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
  --blur-sm: 8px;
  --blur-lg: 16px;
  --aspect-video: 16 / 9;
  --default-transition-duration: .15s;
  --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
  --default-font-family: var(--font-sans);
  --default-mono-font-family: var(--font-mono);
  --font-numeral: var(--font-suisse), "Suisse Intl", ui-sans-serif, system-ui, sans-serif;
  --color-sand-1: #fdfdfc;
  --color-sand-12: #21201c;
  --color-cream: #fbfbf9;
  --color-wordmark: #f7f7f7;
  --text-display: 5rem;
  --text-display--line-height: .9;
  --text-display--letter-spacing: -.04em;
  --text-display--font-weight: 600;
  --text-heading: 2.5rem;
  --text-heading--line-height: 1;
  --text-heading--letter-spacing: -.04em;
  --text-heading--font-weight: 600;
  --text-lead: 1rem;
  --text-lead--line-height: 1.1;
  --text-lead--letter-spacing: -.03em;
  --text-lead--font-weight: 600;
  --text-body: .875rem;
  --text-body--line-height: 1;
  --text-body--letter-spacing: -.03em;
  --text-body--font-weight: 600;
  --radius-full: 9999px;
  --body-bg: var(--color-sand-1);
  --body-color: var(--color-sand-12);
}

Do's and Don'ts

Do

• Do reserve the accent #221FC3 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FDFDFC; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 500, 600, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• Don't add gradients — the source page uses flat fills exclusively.
• Don't add drop shadows; the source page relies on borders and surface shifts for depth, not elevation.

Design Tokens (copy-paste)

:root {
  --color-background: #FDFDFC;
  --color-text-primary: #21201C;
  --color-primary: #FCBB00;
  --color-accent: #221FC3;
  --color-surface: #FDFDFC;
  --color-secondary: #000000;
  --color-text-secondary: #808080;
  --color-border: #FDFDFC;
  --color-on-primary: #21201C;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FDFDFC;
  --color-surface-container: #FBFBF9;
  --color-surface-container-high: #F7F7F7;
  --color-surface-container-highest: #F7F7F5;
  --font-sans: suisse;
  --font-size-display: 60px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 21px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 13.7px;
  --font-size-label-sm: 12px;
  --radius-md: 8px;
  --radius-lg: 28px;
  --radius-pill: 9999px;
  --space-xs: 7px;
  --space-sm: 8px;
  --space-md: 19.2px;
  --space-lg: 40px;
  --space-xl: 60px;
  --tracking-display: -.03em;
  --container-max: 768px;
}