Wealth management for the modern age | Alphanso

Design Specification — Wealth management for the modern age | Alphanso

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 (#0082F3). All type is set in Inter, sans-serif. Detected font weights: 300, 400, 500, 700. Detected style signatures: technical / mono accents.

Logo asset(s): https://cdn.prod.website-files.com/686ccdbd9c2f1427e90052ae/6899d2ab7d68237c5db4b27f_Alphanso%20logo.svg · https://cdn.prod.website-files.com/686ccdbd9c2f1427e90052ae/6960cdf28806aee77686281d_UnitedHealthcare_(logo)%201.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(90deg, #f3f4f2 70%, #f3f4f2cc 85%, transparent)
• linear-gradient(270deg, #f3f4f2 70%, #f3f4f2cc 85%, transparent)
• linear-gradient(90deg, #f3f4f2 37%, #fff0)
• linear-gradient(-90deg, #f3f4f2, #fff0)
• linear-gradient(270deg, #fff 70%, #ffffffb3 85%, #0000)
• linear-gradient(90deg, #fff 70%, #ffffffb3 85%, #0000)
• linear-gradient(358deg, #101010 11%, #fff0 95%)

Typography

Primary typeface: Inter — stack: Inter, sans-serif

Font stacks (most used first)

• Inter, sans-serif
• monospace
• webflow-icons
• webflow-icons !important
• Arial, sans-serif
• Georgi

Derived type scale

Font sizes (by frequency)

Weights in use: 300, 400, 500, 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 4px 8px #00000008, 0 15px 15px #00000008, 0 35px 21px #00000005, 0 61px 25px #00000003

Layout

Container max-width: 991px

Breakpoints

• 479px
• 767px
• 991px

Animation & Motion

Transitions

• transform .4s cubic-bezier(.25, .46, .45, .94)
• color .4s cubic-bezier(.25, .46, .45, .94), background-color .4s cubic-bezier(.25, .46, .45, .94), transform .4s cubic-bezier(.25, .46, .45, .94)
• opacity .3s cubic-bezier(.215, .61, .355, 1)
• opacity .3s cubic-bezier(.25, .46, .45, .94)
• color .3s cubic-bezier(.25, .46, .45, .94), background-color .3s cubic-bezier(.25, .46, .45, .94)
• color .3s
• background-color .3s cubic-bezier(.25, .46, .45, .94)

Easing curves

• cubic-bezier(.25, .46, .45, .94)
• cubic-bezier(.215, .61, .355, 1)

Keyframes

@keyframes marquee { from { transform: translate3d(0,0,0); } to{ transform: translate3d(-50%,0,0); } /* -50% if track contains two copies back-to-back */ }
@keyframes spin { 0% { transform: rotate(0); } 100% { transform: rotate(360deg); } }

Animations

• none !important

CTA labels found on page

• Log in
• Watch demo
• Talk to an advisor
• Watch Demo
• Learn more
• Subscribe

Source Design Tokens (CSS custom properties)

:root {
  --text-color--text-primary: #131313;
  --text-color--text-secondary: var(--brand--neutral-light);
  --brand--gray-lighter: #f3f4f2;
  --brand--neutral-lighter: #afafaf;
  --border-color--border-primary: #efeff2;
  --brand--white: white;
  --text-color--text-tertiary: var(--brand--neutral-lighter);
  --bg-color--bg-secondary: var(--brand--gray-lighter);
  --border-color--border-secondary: #d4d4d8;
  --bg-color--bg-tertiary: var(--brand--neutral-dark);
  --brand--gray-light: #d7d7d7;
  --brand--neutral-dark: #131313;
  --brand--neutral-light: #4e4e4e;
  --brand--black: #000;
  --bg-color--bg-primary: var(--brand--white);
  --brand--secondary: #147af3;
  --brand--secondary-light: #147af34d;
  --brand--neutral: #2c2626;
  --brand--tertiary-light: #43595b;
  --brand--tertiary: #142f32;
  --bg-color--bg-icon-white: #ffffff4d;
  --text-color--text-blue-neutral: #7b88a8;
  --brand--tertiary-lighter: #e6e8e3;
  --brand--green: #15a46e;
  --text-color--purple-heilight: #6a35ff;
  --bg-color--bg-alternate: var(--brand--white);
  --border-color--border-alternate: white;
  --link-color--link-primary: var(--brand--black);
  --link-color--link-alternate: var(--brand--white);
  --brand: #333;
}

Do's and Don'ts

Do

• Do reserve the accent #0082F3 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 stick to the detected font weight(s): 300, 400, 500, 700.
• Do align spacing to the 8px base unit derived from the page.

Don't

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

Design Tokens (copy-paste)

:root {
  --color-primary: #333333;
  --color-accent: #0082F3;
  --color-background: #FFFFFF;
  --color-surface: #F3F4F2;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #DDDDDD;
  --color-border: #4E4E4E;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #F3F4F2;
  --color-surface-container: #EFEFF2;
  --color-surface-container-high: #EEEEEE;
  --color-surface-container-highest: #EFEEEB;
  --font-sans: Inter, sans-serif;
  --font-size-display: 68px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 24px;
  --font-size-title-lg: 20px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14.1px;
  --font-size-label-sm: 12.8px;
  --radius-sm: 2px;
  --radius-md: 8px;
  --radius-lg: 24px;
  --radius-pill: 100%;
  --shadow-md: 0 4px 8px #00000008, 0 15px 15px #00000008, 0 35px 21px #00000005, 0 61px 25px #00000003;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 64px;
  --tracking-display: -.06em;
  --container-max: 991px;
}