Resume Tracker Design SystemLegacy format

A professional, approachable design system for a free AI-powered resume tracker. The palette blends trust (teal) with warmth and achievement (amber), optimized for a clean SaaS experience.

Background#FFFFFF
Surface#F8FAFC
Teal#0D9488
Teal Bright#14B8A6
Headline
Aa
Search
Body
Aa
Label
Aa
Label

Color Palette

Primary — Teal (#0D9488)

Accent — Amber (#F59E0B)

Semantic

Neutral (from shadcn-vue)

Typography

HeroAssistant, Nunito Sans, Inter, sans-serif · 56px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H1Assistant, Nunito Sans, Inter, sans-serif · 40px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H2Assistant, Nunito Sans, Inter, sans-serif · 32px · Bold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H3Assistant, Nunito Sans, Inter, sans-serif · 24px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

H4Assistant, Nunito Sans, Inter, sans-serif · 19px · SemiBold

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Body LargeAssistant, Nunito Sans, Inter, sans-serif · 20px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

BodyAssistant, Nunito Sans, Inter, sans-serif · 18px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

SmallAssistant, Nunito Sans, Inter, sans-serif · 16px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

CaptionAssistant, Nunito Sans, Inter, sans-serif · 14px · Regular

Every letter tells a story worth reading, and every typeface gives that story a new voice waiting to be heard.

Spacing

Base: 4px
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px

A professional, approachable design system for a free AI-powered resume tracker. The palette blends trust (teal) with warmth and achievement (amber), optimized for a clean SaaS experience.

Components

Buttons

Cards

Card Title

Sample body text for the card component.

Card Title

Sample body text for the card component.

Inputs

Step Indicator

completed

default

Elevation & Depth

Card
Button
Modal
Motion

• Standard duration: 240ms with ease-out

• Hover transitions: 150ms

• Page transitions: 300ms ease-in-out

• Respects prefers-reduced-motion

Accessibility

• WCAG AA contrast targets

• Keyboard navigable

• Focus rings use teal-600

• Screen reader friendly

• Reduced motion support
Download .md
Jeff Harris Jeff Harris @jefhar
License MIT
Uploaded 1 weeks ago
Version v1
File size 3.0 KB
Downloads 15
Copies 1
ai landing modern resume saas

Use with MCP

Using designmd mcp, download the design system https://designmd.ai/jefhar/resume-tracker and implement it in my code

Don't have the MCP? Install it here