Steep: AI analytics for faster insights and zero chaos

Design Specification — Steep: AI analytics for faster insights and zero chaos

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000), a vivid accent (#194168). Display headings use a distinct face (ui-serif, Georgia, serif) over the body stack (var(--font-serif)). Detected font weights: 100, 400, 450, 480, 500. Detected style signatures: gradient-rich / aurora; technical / mono accents.

Logo asset(s): https://steep.app/images/customers/logos/voi.svg · https://steep.app/images/customers/logos/framer.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)

Gradients

• linear-gradient(in lab,red,red))

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

Typography

Primary typeface: var(--font-serif) — stack: var(--font-serif)

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

Font stacks (most used first)

• var(--font-serif)
• Sohne
• var(--font-sans)
• var(--font-mono)
• Signifier
• 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)

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 400, 450, 480, 500

Line heights (by frequency)

Letter spacing (by frequency)

Spacing

Borders & Radius

Derived radius tokens

Raw values (resolved, by frequency)

Layout

Container max-width: 900px

Grid columns (largest detected grid): 6

Breakpoints

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

Animation & Motion

Transitions

• all .8s

Easing curves

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

Keyframes

@keyframes sweep { 0%{transform:scaleY(.3)}to{transform:scaleY(1)} }
@keyframes progressFill { 0%{width:0}to{width:100%} }
@keyframes arrow-slide-frames { 0%{transform:translate(0)}50%{transform:translate(100%)}51%{transform:translate(-100%)}to{transform:translate(0)} }
@keyframes fade-in { 0%{opacity:0}to{opacity:1} }
@keyframes fade-in-y { 0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)} }
@keyframes carousel-scroll { 0%{transform:translate(0)}to{transform:translate3d(calc(var(--list-width)*-1),0,0)} }

Animations

• arrow-slide-frames .25s ease-in-out
• fade-in-y .5s ease-out forwards
• carousel-scroll 50s linear infinite

Components

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

button-primary — sample text: “AI”

button-secondary — sample text: “Explore”

navigation-link

badge

Source Design Tokens (CSS custom properties)

:root {
  --color-black: #000;
  --color-white: #fff;
  --spacing: .25rem;
  --container-sm: 24rem;
  --container-md: 28rem;
  --container-lg: 32rem;
  --container-2xl: 42rem;
  --container-3xl: 48rem;
  --container-5xl: 64rem;
  --tracking-tight: -.025em;
  --tracking-wider: .05em;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-loose: 2;
  --radius-md: .375rem;
  --radius-lg: .5rem;
  --radius-xl: .75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --drop-shadow-xl: 0 9px 7px #0000001a;
  --drop-shadow-2xl: 0 25px 25px #00000026;
  --ease-out: cubic-bezier(0,0,.2,1);
  --ease-in-out: cubic-bezier(.4,0,.2,1);
  --blur-sm: 8px;
  --blur-md: 12px;
  --blur-lg: 16px;
  --blur-xl: 24px;
  --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-sans: Sohne,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --font-serif: Signifier,ui-serif,Georgia,Cambria,"Times New Roman",Times,serif;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  --font-weight-normal: 400;
  --font-weight-book: 430;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --text-3xs: 12px;
  --text-3xs--line-height: 18px;
  --text-2xs: 14px;
  --text-2xs--line-height: 20px;
  --text-xs: 16px;
  --text-xs--line-height: 21px;
  --text-sm: 17px;
  --text-sm--line-height: 23px;
  --text-base: 18px;
  --text-base--line-height: 25px;
  --text-lg: 20px;
  --text-lg--line-height: 27px;
  --text-xl: 22px;
  --text-xl--line-height: 29px;
  --text-2xl: 24px;
  --text-2xl--line-height: 32px;
  --text-3xl: 28px;
  --text-4xl: 32px;
  --text-4xl--line-height: 36px;
  --text-5xl: 36px;
  --text-5xl--line-height: 42px;
}

Do's and Don'ts

Do

• Do reserve the accent #194168 for interactive highlights and key moments — it is used sparingly on the source page.
• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do set large headings in ui-serif, Georgia, serif with tight tracking (-.02em), and body copy in the primary stack.
• Do stick to the detected font weight(s): 100, 400, 450, 480, 500.

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-primary: #5D2A1A;
  --color-accent: #194168;
  --color-background: #FFFFFF;
  --color-surface: #F7F7F8;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #D3E3FC;
  --color-border: #D8EFDF;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FAFAFB;
  --color-surface-container: #F7F7F8;
  --color-surface-container-high: #F2F2F3;
  --color-surface-container-highest: #F0F1F2;
  --font-sans: var(--font-serif);
  --font-size-display: 90px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 30px;
  --font-size-title-lg: 20px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --radius-sm: 3px;
  --radius-md: 8px;
  --radius-lg: 24px;
  --font-display: ui-serif, Georgia, serif;
  --tracking-display: -.02em;
  --container-max: 900px;
}