ResumeBuilder Pro — Style Guide

A compact, developer-friendly style guide for ResumeBuilder Pro covering brand tokens, typography, spacing, components, accessibility, motion, and implementation snippets.

1. Brand Tokens

Brand Primary

#083D77

Main brand color for headers, CTAs

Brand Secondary

#449DD1

Secondary actions, accents

Accent

#FFBC42

Highlights, warnings, notifications

Success

#35B66B

Success states, confirmations

Error

#EE4954

Error states, destructive actions

Muted

#6B7780

Secondary text, placeholders

CSS Variables

:root {
  --brand: #083D77;
  --brand-2: #449DD1;
  --accent: #FFBC42;
  --success: #35B66B;
  --error: #EE4954;
  --bg: #F6F8FA;
  --surface: #FFFFFF;
  --muted: #6B7780;
  --r: 12px;
}

:root.dark {
  --bg: #0D1114;
  --surface: #141719;
}

2. Typography

H1: 28px / 800 weight

H2: 20px / 700 weight

H3: 16px / 600 weight

Body: 14px / 1.5 line-height (Inter font family)

Small/Caption: 12px (muted color)

Arabic text: Noto Sans Arabic (النص العربي)

3. Spacing & Layout

Design uses a clarified spacing scale:

xs: 4px
sm: 8px
md: 12px
lg: 16px
xl: 24px

4. Button System

Button Variants

Implementation

.btn {
  padding: var(--md) var(--lg);
  border-radius: var(--r);
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.2, 0.9, 0.2, 1);
}

.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(8, 61, 119, 0.16);
}

5. Forms & Controls

6. Components

Hamburger Menu

Click to test hamburger menu animation

Dark Mode Toggle

Click to toggle between light and dark mode

Avatar

JD
User Avatar (48x48px)

Card

Card Title

This is a sample card component with proper spacing and styling.

7. Motion & Accessibility

Motion Guidelines

Accessibility Checklist

8. Developer Snippets

React Button Component

export function Button({variant='primary', children, ...props}) {
  return (
    <button 
      className={`btn ${variant==='primary'?'btn-primary':''}`} 
      {...props}
    >
      {children}
    </button>
  )
}

Tailwind Config

module.exports = {
  theme: {
    extend: {
      colors: {
        brand: '#083D77',
        'brand-2': '#449DD1',
        accent: '#FFBC42',
        success: '#35B66B',
        error: '#EE4954'
      },
      borderRadius: {
        'brand': '12px'
      }
    }
  }
}

ResumeBuilder Pro Style Guide — Single source of truth for UI decisions