Colours, fonts and pictures

Colours

All colours are in _includes/css/theme.css, as plain CSS. Each one has a light and a dark value, written light-dark(light, dark):

--brand: light-dark(var(--vermilion-600), var(--vermilion-400));

The ones you’re most likely to change:

Name	Used for
--page	The page background
--ink	Text
--brand	Buttons, the vermilion words in headings, the illustrations’ main colour
--brand-ink	Links and section numbers (darker, so small text stays readable)
--accent	The “available” dot and success messages
--highlight	The marker colour behind highlighted words

You can use any colour value, for example --brand: light-dark(#2b59c3, #8fb0ff);. Check that text on it is still readable with a contrast checker such as WebAIM’s: 4.5 to 1 for normal text.

Sections can also take a different background with tone: (see Sections).

Light and dark mode

The page follows each visitor’s system setting. The round button in the header switches it and remembers the choice in their browser. There’s nothing to set up.

Photos

Put your photos in assets/images/ and use image: in a hero, about, work or testimonial item:

    image:
      src: /assets/images/project-bakery.webp
      alt: The new bakery bag and shop sign
      width: 1600
      height: 1200

• width and height are the photo’s size in pixels. They stop the page jumping while it loads.
• Work cards are 4:3, hero and about pictures 4:5. Other shapes are cropped to fit; add position: top (or bottom, or 30% 20%) to choose which part stays.
• Export WebP at about twice the size it’s shown, around 1600 pixels wide for a work card. Squoosh does this for free.
• Write alt text that says what’s in the picture.

Illustrations

Alcor comes with five drawings in _includes/art/: designer-desk (4:5), and crumb-co, bairro-books, studio-norte and lumen-notes (4:3, for work cards). Use one with art: instead of image::

    art: designer-desk
    art_label: Drawing of a designer at her desk

art_label describes the drawing for screen readers. Leave it out when the drawing is only decoration.

The drawings have no fixed colours. Each shape has a class, and the theme fills it with your colours, so they follow --brand and dark mode. They’re MIT-licensed, like the theme: use them anywhere.

Drawing your own

Save an SVG in _includes/art/ and give its shapes these classes instead of colours:

Class	Colour
art-bg	Soft background (sand)
art-1 / art-1s	Brand / a light tint of it
art-2	Accent (moss)
art-3	Highlight (ochre)
art-ink	Solid ink
art-fig	Paper, for figures and objects
art-line / art-line-1	Ink outlines / brand-coloured strokes (set stroke-width on the shape)
art-shade	A faint shadow

Then use it with art: your-file-name (without .svg).

Fonts

Headings use Instrument Serif, self-hosted in assets/fonts/ (about 21 KB, plus the italic when a page uses it). Everything else uses each visitor’s system font, which costs nothing to load.

To use another heading font, put its .woff2 files in assets/fonts/, update the two @font-face rules in _includes/css/fonts.css and the preload link in _includes/head.html, and change --font-display in _includes/css/scale.css.

Sizes and spacing

Type sizes, spacing and the page width are in _includes/css/scale.css. They grow smoothly between phone and desktop, so one value works on every screen.