Careerflow - Your Career Copilot | Powerful AI Job Search Tools

Design Specification — Careerflow - Your Career Copilot | Powerful AI Job Search Tools

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 (#1570EF). All type is set in Onest,sans-serif. Detected font weights: 400, 500, 600, 700. Detected style signatures: ambient blurred glow background; rounded / pill-heavy; technical / mono accents.

Logo asset(s): https://cdn.prod.website-files.com/635c591378332f38be25d45f/63a1152ff687d737b6b93250_Careerflow%20logo%20240x240.avif · https://cdn.prod.website-files.com/635c591378332f38be25d45f/67e67a075ecbe940426fc8a4_LinkedinLogo.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(#0000,#0000)

Typography

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

Font stacks (most used first)

• Onest,sans-serif
• Inter,sans-serif
• 'Onest'
• slick
• inherit !important
• 'fa'!important
• monospace
• webflow-icons
• webflow-icons!important
• Arial,sans-serif

Web font sources

• fonts.googleapis.com/css2?family=Onest:wght@500;600;700&display=swap

Derived type scale

Font sizes (by frequency)

Weights in use: 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 30px #e5fff4
• 0 4px 60px #0000000a
• 0 12px 40px #0000000f
• 0 0 30px #e5f1ff
• 0 4px 60px #00000014
• 0 42.44px 61.31px #00000014
• 0 4px 6px #0000000d
• 0 -2px #00000012

Layout

Container max-width: 1280px

Breakpoints

• 479px
• 767px
• 991px
• 1440px
• 1920px

Animation & Motion

Transitions

• transform 0.3s ease-in-out
• `max-height 0.9s cubic-bezier(0.4, 0, 0.2, 1),

opacity 1s ease`

• `max-height 0.9s cubic-bezier(0.4, 0, 0.2, 1),

opacity 0.3s ease 0.25s`

• transform 0.6s ease-in-out
• opacity .2s,color .2s,border-color .2s,background-color .2s
• transform .2s
• all .3s ease-in-out
• all .25s ease-in-out
• all .3s
• border-width .3s,border-color .3s
• opacity .2s
• opacity .3s ease-in-out

Easing curves

• cubic-bezier(0.4, 0, 0.2, 1)
• ease

Keyframes

@keyframes moveMarquee { from { transform: translate3d(0%, 0, 0); } to { transform: translate3d(-100%, 0, 0); } }
@keyframes spin { 0%{transform:rotate(0)}to{transform:rotate(360deg)} }

Animations

• moveMarquee 40s linear infinite

CTA labels found on page

• All Features
• Log In
• Sign up
• Sign up FOR FREE
• Create my resume

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

Source Design Tokens (CSS custom properties)

:root {
  --gradient-color-1: #ffffff;
  --gradient-color-2: #ffffff;
  --gradient-color-3: #ffffff;
  --gradient-color-4: #cfe9ff;
  --gray-2: #4f5c65;
  --gray-1: #353e44;
  --gray-3: #e9eef1;
  --white: #fff;
  --primary-2: #0fbf95;
  --primary-1: #4285f4;
  --primary-3: #041e39;
  --light-blue: #f0f6ff;
  --success: #3cba58;
  --warning: #ffb400;
  --danger: #da2424;
  --gray-4: #f7fafc;
  --primary-6: #344054;
  --primary-5: #1570ef;
  --primary-7: #101828;
  --primary-4: #1d2939;
  --black2: #1a1a1a;
  --grey-text: #475467;
  --dim-light-blue: #f5faff;
  --black: black;
  --_apps---sidebar--sidebar-foreground-dark: #f8f8f8;
  --_apps---typography--heading-font: Onest,sans-serif;
  --_apps---typography--body-font: Rubik,sans-serif;
  --_apps---typography--button-font: Onest,sans-serif;
  --_apps---sizes--radius: 12px;
  --_apps---colors--background: var(--white);
  --_apps---colors--foreground: var(--gray-2);
  --_apps---colors--card: var(--white);
  --_apps---colors--card-foreground: #060606;
  --_apps---colors--popover: #f2f2f2;
  --_apps---colors--popover-foreground: #060606;
  --_apps---colors--primary: var(--primary-1);
  --_apps---colors--primary-foreground: #080d16;
  --ph: #da552f;
  --_apps---colors--secondary: #daf7ff;
  --_apps---colors--secondary-foreground: #0a0d13;
  --font-family: Arial,"Helvetica Neue",Helvetica,sans-serif;
  --_apps---colors--muted: #f8f8f8;
  --lightgrey: #abb0bb;
  --_apps---colors--muted-foreground: #7d797a;
  --lightblue-2: #d1e9ff;
  --_apps---colors--accent: #e4e4e4;
  --_apps---colors--accent-foreground: #0d0d0d;
  --_apps---colors--destructive: #d74843;
  --_apps---colors--border: var(--gray-3);
  --_apps---colors--input: #ecf1f4;
  --svgarrowcolor: #98a2b3;
  --_apps---colors--ring: #5788da;
  --_apps---charts--chart-1: var(--primary-1);
  --_apps---charts--chart-2: #78a8f7;
  --_apps---charts--chart-3: #2873ed;
  --_apps---charts--chart-4: #3268c3;
  --light-blue-bg: #deefff;
  --_apps---charts--chart-5: #0c49a6;
  --_apps---sidebar--sidebar: #f8f8f8;
  --nav-bg-hover-color: #c9e6ff;
}

Do's and Don'ts

Do

• Do reserve the accent #1570EF 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): 400, 500, 600, 700.
• Do align spacing to the 4px 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: #1570EF;
  --color-background: #FFFFFF;
  --color-surface: #F8F8F8;
  --color-text-primary: #000000;
  --color-secondary: #000000;
  --color-text-secondary: #E4E7EC;
  --color-border: #475467;
  --color-on-primary: #FFFFFF;
  --color-on-secondary: #FFFFFF;
  --color-on-accent: #FFFFFF;
  --color-surface-container-lowest: #FFFFFF;
  --color-surface-container-low: #FCFCFD;
  --color-surface-container: #F8F8F8;
  --color-surface-container-high: #F2F4F7;
  --color-surface-container-highest: #E9EEF1;
  --font-sans: Onest,sans-serif;
  --font-size-display: 64px;
  --font-size-headline-lg: 40px;
  --font-size-headline-md: 28px;
  --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: 5px;
  --radius-md: 8px;
  --radius-lg: 32px;
  --radius-pill: 100%;
  --shadow-sm: 0 0 30px #e5fff4;
  --shadow-md: 0 4px 60px #00000014;
  --shadow-lg: 0 -2px #00000012;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 32px;
  --space-xl: 80px;
  --tracking-display: -.02em;
  --tracking-label: .05em;
  --container-max: 1280px;
}