Marketing & Sales | Align UI

Design Specification — Marketing & Sales | Align UI

Overview

This design system was extracted programmatically from the source page. It is built on a light canvas (#FFFFFF), ink text (#000000). All type is set in __Inter_d65c78. Detected font weights: 100, 400, 500. Detected style signatures: technical / mono accents.

Logo asset(s): https://marketing-template.alignui.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.

Gradients

• linear-gradient(90deg, currentColor 4px, transparent 4px)

Typography

Primary typeface: __Inter_d65c78 — stack: __Inter_d65c78

Font stacks (most used first)

• __Inter_d65c78
• __Inter_Fallback_d65c78
• __interVar_fb658c
• __interVar_Fallback_fb658c
• var(--font-inter)
• ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace
• inherit

Derived type scale

Font sizes (by frequency)

Weights in use: 100, 400, 500

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: 1360px

Breakpoints

• 640px
• 768px
• 1024px
• 1280px

Animation & Motion

Transitions

• :placeholder
• before

Easing curves

• cubic-bezier(.4,0,.2,1)
• cubic-bezier(0,0,.2,1)
• cubic-bezier(0,0,.2,1)

Keyframes

@keyframes animate-setting-page-in { 0%{opacity:0;filter:blur(4px);transform:scale(.99)}to{opacity:1;filter:blur(0);transform:scale(1)} }
@keyframes tick-fade-in { to{opacity:1;transform:scale(1)} }
@keyframes enter { 0%{opacity:var(--tw-enter-opacity,1);transform:translate3d(var(--tw-enter-translate-x,0),var(--tw-enter-translate-y,0),0) scale3d(var(--tw-enter-scale,1),var(--tw-enter-scale,1),var(--tw-enter-scale,1)) rotate(var(--tw-enter-rotate,0))} }
@keyframes exit { to{opacity:var(--tw-exit-opacity,1);transform:translate3d(var(--tw-exit-translate-x,0),var(--tw-exit-translate-y,0),0) scale3d(var(--tw-exit-scale,1),var(--tw-exit-scale,1),var(--tw-exit-scale,1)) rotate(var(--tw-exit-rotate,0))} }
@keyframes chart-category-cell-load { to{width:100%} }

Components

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

button-primary — sample text: “CatalystMarketing & Sales”

button-secondary — sample text: “Settings”

navigation-link

CTA labels found on page

• New Products
• All Status
• Filter
• Export

Source Design Tokens (CSS custom properties)

:root {
  --font-inter: "__Inter_d65c78","__Inter_Fallback_d65c78";
  --font-inter-var: "__interVar_fb658c","__interVar_Fallback_fb658c";
  --gray-950: 0 0% 9.02%;
  --gray-900: 0 0% 10.98%;
  --gray-800: 0 0% 16.08%;
  --gray-700: 0 0% 20%;
  --gray-600: 0 0% 36.08%;
  --gray-500: 0 0% 48.24%;
  --gray-400: 0 0% 63.92%;
  --gray-300: 0 0% 81.96%;
  --gray-200: 0 0% 92.16%;
  --gray-100: 0 0% 96.08%;
  --gray-50: 0 0% 96.86%;
  --gray-0: 0 0% 100%;
  --gray-alpha-24: 0 0% 63.92%/24%;
  --gray-alpha-16: 0 0% 63.92%/16%;
  --gray-alpha-10: 0 0% 63.92%/10%;
  --slate-950: 221.54 31.71% 8.04%;
  --slate-900: 226.15 21.31% 11.96%;
  --slate-800: 227.14 17.07% 16.08%;
  --slate-700: 221.25 15.69% 20%;
  --slate-600: 222 10.87% 36.08%;
  --slate-500: 221.05 7.76% 48.04%;
  --slate-400: 220 11.48% 64.12%;
  --slate-300: 218.57 15.22% 81.96%;
  --slate-200: 220 17.65% 90%;
  --slate-100: 210 30% 96.08%;
  --slate-50: 216 33.33% 97.06%;
  --slate-0: 0 0% 100%;
  --slate-alpha-24: 220 11.48% 64.12%/24%;
  --slate-alpha-16: 220 11.48% 64.12%/16%;
  --slate-alpha-10: 220 11.48% 64.12%/10%;
  --neutral-950: var(--gray-950);
  --neutral-900: var(--gray-900);
  --neutral-800: var(--gray-800);
  --neutral-700: var(--gray-700);
  --neutral-600: var(--gray-600);
  --neutral-500: var(--gray-500);
  --neutral-400: var(--gray-400);
  --neutral-300: var(--gray-300);
  --neutral-200: var(--gray-200);
  --neutral-100: var(--gray-100);
  --neutral-50: var(--gray-50);
  --neutral-0: var(--gray-0);
  --neutral-alpha-24: var(--gray-alpha-24);
  --neutral-alpha-16: var(--gray-alpha-16);
  --neutral-alpha-10: var(--gray-alpha-10);
  --blue-950: 228.14 70.49% 23.92%;
  --blue-900: 228 70.55% 31.96%;
  --blue-800: 228.17 69.61% 40%;
  --blue-700: 228.07 69.8% 48.04%;
  --blue-600: 228 80.36% 56.08%;
  --blue-500: 227.94 100% 60%;
  --blue-400: 222.12 100% 70.39%;
  --blue-300: 219.81 100% 79.61%;
  --blue-200: 220 100% 87.65%;
  --blue-100: 221.43 100% 91.76%;
  --blue-50: 222 100% 96.08%;
  --blue-alpha-24: 227.93 100% 63.92%/24%;
  --blue-alpha-16: 227.93 100% 63.92%/16%;
}

Do's and Don'ts

Do

• Do keep the canvas at #FFFFFF; surfaces should stay within the detected neutral ramp.
• Do stick to the detected font weight(s): 100, 400, 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-background: #FFFFFF;
  --color-surface: #FFFFFF;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #0A0D14;
  --color-on-secondary: #FFFFFF;
  --font-sans: __Inter_d65c78;
  --font-size-headline-md: 24px;
  --font-size-body-lg: 18px;
  --font-size-body-md: 16px;
  --font-size-label-md: 14px;
  --font-size-label-sm: 12px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-pill: 9999px;
  --space-xs: 2px;
  --space-sm: 8px;
  --space-md: 16px;
  --tracking-display: -.006em;
  --tracking-label: .04em;
  --container-max: 1360px;
}