Typenik
Menu
WritingLong workWord & LibreOfficeYour filesDownload free

House style

One family, many products.

This site is built from two layers. house.css is shared by every product: the neutrals, the type, the spacing and every component. A short product file sets the accent colour, the display face and the mark. Change those, write new pages, and the new site belongs to the same family.

Principles

What makes it ours

Paper, not packaging

A cool white page and near-black ink. Colour is used once, for the product’s accent, and only for actions and labels.

Show the real thing

Screenshots of the product in use carry each page. Every claim is something the reader can see or check.

The double slash

Monospaced labels with a leading // – the same separator as the products’ own footers – tie every page and product together.

Colour

Shared neutrals, one accent

--paperPage
--canvasTinted sections
--ruleLines and borders
--ink-3Labels, captions
--ink-2Body copy
--inkHeadings, the mark
--brand-accentProduct · actions
--brand-accent-softProduct · tints

Every token has a dark-theme value. The site follows the visitor’s system setting until they choose with the switch in the header.

Type

A display face, a text face, a label face

Display · LoraA quiet place
Heading · Lora

Long work, made easy

Lead · 21

Typenik keeps every word in a plain file that belongs to you.

Body · 17 Inter

Body text is set in Inter at 17px with generous leading, in the softer second ink.

Label · 13 mono

Section label

The display face is the product’s: Typenik uses Lora. Inter and the system monospace are shared.

Components

The parts every page is made from

Primary action Secondary .docxbadge Ctrl+E A “more” link
  • Status strip: Off
  • Facts: Set out
  • Like an app’s status bar
01

Card

For a benefit, with an optional number or file type above.

Note. For the one thing on a page the reader mustn’t miss.

A plate showing the Document statistics window

Plate

A close-up, shown whole.

A plate showing the top of the Snapshots window

Plate, top

The top of a tall picture, fading out.

A plate showing the word-count target in the status line

Plate, strip

For a thin strip such as a status bar.

  • Tick lists lead with the benefit in bold
  • Screenshots sit in a plain window frame, with a // caption, and open full size when clicked
  • Plates put a close-up of one feature at the top of a card, panel or step, on a dotted ground
  • Pages end with a pager or a dark call-to-action band, then the shared footer

The family

Same house, different doors

The mark is always a rounded ink square with a single white letter. Only the accent and the letter change.

Typenik

Writing

Accent #1a56db, display face Lora.

Download
Product F

Example

Accent #157a52. Same neutrals, same parts.

Download
Product M

Example

Accent #8a3a8f. Swap four tokens and a letter.

Download

Starting a new product site

Three steps

  1. Copy the site

    Keep assets/house.css and assets/site.js exactly as they are, so a fix to one site can be copied to all.

  2. Set the product

    In assets/product.css, change the accent tokens (light and dark) and the display face. In build.py, change the name, the letter in the mark and the navigation.

  3. Write and build

    Write each page’s content in src/, using the components above, then run python3 build.py to wrap them in the shared header and footer.

Then replace the screenshots in shots/ with the new product in use – WebP, about 1,800 pixels wide.