Style guide

How Nightly is put together. Change these and the whole site follows.

Start here

Step 1

Open the Projects collection and replace the six demo projects with your own. The newest one marked Featured supplies the last line and the picture of the home page hero.

Step 2

Select the Commits layer in the home page hero and type your own five edits: a short message and the sentence after each one. The words that were removed and added are worked out for you. Give each project a Number, a Unit, a Measure, a Was and a Result line.

Step 3

To rebrand, change Page, Ink and Accent under Assets, Styles. Every layer and every code component reads the colour styles.

Step 4

To change the typeface, set the new family in each text style, then type the same family name into the Font field of Commits, Ship line, Diff, Release, Breakpoints, Moved, Roll, Load time and Preloader.

Step 5

Add desktop, tablet and phone screenshots to a project and the resizing frame appears on its case study. Leave tablet empty and the section stays hidden.

Step 6

Before you publish: set where the contact form sends its messages, replace the placeholder text in Legal, and set the site language in Site settings.

Colours

Page, #0D0C0A

The ground of every page

Surface, #171512

Behind images while they load, and raised states

Ink, #F0ECE4

Headings, body text and the primary button

Muted, #918D84

Labels, captions and secondary text

Quiet, #625F58

The second tone of two-tone headings

Hairline, Ink at 14%

Rules and field underlines

Accent, #FFB02E

Progress lines only. Use it sparingly

Type

Display

Page titles, 72 / 56 / 40

Send me the number

Statement

Section statements, 48 / 40 / 30

Three ways to work with me

Heading

Smaller headings and prices, 32 / 28 / 24

Performance audit

Title

Row and card titles, 22 / 20 / 19

What a double-entry ledger taught me

Figure

Numbers set as text, 64 / 52 / 44

96 ms

Lead

Introductions, 22 / 20 / 18

A payments ledger for 9,000 small shops.

Article

Long-form text in posts and legal pages, 18

Never update a balance. Append what happened.

Body

Paragraphs, 16

I take two contracts a year and say no to the rest.

Label

Labels, facts and dates, 15

Next free, January 2027

Small

Captions and the footer, 14

Last updated 1 October 2026

Nav

Navigation and buttons, 15

Start a conversation

Name

The name in the navigation, 16 medium

Idris Halloran

Other palettes

Graphite

Page #0B0D10, Surface #14171C, Ink #E9EEF2, Muted #8A939C, Quiet #5A626B, Accent #6EA8FF

Cool and a little blue. Hairline: Ink at 14%.

Ember

Page #100B0A, Surface #1A1312, Ink #F3E9E4, Muted #9A8C86, Quiet #675B56, Accent #FF6B4A

Warm, with a coral accent. Hairline: Ink at 14%.

Paper

Page #F4F2EC, Surface #E8E5DC, Ink #15140F, Muted #6F6C64, Quiet #A5A299, Accent #C2410C

A light version. Hairline: Ink at 14%.

Components

Commits

Code. The home hero: one sentence edited in front of the visitor. Each scroll step applies the next edit, striking the words it removes. The last edit adds the Featured project’s Result line and cover from the CMS.

Breakpoints

Code. A frame under a ruler that scroll drags from desktop to tablet to phone width. Fed by a project’s three Screen images.

Moved

Code. The closing scene on the home page: one number rolls from before to after. Type both numbers on the instance.

Roll

Code. A number whose digits roll in the first time it is seen. Used at the top of each case study and on the 404 page.

Load time

Code. The footer line that reports how fast the page loaded for this visitor. When the Preloader played, it shows the number the Preloader landed on.

Code. The footer line that reports how fast the page loaded for this visitor. When the Preloader played, it shows the number the Preloader landed on. When the Preloader played, it shows the number the Preloader landed on.

Navigation

Variants: Desktop, Tablet, Phone, Phone open. It sits once in the Main layout template.

Button

Variants: Primary, Secondary. Controls: Label, Link.

Submit Button

Variants: Default, Pending, Success, Failed. Only used inside the contact form.

FAQ Row

Variants: Closed, Open. Controls: Question, Answer, bound to the FAQs collection.

Viewport

Code overrides. Two make full-height layers use the visible height on phones. The third, withShip, marks a home page section for the Ship line. Leave them applied.

Ship line

Code. The hairline and square down the left edge of the home page. Sections that carry the withShip override show as wireframes until they scroll past the square, then go live. Remove the Ship line layer to switch the effect off.

Diff

Code. One result written as a change, used in the project rows on the home page and the Work page: the old number is struck out and the new one arrives when the row is reached. Fields: Measure, Was, Number, Unit.

Release

Code. The version number beside each post on the home page and the Writing page. It is worked out from the post’s place in the list, so the newest is always the highest.

Branches

Code. The lines behind the three services on the home page. Set Columns to the number of services in front.

Pushes

Code. The photograph on the home page that fills in square by square as you scroll. Swap the image on the layer.

Preloader

Code. The first thing a visitor sees, once a visit: this page’s own requests drawn as bars while they load (document, typeface, script, images), with the milliseconds counting. When the page is ready the bars open onto it. Nothing is typed in: the times come from the visitor’s browser. It is the first layer of the Main layout template. Fields: Play (Once a visit, Every load, Off), the five row names, Shortest show, Longest wait.

Collections

Projects

The last line and picture of the home hero (the newest Featured project), Selected work, the Work page and each case study. Fields: Number, Unit, Measure, Was, Before, Result, three Screens, Problem, Approach, Outcome.

Experience

The list of jobs on the About page. Period is the line shown; Start and End keep the order.

Services

The three cards on the home page, the Services page and each service page.

FAQs

The questions on the Services page, in Order.

Writing

The release log on the home page and the Writing page, and each post.

Testimonials

The review thread under Kind words on the home page. Every item shows, Featured first.

Legal