Anim8 - Make ideas move

Design Specification — Anim8 - Make ideas move

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#F5F5F5), ink text (#1D1D1F), a vivid accent (#0A84FF). All type is set in SF Pro Rounded. Detected font weights: 100, 200, 300, 400, 450, 500, 600, 650, 700, 800, 900. Detected style signatures: gradient-rich / aurora; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://tryanim8.com/favicon.ico

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(45deg,#f4f4f4 25%,#0000 25%),linear-gradient(-45deg,#f4f4f4 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#f4f4f4 75%),linear-gradient(-45deg,#0000 75%,#f4f4f4 75%)
• linear-gradient(0deg,#0000,#0000 23px,#00000008 24px),repeating-linear-gradient(90deg,#0000,#0000 23px,#00000008 24px)

> 1 additional gradient definitions were framework utility templates (unresolvable var(--tw-gradient-stops)) and were omitted.

Typography

Primary typeface: SF Pro Rounded — stack: SF Pro Rounded

Font stacks (most used first)

• SF Pro Rounded
• Inter Variable
• Geist Mono Variable
• Geist Variable
• var(--font-sans)
• var(--font-mono)
• var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, 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)
• Inter Variable,Inter,-apple-system,system-ui,sans-serif

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 200, 300, 400, 450, 500, 600, 650, 700, 800, 900

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Animation & Motion

Transitions

• transform .14s cubic-bezier(0, 0, .2, 1), background-color .14s cubic-bezier(0, 0, .2, 1), color .14s cubic-bezier(0, 0, .2, 1), opacity .14s cubic-bezier(0, 0, .2, 1)
• opacity .2s cubic-bezier(0, 0, .2, 1)
• transform .24s cubic-bezier(0, 0, .2, 1), opacity .24s cubic-bezier(0, 0, .2, 1)
• opacity .2s

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(.23, 1, .32, 1)

Keyframes

@keyframes settings-card-fade { 0%{opacity:0}to{opacity:1} }
@keyframes landing-reveal { 0%{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)} }
@keyframes landing-orbit { to{transform:rotate(360deg)} }
@keyframes landing-playhead { 0%,8%{left:10%}50%{left:76%}92%,to{left:10%} }
@keyframes landing-float { 0%,to{transform:rotate(8deg)translateY(0)}50%{transform:rotate(6deg)translateY(-14px)} }
@keyframes pulse { 50%{opacity:.5} }

Animations

• var(--animate-pulse)

Source Design Tokens (CSS custom properties)

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --color-red-50: oklch(97.1% .013 17.38);
  --color-red-100: oklch(93.6% .032 17.717);
  --color-red-200: oklch(88.5% .062 18.334);
  --color-red-300: oklch(80.8% .114 19.571);
  --color-red-500: oklch(63.7% .237 25.331);
  --color-red-600: oklch(57.7% .245 27.325);
  --color-red-700: oklch(50.5% .213 27.518);
  --color-amber-400: oklch(82.8% .189 84.429);
  --color-emerald-500: oklch(69.6% .17 162.48);
  --color-emerald-600: oklch(59.6% .145 163.225);
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --tracking-wide: .025em;
  --leading-relaxed: 1.625;
  --radius-sm: .25rem;
  --radius-md: .375rem;
  --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;
  --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);
  --bg: #f5f5f5;
  --panel: #fff;
  --hairline: #00000012;
  --hairline-strong: #0000001f;
  --text: #1d1d1f;
  --muted: #86868b;
  --faint: #aeaeb2;
  --accent: #0a84ff;
  --accent-soft: #0a84ff1f;
  --accent-soft-opaque: #e2f0ff;
}

Do's and Don'ts

Do

• Do reserve the accent #0A84FF for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #F5F5F5; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 200, 300, 400, 450, 500, 600, 650, 700, 800, 900.

Don't

• Don't introduce colors outside the detected palette — every hue above was found in the source.
• 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: #F5F5F5;
  --color-surface: #86868B;
  --color-text-primary: #1D1D1F;
  --color-accent: #0A84FF;
  --color-primary: #D41472;
  --color-secondary: #000000;
  --color-text-secondary: #7C5CBF;
  --color-border: #E0E0E0;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FAFAFA;
  --color-surface-container: #F5F5F5;
  --color-surface-container-high: #F4F4F4;
  --color-surface-container-highest: #F2F2F2;
  --font-sans: SF Pro Rounded;
  --font-size-display: 46px;
  --font-size-headline-lg: 34px;
  --font-size-headline-md: 27px;
  --font-size-title-lg: 22px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 1px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --tracking-display: -.01em;
  --container-max: 768px;
}