FIELDCRAFT DOCS
HTML template · v1.3.0

/ 03

Customizing

Changing colors and fonts site-wide in tokens.css, swapping images, and editing copy directly in the HTML.

No build step, ever

Every change described on this page is a plain text edit. Open a file, change it, save it, refresh your browser. There is no compiling, no npm install, no CSS preprocessor to run.

Changing colors and fonts site-wide

  1. Open assets/css/tokens.css in any text or code editor (VS Code, Sublime Text, even a plain text editor).
  2. Find the custom property you want to change. The most common ones:
    • --amber — the accent color used on buttons, links and highlights.
    • --iron / --iron-2 — the dark background colors.
    • --paper / --bone — the light text/surface colors.
    • --font-heading, --font-body, --font-mono — the three font families.
  3. Edit the value and save the file.
  4. Refresh any page — every one of the 16 pages links the same tokens.css, so the change applies site-wide from this one edit.
Component styling lives elsewhere

Spacing, section structure and layout (how big a gap is, how a grid is arranged) lives separately in assets/css/main.css — edit that file instead if you need to change how a section is built rather than what color or font it uses. See File Structure → assets/css/.

Fonts

The default three fonts (Big Shoulders, IBM Plex Sans, IBM Plex Mono) load from Google Fonts via a <link> tag near the top of every page's <head>. To use different fonts:

  1. Pick your replacement families on Google Fonts (or any other source) and grab their embed <link> tag.
  2. Replace the existing Google Fonts <link> in each page's <head> with your new one. Since every page repeats this tag, you'll want to use your editor's find-and-replace-across-files feature rather than editing all 16 pages by hand.
  3. Update the matching --font-heading / --font-body / --font-mono values in tokens.css to the new family names.

To self-host fonts instead of loading them from Google Fonts, download the font files, add @font-face rules to main.css pointing at them, and remove the Google Fonts <link> tags.

Swapping images

  1. Prepare your replacement photo at roughly the same aspect ratio as the image you're replacing (the job-file cards are 4:5, the wide feature bands are 16:9 or 21:9) so it drops in without cropping oddly.
  2. Save it into assets/img/, ideally under the same filename as the image you're replacing (e.g. save your new photo as hero.jpg to replace the existing hero image) so you don't have to edit any HTML at all.
  3. If you're using a different filename, find every <img src="assets/img/…"> reference to the old file across the page(s) that use it and update the src attribute (and the matching alt text) to your new filename.

Editing copy

  1. Open the page you want to edit (e.g. about.html) in your text/code editor.
  2. Find the text you want to change and edit it directly in the HTML — there's no templating layer, no shortcode system and no content-management step to fight. What you see in the file is exactly what renders in the browser.
  3. Save the file and refresh your browser tab.

Since the 16 pages are independent files with no shared include system, a piece of repeated copy (like the footer address or phone number) needs to be edited on every page it appears on — use your editor's find-and-replace-across-files feature to update it everywhere at once.

What's next

See Page Reference for what each of the 16 pages is for, or FAQ for common questions about hosting, forms and browser support.

← PreviousFile StructureNext →Page Reference