projectious.work — Brand & Design System

projectious-work.github.io/brand

Colour, typography, logo, and interface patterns — with the usage terms that go with them.

---

This repository holds the complete brand system for projectious.work: the design documentation, the logo in every delivered format, machine-readable design tokens, and document templates. The published site at projectious-work.github.io/brand is generated from this repository and is built with the system it documents — the colour scales rendering those pages are the scales the pages describe.

Status: Active — maintained · Release: v1.0.0

What's inside

Three scales, defined step roles

The palette is three 12-step Radix-convention ramps — midnight, orange, slate — each in a light and dark variant. Every step carries a role, so a border step never gets pressed into service as text.

A named entry point for each colour

Seven aliases sit on top of the scales for the values most projects reach for first.

Both modes are designed together, not derived from one another:

Three typefaces, three jobs

Plus Jakarta Sans for headings, Source Sans 3 for body, IBM Plex Mono for code — all SIL OFL 1.1, on a fixed ramp. Each row below is set in the values it documents.

Code surfaces stay dark in both modes

…because a code block that flips with the theme forces the syntax palette to be designed twice. Every token in the theme carries a measured contrast ratio.

Components with normative measurements

Where a component appears in the docs, its numbers are binding — a 40px input is 40px.

Documentation

Full-text search is at /search/ — live filtering, term highlighting, shareable ?q= links, and no external search service. The release dropdown in the top bar switches between versions.

Section	Covers
Foundations	Colour, typography, spacing, shape, motion
Logo	Lockups, clear space, minimum sizes, file formats
Interface	Components, code, dark mode, icons, forms
Media	Motion, audio, video, photography, presentations
Collateral	Business card, email signature, social and OG
Governance	Licensing, trademark, legal assessment, provenance
Tokens	CSS, JSON, and Tailwind exports

Repository layout

brand/              Canonical source — the authority for every value
├── html/           The design-system documents (open in a browser)
├── logo/           SVG, PNG @1x/@2x/@3x, favicons
├── tokens/         variables.css · tokens.json · tailwind.config.js
├── templates/      LaTeX and Typst document templates
├── portfolio/      Portfolio presentation assets
├── research/       Source research behind the system
└── email/          Email signature

src/                Hugo site source
├── hugo.yaml       Site config; mounts ../brand/tokens and ../brand/logo
├── content/        Documentation content
├── assets/scss/    Brand tokens → Bootstrap/Docsy — the dogfooding seam
├── layouts/        Layouts and the specimen shortcodes
├── data/brand.yaml Machine-readable values the docs render from
└── themes/docsy    Docsy, pinned as a submodule

scripts/            Local build, serve, deploy, and screenshot scripts
examples/           Standalone Hugo kitchen-sink implementations
├── hugo-docsy/     Docsy example with local build and serve scripts
└── hugo-hextra/    Hextra example with local build and serve scripts

brand/ is the source of truth; src/ renders it. The site is a readable presentation, not a replacement — see brand/README.md.

Build output goes to public/ at the repository root, not inside src/.

Building the site locally

Requires Hugo extended ≥ 0.157 and Node ≥ 18.

git clone --recurse-submodules https://github.com/projectious-work/brand.git
cd brand

./scripts/serve-docs.sh     # live preview at http://localhost:1313/
./scripts/build-docs.sh     # production build into public/
./scripts/verify.sh         # the full check suite
./scripts/deploy-docs.sh    # build and push to the gh-pages branch

When working in the development container, start the watcher with ./scripts/serve-docs.sh --bind 0.0.0.0. The Compose override publishes its port only at http://localhost:1313/ on the host.

There is no CI. No GitHub Actions, no workflows. Builds, checks, and deployments all run locally and are pushed to the gh-pages branch, which GitHub Pages serves from its root. scripts/verify.sh is what "the checks passed" means here:

build-docs.sh also builds the theme examples into the same tree, at /examples/hugo-docsy/ and /examples/hugo-hextra/, so a local public/ is exactly what gets published — paths included. serve-docs.sh stages them for the authoring server too, and serve-docs.sh --built serves the whole published tree. They have no CI or independent deployment configuration; see each example's README for its local build and serve commands.

Check	What it covers
build-docs.sh	Hugo build, including relref resolution
audit-contrast.mjs	Every page in both colour modes against WCAG AA
audit-contrast-brand.mjs	The authoritative documents in brand/html/
validate-portfolio-assets.sh	Portfolio template and status vocabulary
check-links.mjs	Every internal link and asset resolves
check-templates.sh	LaTeX and Typst templates compile

Releasing

./scripts/release.sh v1.2.0 --dry-run   # show what would happen
./scripts/release.sh v1.2.0             # verify, stamp, tag, push, publish

release.sh refuses to run on a dirty tree or a non-default branch, runs the full suite, stamps the version into src/hugo.yaml and the release dropdown, moves the CHANGELOG's Unreleased section into a dated release, tags, and publishes twice — the archived snapshot at /vX.Y.Z/ and the site root as latest. See CHANGELOG.md.

To regenerate the screenshots in this README:

npx playwright install chromium
./scripts/capture-readme-images.sh

Licence

This repository is split-licensed:

• Brand assets — logos, brand imagery, and the design documents under brand/ — are proprietary and source-available. You may view and reference them; you may not modify, redistribute, or use them commercially without written consent.
• Code, scripts, and design tokens are MIT. The token values are free to use.

Full terms in LICENSE.md and TRADEMARK.md. Third-party asset provenance is inventoried in brand/PROVENANCE.md.

Contributing

See CONTRIBUTING.md and CODE_OF_CONDUCT.md. Run ./scripts/verify.sh before opening a pull request. Security or unlicensed-material reports go to info@projectious.work — see SECURITY.md, not a public issue.

---

_{© 2026 projectious.work · Redesigning work — Cloud · Agile · Agentic AI}