Using Custom Styles - Reactive Resume

Custom Styles let you fine-tune the visual details of your resume after you choose a template. Instead of writing CSS, you create structured style rules that target resume sections and semantic parts of those sections, such as section headings, item containers, normal text, links, rich-text paragraphs, and list rows.

Use Custom Styles when the regular Design, Typography, Layout, and Page settings are too broad. For example, you can make only your Experience headings uppercase, add a border around Projects, tighten the spacing inside rich-text bullet lists, or change how inline links appear in descriptions.

<Frame caption="Screenshot of the Custom Styles section in the resume builder right sidebar"> </Frame> <Warning> Custom Styles are powerful layout controls. Small changes can improve polish, but large negative margins, heavy borders, or oversized text can make a resume harder to read or cause content to overflow. </Warning>

When to use Custom Styles

Start with the normal builder settings first:

Need	Use this first
Change the overall color palette	Design
Change body or heading fonts	Typography
Change page size, margins, or section gaps	Page
Move sections between columns or pages	Layout
Hide, reorder, or edit section content	The section controls in the left sidebar

Use Custom Styles when you need a targeted adjustment, such as:

Styling one section differently from the rest of the resume.
Adding padding, background, or border treatment to section items.
Adjusting the spacing between rich-text list bullets and their text.
Making rich-text links, bold text, or highlights stand out.
Tightening rich-text paragraphs or lists in a long section without changing the whole resume.

Create a style rule

<Steps> <Step title="Open your resume in the builder"> From the Dashboard, open the resume you want to customize. </Step> <Step title="Open the right sidebar"> The right sidebar contains the resume-wide presentation controls. </Step> <Step title="Open Custom Styles"> Select **Custom Styles** from the right sidebar. </Step> <Step title="Choose a Target Scope"> Choose where the rule should apply: **All sections**, a **Section type**, or a **Specific section**. </Step> <Step title="Choose a Style Slot"> Choose which part of the target should receive the style, such as **Section heading**, **Item container**, **Primary text**, **Paragraph**, or **List item row**. </Step> <Step title="Set the style values"> Use the **Color**, **Text**, **Spacing**, and **Border** controls. Empty fields mean "use the template default." </Step> <Step title="Review the preview"> The resume preview updates as the rule changes. Exported PDFs use the same rendering path as the preview, so the exported PDF should match what you see. </Step> </Steps> <Frame caption="Screenshot of the Target Scope and Style Slot selectors"> </Frame>

How style rules work

A Custom Style rule has three parts:

Part	What it means	Example
Target Scope	Where the rule applies	All sections, every Experience section, or one custom Projects section
Style Slot	Which semantic element receives the style	Section heading, Item container, Paragraph, List item row
Style values	The visual properties to apply	Text color, font size, padding, row gap, border width

Rules are layered on top of the selected template. The template still provides the base design, and Custom Styles override only the values you set.

If multiple rules affect the same slot, the more specific rule wins:

All sections applies first.
Section type overrides matching All sections values.
Specific section overrides matching Section type and All sections values.

For example, you can make all section headings green, then make only Experience headings black, then make one specific custom Experience section red.

<Info> Disabled rules are ignored. Deleted or hidden sections do not render, so their rules have nothing to affect until the section is visible again. </Info>

Target scopes

Target Scope decides how broad a rule should be.

Target Scope	What it affects	Useful when
All sections	Every rendered section where the selected slot exists. This includes built-in sections and custom sections.	You want a resume-wide default, such as all section headings using the same color or all rich-text lists using tighter spacing.
Section type	Every section with that content type. This includes matching custom sections. For example, a Projects-style custom section is affected by a Projects section-type rule.	You want every Experience section, every Skills section, or every Summary-style section to share a treatment.
Specific section	One actual section in this resume.	You have duplicate or custom sections and want only one of them to look different.

Style property groups

The style editor is grouped by property type. Not every property is meaningful on every slot. Text properties work best on text-facing slots, while spacing, background, and border properties work best on containers.

Color

Control	What it changes	Notes
Text Color	Text color on text-facing slots.	Most reliable on heading, text, secondary text, link, and rich-text slots.
Background	Background color behind the selected slot.	Useful on section containers, item containers, paragraphs, list rows, and highlights.
Text Decoration Color	Underline or line-through color.	Use with Text Decoration.
Opacity	Transparency of the selected slot.	Values range from 0 to 1.

Colors are stored as rgba(r, g, b, a) values. Use the color picker when possible.

Text

Control	What it changes
Font Size	Size in points.
Font Weight	Weight from 100 to 900.
Font Style	Normal or italic.
Line Height	Line-height multiplier.
Letter Spacing	Space between letters.
Text Decoration	None, underline, or line-through.
Decoration Style	Solid, dashed, or dotted decoration line.
Text Align	Left, center, right, or justify.
Text Transform	None, uppercase, lowercase, or capitalize.

Use text controls sparingly. Resume text should stay readable, especially when exported to PDF or parsed by hiring systems.

Spacing

Control	What it changes	Useful for
Padding	Space inside the selected slot.	Creating breathing room inside boxes, highlighted paragraphs, or section items.
Margin	Space outside the selected slot.	Moving headings, paragraphs, or items closer together or farther apart.
Row Gap	Vertical gap between children when the selected slot lays out multiple rows.	Increasing or tightening list spacing and stacked item content.
Column Gap	Horizontal gap between children when the selected slot lays out multiple columns or row children.	Increasing or decreasing the space between a bullet marker and bullet text on List item row.

Spacing values are points. Negative values are allowed for some spacing controls, but they can make content overlap. Prefer small adjustments first.

Border

Control	What it changes
Border Style	Solid, dashed, or dotted.
Border Width	Border thickness in points.
Border Radius	Corner roundness in points.
Border Color	Border color.

Borders are most useful on container slots such as Section container, Item container, Paragraph, and List item row.

Style Slots reference

Style Slots are semantic targets. They describe the part of a section that receives the style.

Section slots

Section slots affect the structured fields of a resume section, such as titles, item headers, dates, keywords, profile links, and level indicators.

Style Slot	What it affects	Useful examples
Section container	The outer wrapper for a section, including the heading and section content.	Add a background tint behind a whole section, add section padding, or place a border around one custom section.
Section heading	The section title, such as Experience, Education, Projects, or a custom section title.	Make all headings uppercase, add extra margin below headings, or use a different color for Skills headings.
Item container	Each item inside a section, such as one job, one school, one project, one skill, or one summary item.	Add padding around each Project, create card-like Education entries, or increase the vertical gap inside Skill items.
Primary text	Normal section text and bold item titles rendered by the template, such as company names, roles, schools, dates, periods, and labels.	Make Experience body text slightly smaller, change date text color in a section type, or align normal text in a custom section.
Secondary text	Smaller supporting text rendered as secondary content, such as skill keywords or interest keywords.	Make skill keywords lighter, reduce keyword font size, or increase opacity for muted metadata.
Link	Structured links outside rich-text descriptions, such as item website links and linked item titles.	Underline project links, change website link color, or make all profile links use the primary color.
Icon	Section-content icons, such as profile, skill, interest, and custom-field icons rendered inside sections. Icon-based level indicators also use the shared icon styling.	Change icon color in Skills, reduce icon opacity in Interests, or use a softer color so icons do not compete with the text.
Level indicator	The wrapper around proficiency indicators used by Skills and Languages.	Add space above level indicators, reduce opacity for less prominent levels, or place a light border around the whole scale.

<Info> Custom Styles currently target sections and rich-text content. The resume header, profile picture, name, headline, and contact area are controlled by template, Design, Typography, Page, and Picture settings instead of these section slots. </Info>

Rich-text slots

Rich-text slots affect content entered in rich-text editors, such as Summary content, Experience descriptions, Education descriptions, Project descriptions, Awards, Certifications, Publications, Volunteer, References, cover letters, and summary-style custom sections.

They do not affect structured fields like company name, school name, date, or website unless those values are inside a rich-text description.

Style Slot	What it affects	Useful examples
Paragraph	Paragraph blocks inside rich-text content.	Tighten long summaries with a smaller line height, add margin between cover letter paragraphs, or add a subtle background behind summary paragraphs.
List	Ordered and unordered list containers inside rich text.	Increase Row Gap to add space between bullet items, or reduce Row Gap to fit more achievements on a page.
List item row	The outer row for each rich-text list item, including the bullet or number marker and the text content.	Increase Column Gap to add more space between the bullet icon and the text, reduce Column Gap for compact lists, or add padding/background around each bullet row.
List item content	The text/content area of each rich-text list item after the bullet or number marker.	Change bullet text line height, make only list content smaller, or apply text color without changing the bullet row layout.
Inline link	Links inside rich-text descriptions. This is separate from the Link slot used by structured website fields.	Underline links in descriptions, change inline link color, or make links use a dotted underline.
Bold text	Bold or strong text inside rich-text descriptions.	Make bold achievements use the primary color, increase bold font weight, or remove extra emphasis by lowering the weight.
Highlight	Highlighted text inside rich-text descriptions.	Change the default highlight background, make highlighted metrics use a different text color, or reduce highlight opacity.

<Tip> **List item row** and **List item content** are intentionally separate. Use **List item row** for layout and chrome, such as padding, background, border, opacity, and the marker-to-text **Column Gap**. Use **List item content** for the bullet text itself, such as color, font size, font weight, line height, text decoration, and text transform. </Tip>

Practical examples

Increase the space between bullet markers and text

Use this when bullet text feels too close to the bullet icon or number.

Set Target Scope to All sections or choose a specific section type, such as Experience.
Set Style Slot to List item row.
In Spacing, increase Column Gap.
Review the preview and adjust in small increments.

Make section headings more distinct

Use this when your template headings need more contrast.

Set Target Scope to All sections.
Set Style Slot to Section heading.
Set Text Color to your primary brand color.
Set Text Transform to Uppercase if you want a stronger heading style.
Add a small Margin Bottom value if headings feel too close to the content.

Create card-like project items

Use this when you want one section to feel visually grouped without changing the whole resume.

Set Target Scope to Specific section.
Choose your Projects section.
Set Style Slot to Item container.
Add Padding on each side.
Set a light Background color.
Add Border Width, Border Color, and a small Border Radius if the template supports the look.

Tighten long descriptions

Use this when descriptions or bullet lists take too much vertical space.

Set Target Scope to the long section type, such as Experience.
Set Style Slot to Paragraph and reduce Line Height slightly.
Set Style Slot to List and reduce Row Gap.
Set Style Slot to List item content and reduce Line Height if bullet text still feels loose.

<Warning> Avoid reducing line height so far that letters collide or text becomes hard to scan. If the resume still overflows, cut content before making the typography cramped. </Warning>

Muting skill keywords

Use this when skill keywords or interest keywords compete with the main labels.

Set Target Scope to Section type.
Choose Skills or Interests.
Set Style Slot to Secondary text.
Lower Opacity or choose a softer Text Color.

Manage applied rules

Every rule you create appears in Applied Rules. Each rule shows its target, style slot, and a compact summary of the properties you set.

Use the rule actions to:

Disable or enable a rule without deleting it.
Edit a rule by loading its target and slot back into the style editor.
Delete a rule permanently.
Reset Style to remove the rule for the currently selected target and slot.

<Tip> If a style change looks wrong, disable the rule first. If the resume looks correct again, edit or delete that rule instead of changing unrelated settings. </Tip>

Troubleshooting

The style did not change anything

Check that the selected slot exists in the selected target.

Common mismatches:

Using Paragraph for company names or dates. Use Primary text instead.
Using Link for links inside a description. Use Inline link instead.
Using Secondary text in a section that does not render secondary text.
Styling Level indicator in a section with no skill or language level values.

A section-specific rule is overriding my global rule

This is expected. More specific rules override broader rules for the same property and slot. Check Applied Rules for matching Section type or Specific section rules.

The resume looks cramped or content overlaps

Disable the most recent spacing rule and review the preview again. Large negative margins, very small line height, and high border widths are the most common causes.

The PDF does not match the preview

Refresh the builder and export again. The preview and PDF export use the same resume rendering path, so persistent differences usually come from stale preview state or font loading.

I want to write custom CSS

Custom Styles do not accept raw CSS. Reactive Resume renders final resumes through a PDF renderer, so Custom Styles use structured style rules that can be safely translated to PDF styles.