CSS variables reference

Krafter injects CSS custom properties (design tokens) onto the .resume root element before rendering. Use these in your template CSS with var(--name, fallback) to respect the user's typography, density, and color choices. The tk-* utility classes in _utils.css already wire most of these tokens to standard resume elements — your template CSS only needs to override what makes it visually distinct.

Typography tokens

All size tokens are in pt and derived from the user's base font size (default 9pt) via a configurable type scale (Minor 2nd, Major 2nd, Minor 3rd, or Perfect 4th). The default scale is Major 2nd.

• --size-display — resume name (base × 1.42, default ~12.8pt)
• --size-subtitle — job title, contact info (base × 1.0, default 9pt)
• --size-label — section headings (base × 1.27, default ~11.4pt)
• --size-heading — item titles, e.g. job title or degree (base × 1.13, default ~10.2pt)
• --size-detail — item subtitles / detail row (base × 1.0, default 9pt)
• --size-body — body text, descriptions, dates (base × 1.0, default 9pt)
• --size-badge — skill tags and badges (base × 0.80, default ~7.2pt)

Font tokens

• --font-body — body text font stack (user's chosen font)
• --font-display — display/heading font stack (falls back to body font)
• --weight-label — section heading font weight (default 700)
• --weight-display — resume name font weight (default 700)
• --transform-label — section heading text-transform (default uppercase)
• --transform-display — resume name text-transform (default none)
• --variant-label — section heading font-variant (default normal)
• --tracking-label — section heading letter-spacing (default 0em)
• --leading — global line-height multiplier (default 1.25)

The font-family is also set as an inline style property on the root element. Users can choose from ~26 curated resume fonts or search the entire Google Fonts catalog (1,700+ fonts).

Spacing tokens

• --space-section — vertical gap between sections (pt, default 12)
• --space-item — vertical gap between items within a section (pt, default 10)
• --space-item-header — gap below the item subtitle row (pt, default 2)

Margin tokens

All four page margin variables are in px (default 30px each). Apply them as padding on the root element:

.resume[data-template="my-template"] {
  padding: var(--margin-top, 30px) var(--margin-right, 30px)
           var(--margin-bottom, 30px) var(--margin-left, 30px);
}

The individual variables are --margin-top, --margin-right, --margin-bottom, and --margin-left.

Colour tokens

10-step accent scale

Krafter generates a perceptually uniform 10-step colour scale from the user's chosen accent colour using the oklch colour space. All steps are available as CSS tokens:

• --color-accent-1 through --color-accent-10 — darkest to lightest. Step 5 is the user's exact chosen colour.
• --color-accent — alias for step 5 (the user's chosen accent)

Use these for structural design elements (sidebar backgrounds, timeline dots, decorative borders) that should always follow the user's accent colour regardless of the colorize toggles. There are 15 named accent presets to choose from in the Render Settings drawer, plus a custom hex input.

Semantic colour tokens

Four semantic colour tokens respect the user's individual colorize toggles in the Render Settings drawer:

• --color-display — resume name colour. Accent when "colorize name" is on, #000000 when off.
• --color-label — section heading colour. Dark accent step when "colorize headings" is on, #000000 when off.
• --color-rule — borders, dividers, and rules. Light accent step when "colorize lines" is on, #000000 when off.
• --color-link — hyperlink colour. Light accent step when "colorize links" is on, #000000 when off.

Use the semantic tokens (--color-*) for text and border elements where the user's colorize toggle should take effect. Use the accent scale tokens (--color-accent-*) for structural design elements that should always be coloured.

Decoration tokens

• --rule-display — separator element visibility (block or none)
• --rule-style — separator line style (solid, dashed, or dotted)
• --rule-width — separator width (e.g. 100%, 50%)
• --rule-height — separator thickness (e.g. 1px, 2px)

Layout tokens

• --header-align — header text alignment (default center)

Example: using tokens in your CSS

/* Left-border timeline — uses accent scale directly (always coloured) */
.resume[data-template="my-template"] .tk-history-item {
  border-left: 2px solid var(--color-accent);
  padding-left: 10pt;
}

/* Section heading — follows the user's colorize-headings toggle */
.resume[data-template="my-template"] .tk-section-heading {
  color: var(--color-label, #000000);
  border-bottom: 1px solid var(--color-rule, #cccccc);
}

/* Use a lighter accent step for subtle backgrounds */
.resume[data-template="my-template"] .tk-header {
  background: var(--color-accent-9, #f0f0f0);
  padding: 12pt;
}