Skip to main content

​
Overview

Vitaes provides extensive customization options to ensure your resume matches your personal brand and stands out. All customization settings are available in the Theme tab of the Resume Builder.

​
Theme Colors

Choose from eight carefully selected theme colors that work across all templates: 
export const AwesomeColorSchema = z.enum([
  'awesome-emerald',
  'awesome-skyblue',
  'awesome-red',
  'awesome-pink',
  'awesome-orange',
  'awesome-nephritis',
  'awesome-concrete',
  'awesome-darknight',
])

export const colors = {
  'awesome-emerald': '#00A388',
  'awesome-skyblue': '#0395DE',
  'awesome-red': '#DC3522',
  'awesome-pink': '#EF4089',
  'awesome-orange': '#FF6138',
  'awesome-nephritis': '#27AE60',
  'awesome-concrete': '#95A5A6',
  'awesome-darknight': '#131A28',
} as const

Emerald

Professional teal-green, great for tech and healthcare

Skyblue

Trustworthy blue, perfect for corporate and finance

Red

Bold and energetic, ideal for creative fields

Pink

Modern and vibrant, stands out in design roles
Theme colors are applied to section headers, icons, dividers, and other accent elements throughout your resume.

​
Header Alignment

Control how your personal information is displayed at the top of your resume:
Name and contact details aligned to the left - traditional and professional
headerAlign: z.enum(['left', 'center', 'right'])

​
Page Size

Select the appropriate paper size for your region:
  • A4: Standard in most countries (210mm × 297mm)
  • LETTER: Standard in North America (8.5” × 11”)
pageSize: z.enum(['A4', 'LETTER'])
Choose the page size that matches your target region’s standard to ensure proper printing and formatting.

​
Section Color Highlighting

Toggle whether section headers use your theme color: 
sectionColorHighlight: z.boolean()
  • Enabled: Section titles appear in your chosen theme color
  • Disabled: Section titles use default text color for a more subtle look

​
Font Size

Adjust the base font size to fit more or less content: 
fontSize: z.number().positive()
The default font size is 9pt. Smaller sizes (8-9pt) fit more content but may be harder to read. Larger sizes (10-11pt) are more readable but take up more space.
Customize the footer that appears at the bottom of each page. You can configure three footer positions independently: Each footer position (left, center, right) supports: 
export const FooterOptionSchema = z.object({
  text: z.string(),
  showPageNumber: z.boolean(),
})
  • Custom Text: Add any text (e.g., “Confidential”, your name, a tagline)
  • Page Number: Display automatic page numbering
Page numbers and custom text are mutually exclusive. If you enable page numbering, the text field will be disabled.
const defaultFooterOption: z.infer<typeof FooterOptionSchema> = {
  text: '',
  showPageNumber: false,
}

const defaultFooterRight: z.infer<typeof FooterOptionSchema> = {
  text: '',
  showPageNumber: true,
}
By default, only the right footer shows page numbers.

​
Theme Form Interface

The Theme tab in the builder provides all customization controls: 
export const ThemeForm = withForm({
  defaultValues: kendallRoyNew,
  render: function Render({ form }) {
    return (
      <>
        {/* Template Selection */}
        <div className="space-y-2">
          <h3 className="text-sm font-medium">Template</h3>
          <div className="grid grid-cols-2 gap-4">
            {TemplateSchema.options.map((template) => (
              <TemplateCard
                name={template}
                selected={field.state.value === template}
                onClick={() => field.handleChange(template)}
              />
            ))}
          </div>
        </div>

        {/* Theme Color */}
        <form.AppField name="config.themeColor">
          {(field) => (
            <field.FormSelect
              label="Theme Color"
              options={Object.values(AwesomeColorSchema.enum).map((color) => ({
                label: color.replace('awesome-', '').toUpperCase(),
                value: color,
              }))}
            />
          )}
        </form.AppField>

        {/* Header Alignment */}
        <form.AppField name="config.headerAlign">
          {(field) => (
            <field.FormSelect
              label="Header Alignment"
              options={['left', 'center', 'right'].map((align) => ({
                label: align.toUpperCase(),
                value: align,
              }))}
            />
          )}
        </form.AppField>

        {/* Page Size */}
        <form.AppField name="config.pageSize">
          {(field) => (
            <field.FormSelect
              label="Page Size"
              options={[
                { label: 'A4', value: 'A4' },
                { label: 'LETTER', value: 'LETTER' },
              ]}
            />
          )}
        </form.AppField>

        {/* Footer Configuration */}
        <div className="space-y-4">
          <div className="space-y-2">
            <h3 className="text-sm font-medium">Footer Left</h3>
            <form.AppField name="config.footerLeft.text">
              {(field) => (
                <field.FormInput
                  label="Footer Text"
                  placeholder="Enter footer text"
                  disabled={pageNumberLeft}
                />
              )}
            </form.AppField>
            <form.AppField name="config.footerLeft.showPageNumber">
              {(field) => (
                <field.FormCheckbox label="Show Page Number" />
              )}
            </form.AppField>
          </div>
        </div>
      </>
    )
  },
})

​
Live Preview

All customization changes are reflected immediately in the live PDF preview:
  1. Make a change in the Theme tab
  2. The form validates your input
  3. After 500ms, changes are auto-saved
  4. The PDF preview updates in real-time
  5. A thumbnail is generated and uploaded
You can experiment with different combinations without worry - all changes are automatically saved and you can see exactly how they look before sharing your resume.

​
Resume Configuration Schema

The complete configuration schema: 
export const ResumeConfigSchema = z.object({
  template: TemplateSchema,
  themeColor: AwesomeColorSchema,
  headerAlign: z.enum(['left', 'center', 'right']),
  sectionColorHighlight: z.boolean(),
  fontSize: z.number().positive(),
  pageSize: z.enum(['A4', 'LETTER']),
  footerLeft: FooterOptionSchema,
  footerCenter: FooterOptionSchema,
  footerRight: FooterOptionSchema,
})
All customization options are validated using Zod to ensure type safety and data integrity.

​
Best Practices

  • Tech: Emerald, Skyblue, or Nephritis
  • Creative: Pink, Orange, or Red
  • Corporate: Skyblue, Concrete, or Darknight
  • Healthcare: Emerald or Nephritis
Don’t go below 8pt font size, and ensure there’s enough contrast between your theme color and the background.
Use the same template and color scheme across all versions of your resume for brand consistency.
Download and print your resume to ensure the colors look good on paper, not just on screen.

Build docs developers (and LLMs) love

Get started for freeTalk to us