INK — Real-time fluid, rendered live

Design Specification — INK — Real-time fluid, rendered live

Overview

This design system was extracted programmatically from the source page. It is built on a dark canvas (#050507), ink text (#000000), a vivid accent (#3F8CFF). Display headings use a distinct face (var(--serif)) over the body stack (var(--mono)). Detected font weights: 300, 400, 500, 600, 700. Detected style signatures: glassmorphism; soft-ui / layered elevation; gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

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)

Gradients

• linear-gradient(100deg,#2f6bff,#4f7bff 38%,#22c6e6 78%,#7aa0ff)
• radial-gradient(120% 120% at 50% 38%,#0a0f24 0%,#06070e 55%,#040409 100%)
• radial-gradient(135% 105% at 50% 50%, transparent 42%, rgba(2,3,8,0.78) 100%)
• linear-gradient(180deg,transparent,rgba(80,116,255,0.06))
• linear-gradient(rgba(150,175,235,0.07) 1px,transparent 1px),linear-gradient(90deg,rgba(150,175,235,0.07) 1px,transparent 1px)
• radial-gradient(120% 100% at 50% 40%, #000 38%, transparent 86%)
• linear-gradient(transparent,rgba(6,8,16,0.55))
• linear-gradient(135deg, rgba(255,255,255,0.20), transparent 30%, transparent 80%, rgba(255,255,255,0.07))
• `radial-gradient(55% 75% at 28% 30%, rgba(79,116,255,0.95), transparent 60%),

radial-gradient(50% 70% at 72% 58%, rgba(210,63,192,0.9), transparent 60%),

radial-gradient(70% 90% at 52% 82%, rgba(255,155,61,0.75), transparent 65%)`

Typography

Primary typeface: var(--mono) — stack: var(--mono)

Display / heading typeface: var(--serif) (used for large headings; body uses the primary stack)

Font stacks (most used first)

• var(--mono)
• 'Space Grotesk'
• var(--display)
• var(--serif)
• 'Instrument Serif'

Web font sources

• fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 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)

Shadows

Derived elevation

All detected shadows

• 0 0 18px rgba(139,83,255,0.6)
• 0 0 10px #3f8cff
• 0 0 10px #43e6a0
• 0 30px 80px -30px rgba(0,0,0,0.7)
• 0 40px 120px -40px rgba(0,0,0,0.85)
• inset 0 1px 1px rgba(255,255,255,0.32), 0 50px 130px -40px rgba(0,0,0,0.78)
• 0 40px 90px -40px rgba(20,18,60,0.35)
• 0 50px 100px -40px rgba(20,18,60,0.45)

Layout

Container max-width: 860px

Grid columns (largest detected grid): 4

Breakpoints

• 680px
• 760px
• 820px
• 860px
• 880px

Animation & Motion

Transitions

• opacity .4s ease
• .4s cubic-bezier(0.22,1,0.36,1)
• opacity .2s
• opacity .8s ease
• transform 1s cubic-bezier(0.22,1,0.36,1)
• transform .9s cubic-bezier(0.22,1,0.36,1)
• opacity 1s cubic-bezier(0.22,1,0.36,1), transform 1s cubic-bezier(0.22,1,0.36,1)
• clip-path 1.1s cubic-bezier(0.22,1,0.36,1)
• transform .55s cubic-bezier(0.22,1,0.36,1), opacity .35s ease
• none
• transform .4s cubic-bezier(0.22,1,0.36,1)
• border-color .3s ease

Easing curves

• cubic-bezier(0.22,1,0.36,1)
• cubic-bezier(0.65,0,0.35,1)

Keyframes

@keyframes grain { 0%{transform:translate(0,0)} 50%{transform:translate(-6%,4%)} 100%{transform:translate(3%,-5%)} }
@keyframes blink { 0%,100%{opacity:.45} 50%{opacity:1} }
@keyframes demoDrift { 0%{ transform:scale(1.15) translate(-2%,-1%) rotate(0deg);} 50%{ transform:scale(1.3) translate(3%,2%) rotate(5deg);} 100%{ transform:scale(1.16) translate(-1%,1%) rotate(-4deg);} }

Animations

• grain 0.6s steps(2) infinite
• blink 1.8s ease-in-out infinite
• demoDrift 16s ease-in-out infinite alternate
• none !important

CTA labels found on page

• Get INK
• Read the docs

Effects

• backdrop-filter: blur(10px)
• backdrop-filter: blur(20px) saturate(1.2)
• backdrop-filter: blur(8px)
• backdrop-filter: blur(28px) saturate(1.3)

> Page contains canvas/WebGL elements — consider ambient effects layers.

Source Design Tokens (CSS custom properties)

:root {
  --bg: #050507;
  --ink: #f3f4f8;
  --muted: rgba(214,220,240,0.86);
  --faint: rgba(188,196,224,0.62);
  --line: rgba(150,162,210,0.20);
  --blue: #3f8cff;
  --indigo: #4f7bff;
  --magenta: #22c6e6;
  --rose: #5ea0ff;
  --amber: #7aa0ff;
  --grad: linear-gradient(100deg,#2f6bff,#4f7bff 38%,#22c6e6 78%,#7aa0ff);
  --display: "Space Grotesk","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif: "Instrument Serif",Georgia,"Times New Roman",serif;
  --mono: "SF Mono","JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --ease: cubic-bezier(0.22,1,0.36,1);
  --ease2: cubic-bezier(0.65,0,0.35,1);
}

Do's and Don'ts

Do

• Do reserve the accent #3F8CFF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #050507; surfaces should stay within the detected neutral ramp.
• Do set large headings in var(--serif) with tight tracking (-0.03em), and body copy in the primary stack.
• Do stick to the detected font weight(s): 300, 400, 500, 600, 700.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.

Design Tokens (copy-paste)

:root {
  --color-background: #050507;
  --color-surface: #D6DCF0;
  --color-primary: #2F6BFF;
  --color-accent: #3F8CFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #3A3D49;
  --color-border: #5B6B8C;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F3F4F8;
  --color-surface-container: #F3F1EE;
  --font-sans: var(--mono);
  --font-size-headline-lg: 34px;
  --font-size-title-lg: 20px;
  --font-size-body-md: 15px;
  --font-size-label-md: 13px;
  --font-size-label-sm: 12.5px;
  --radius-sm: 2px;
  --radius-md: 7px;
  --radius-lg: 26px;
  --radius-pill: 50%;
  --shadow-sm: 0 0 18px rgba(139,83,255,0.6);
  --shadow-md: 0 40px 120px -40px rgba(0,0,0,0.85);
  --shadow-lg: 0 50px 100px -40px rgba(20,18,60,0.45);
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 36px;
  --space-xl: 80px;
  --font-display: var(--serif);
  --tracking-display: -0.03em;
  --tracking-label: 0.1em;
  --container-max: 860px;
}