Documentation

• 1: Foundations
• 1.1: Colour
• 1.2: Typography
• 1.3: Space, shape, and motion
• 2: Logo
• 2.1: Lockups
• 2.2: Usage
• 2.3: Files
• 3: Interface
• 3.1: Components
• 3.2: Dark mode
• 3.3: Code
• 3.4: Icons
• 3.5: Forms
• 4: Portfolio presentation
• 4.1: Status treatments
• 4.2: Social previews
• 4.3: Diagrams and demos
• 5: Media
• 5.1: Audio and video
• 5.2: Photography and illustration
• 5.3: Presentations
• 6: Collateral
• 6.1: Business card
• 6.2: Email signature
• 6.3: Social and OG images
• 7: Governance
• 7.1: Licensing
• 7.2: Trademark
• 7.3: Legal assessment
• 7.4: Asset provenance
• 8: Tokens

1 - Foundations

Foundations are the values the rest of the system is built from. They are deliberately small in number and fixed: a component may choose which token to use, but it does not invent new ones.

1.1 - Colour

The palette is three scales — midnight, orange, and slate — each expressed as a 12-step ramp in a light and a dark variant. The step numbering follows the Radix convention, which assigns every step a role. Using a step outside its role is the single most common way to break the system.

Core colours

These are the named aliases most projects reach for first. They are shortcuts into the scales, not a separate palette.

• Primary

  #1d3352

  Text, headings, primary surfaces
• Primary Light

  #2b4d78

  Hover states, dark-mode primary
• Primary Dark

  #132440

  Dark backgrounds, navbar, code blocks
• Accent

  #E05232

  CTAs, highlights, active states
• Accent Light

  #ea7558

  Accent hover on dark, syntax strings
• Accent Dark

  #b84228

  Accent pressed state
• Accent Solid

  #cc4528

  Fill for solid controls with white text (4.72:1)
• Secondary

  #546a82

  Supporting text, borders

Step roles

Every scale uses the same twelve roles in the same order:

Midnight

Midnight is the primary. It carries structure, text, and the calm end of the system. Step 9 (#1d3352) is the brand primary and is identical in both modes.

Orange

Orange is the accent. It marks the primary action, the active state, and little else. Step 9 (#E05232) is constant across modes.

Slate

Slate is the secondary — supporting text, borders, and neutral surfaces. Step 9 (#546a82) is the brand secondary and is constant across modes.

Contrast rules

• Never use pure #000 or #fff as text. Use step 12 of the relevant scale: #142438 on light, #c5daf0 on dark.
• Step 9 is constant across modes. The solid accent does not shift when the theme changes.
• Body text targets 4.5:1, large text (≥24px, or ≥18.66px bold) targets 3:1.
• Verify against the actual surface. A step that passes on the app background may fail on an elevated panel.

Where an identity colour cannot carry text

Being the brand colour does not make a value a legible background. White on orange-9 (#E05232) measures 3.87:1 — fine as a mark or a border, but below the floor for button labels. Rather than dilute the accent, the system adds a separate fill for that job:

The same principle produced the code-comment token: when no existing step can do the job accessibly, name a new one rather than misuse a step.

Semantic colours are mode-specific

The callout hues are tuned for dark text on tinted light backgrounds. Used as foregrounds on the dark app surface they fall below AA, so dark mode has its own set:

Dark mode

Both modes are equally supported. See Dark mode for the implementation rules — theme switching, persistence, image treatment, and the always-dark code surface.

1.2 - Typography

The system uses three typefaces, each with one job. All three are licensed under the SIL Open Font License 1.1 and served from Google Fonts, so there are no bundled font binaries to license or redistribute.

The three families

Loading them:

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap">

The ramp

Every row below is set in the family, size, weight, and line-height it documents — this is the live specimen, not a picture of one.

Rules

• Letter-spacing tightens to −0.3px above 20px. Large type set at default tracking reads loose and unresolved.
• Overline is a label, not a heading. 11px, 600, uppercase, 0.08em tracking. Use it above a heading, never as one.
• Body copy is 16px / 1.65. This is the reading size for documentation and long-form prose. Do not set body text below 14px.
• Never set body copy in Plus Jakarta Sans, and never set headings in Source Sans 3. The split is what makes the voice recognisable.

1.3 - Space, shape, and motion

Spacing

A 4px base with a nine-step scale. Every margin, padding, and gap resolves to one of these values.

Content sits inside a 1100px measure. Wider viewports gain margin, not line length.

Radius

Radius is a signal of scale: the larger the surface, the larger the radius. Mixing radii on nested surfaces reads as a mistake — a 6px control inside a 9px card is correct; a 13px control inside a 6px card is not.

Elevation

Four levels. Shadows are soft and low-contrast; the system leans on borders and surface tint before it reaches for shadow.

In dark mode, elevation is expressed by lightening the surface rather than deepening the shadow — a shadow on a near-black background is invisible.

Motion

Things slide into place. They do not bounce.

Durations

Easing

Motion rules

• All animation wraps in @media (prefers-reduced-motion: no-preference), or is disabled under prefers-reduced-motion: reduce.
• CSS-only for HTML. For React, use Framer Motion with these same timing values.
• Never animate text character-by-character.
• Page transitions cap at 400ms.

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

2 - Logo

The mark is a stencil peony bud — concentric petal cuts resolving to an accent centre. It reads as a single form at 16px and holds its internal structure at poster scale.

2.1 - Lockups

Four lockups are approved. Each has a defined context; using one outside its context is what makes a layout feel off-brand even when the colours are right.

All four are built with HTML and CSS rather than flattened artwork, so spacing comes from natural text flow and never needs re-kerning.

The four lockups

On light and dark

Every lockup has a light-surface and a dark-surface rendering. The mark’s inner cuts pick up the surface colour, so it never needs a plate or a knockout box.

The mark alone

The mark may stand alone only where the wordmark is already established nearby — an app icon on a page that names the product, an avatar in a signed-in context, a favicon.

Minimum for the standalone mark is 24px. The 16px rendering exists for favicons only, where the browser supplies the name.

Product line

Product names extend the wordmark with the same dot construction and flow.

Wordmark construction

The separator between “projectious” and “work” is a dot in the mark’s own geometry, not a typed period. It takes slate on light surfaces and midnight-11 on dark. Spacing is handled by flex layout so the wordmark reflows naturally — do not hand-kern it or convert it to a static image.

2.2 - Usage

Clear space

Minimum clear space is 1× the icon height on all sides. Nothing — text, rules, image edges, other logos — enters that exclusion zone.

At a 40px mark, that is 40px of clear space in every direction. The zone scales with the mark, so it never needs recalculating per context.

Minimum sizes

Below these sizes the petal cuts collapse into a smudge. If the space is smaller than the minimum, use a smaller variant rather than scaling one down.

Monochrome

Four monochrome treatments are approved, for print, fax, embossing, and any single-colour reproduction:

The white-reversed variant uses slate for its inner lines rather than the background colour, so the petal structure stays visible. All petal structure must remain legible in every monochrome variant — a solid silhouette is not an approved treatment.

On colour

The slate-5 threshold is the decision rule: measure the background, pick the side it falls on. On the accent, neither variant has enough separation on its own, which is why the ring exists.

On photography

Never place the mark directly on an unmodified photograph. Apply a semi-transparent midnight backing — a shape, a scrim, or a gradient — so the mark sits on a controlled surface. The backing is part of the logo treatment, not an optional enhancement.

Watermark

For background use, the mark may run as a watermark at 8–15% opacity. It renders as a uniform wash: no accent colour in watermark mode, since a single coloured element at low opacity reads as a printing error.

Favicons

Icon-only, on a midnight tile, with 12% padding. Corner radius scales with size:

2.3 - Files

Formats

SVG is the source. Raster exports exist for contexts that cannot take vector — prefer SVG wherever the medium allows it.

Variants

Each raster size ships in five variants:

• icon-light — for light surfaces
• icon-dark — for dark surfaces
• icon-mono-black — single-colour black
• icon-mono-white — single-colour white, reversed
• icon-mono-gray — single-colour grey

Downloads

The logo files are served from this site and are also in the repository under brand/logo/.

3 - Interface

Interface guidance applies the foundations to working software. Where a component appears here, its measurements are normative — a 40px input is 40px, not “about 40px”.

3.1 - Components

Every specimen on this page is live markup styled by the brand tokens, ported from brand/html/projectious-kitchen-sink.html. They follow your colour mode — switch the theme and they change with the documentation.

Measurements listed here are normative: a 40px input is 40px.

Buttons

Five variants, three sizes. Plus Jakarta Sans 600, 6px radius, 200ms transitions.

Inputs

Default height 40px (sm 32, lg 48). Source Sans 3 at 13px, slate-7 border, and a 2px focus ring at midnight 15% alpha.

Full rules — labels, validation, focus — are on Forms.

Cards

Radius 9px, padding 24px, 1px slate-4 border, shadow-1 at rest. Nested controls step down one radius.

Tables

Header cells use the overline style. Striping uses the subtle background step, never a border-only rule. Wide tables scroll inside their own container.

Table with search and filters

A toolbar above the table carries the search field and filter chips. Active filters are shown as removable chips so the current view is always legible — never leave a filter applied with no visible indication.

Multi-level headers

Grouped columns use a two-row header. The group row is centred over its span and separated by a vertical rule — the only place the system uses one.

Grouped rows and totals

Row groups act as sub-headings inside the table. A totals row is separated by a 2px rule — heavier than the body rules, so it reads as a summary rather than another record.

Wide tables

A wide table scrolls inside its own container, never the page, and pins its first column so the row identity stays visible while scrolling.

Navigation

Alerts and feedback

Four semantic colours as a 4px left border on a tinted background. The hues are mode-specific — see Colour.

Modals and overlays

Modal radius 13px with shadow-3; scrim is midnight at 40% alpha. Focus is trapped while open and restored to the trigger on close; Esc always closes.

Data display

Code and terminal

The code surface is always dark — see Code.

3.2 - Dark mode

Dark mode is not a variant of the brand — it is half of it. Both modes are designed, tested, and shipped together.

Implementation rules

• Default follows prefers-color-scheme, with a manual override toggle persisted to localStorage.
• CSS custom properties swap per theme. Components read tokens; they do not branch on the mode themselves.
• Step 9 (solid accent) stays constant across modes. #E05232 is #E05232 everywhere.
• No pure #000 or #fff as text. Use step 12 — #c5daf0 on dark, #142438 on light.
• Images get a subtle overlay (black at low alpha) in dark mode, so a bright photograph does not punch a hole in a dark page.
• Code blocks are always dark, regardless of mode. See Code.

Surfaces

Elevation in dark mode is expressed by lightening the surface, not by deepening the shadow — a shadow against a near-black background is invisible.

Restating text on dark surfaces

The default heading colour is midnight-9, chosen so headings read correctly on light pages. That same value on a midnight surface is invisible — #1d3352 on #1d3352 is a contrast ratio of 1.00:1.

Any component that paints its own dark background must therefore restate its text colours. This applies to covers, dark boxes, footers, and overlays:

.surface--dark {
  --bs-body-color: #c5daf0;    // midnight-dark-12
  --bs-heading-color: #c5daf0;
  --bs-secondary-color: #97a8b8; // slate-dark-11, still AA
}

3.3 - Code

Code blocks are always dark

Code blocks stay dark regardless of colour mode. A code surface that flips with the theme forces the syntax palette to be designed twice and makes screenshots inconsistent between users. The surface is midnight-2 from the dark scale (#131e2b) in both light and dark mode.

The block you are reading is rendered by that rule:

// Agent pipeline definition
const pipeline = createPipeline({
  name: "validate-deploy",
  policy: "strict",
  agents: ["auditor", "deployer"],
});

Syntax theme

Because the surface is always dark, every syntax value is read from the dark scale. Contrast is measured against #131e2b:

Why comments have a dedicated token

Comments are the one syntax role with no scale step available to it.

Code comments are ordinary 13px text, so they need 4.5:1. The obvious candidate, slate-8, measures only 3.02:1 on this surface — and it is a border step, not a text step (see step roles). The next steps up are no better: slate-9 is 3.01:1 and slate-10 is 3.78:1, both also non-text roles. The first step that clears AA, slate-11, is already spoken for by operators, and reusing it would erase the distinction between a comment and an operator.

So code-comment (#72889d, 4.59:1) exists as a dedicated syntax token — the dimmest value that clears AA while staying visibly below operators. It is not a scale step and should not be treated as one.

Inline code

Inline code does not take the dark block treatment — it follows the surrounding surface. On light surfaces it sits on midnight-2 (light scale) with orange-11 text; in dark mode both values shift to their dark-scale counterparts. It uses IBM Plex Mono at 13px with a 3px radius.

Terminal output

Terminal blocks use the same dark surface. Prompts take the comment colour, output takes the operator colour, so a transcript stays readable without becoming a second syntax theme.

$ hugo --gc --minify
Start building sites …
Total in 842 ms

3.4 - Icons

Library

The system uses Lucide — an actively maintained fork of Feather with over 1,400 icons.

ISC is one of the most permissive open-source licences available, which is why it was chosen over icon sets with attribution or share-alike terms. See the legal assessment for the clearance detail.

Usage

• Stroke width 2, matching Lucide’s default. Do not thin or thicken strokes to “match” a layout.
• Size on the 4px grid: 16, 20, 24, 32px. 20px is the default for inline UI.
• Colour follows text. An icon beside a label takes the label’s colour. Standalone icons carrying meaning take --color-secondary; an icon marking the primary action takes the accent.
• Icons are not decoration. Every icon must carry meaning the label does not already carry, or be marked aria-hidden="true".

3.5 - Forms

Sizing

All inputs are set in Source Sans 3 at 13px.

States

Labels

Labels use the overline style and sit above the field. Floating labels are not used anywhere in the system — they hide the label at exactly the moment the user is filling the field, and they break at long label lengths.

.field__label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-secondary);
}

Validation

• Error text sits below the field, in orange-11 on light surfaces.
• Never rely on border colour alone to signal an error — pair it with text.
• Validate on blur, not on every keystroke; re-validate on submit.

4 - Portfolio presentation

Portfolio presentation must make maturity and limitations easier to see, not make prototypes appear more complete than they are.

• Status treatments define the approved maturity vocabulary.
• Social previews define reusable repository artwork.
• Diagrams and demos define evidence and source requirements.

These patterns are Projectious organization assets. Bernhard Gerlach’s personal LinkedIn profile is a separate identity: use his name, portrait, and first-person voice only with his approval. Do not turn a personal profile into an organization-brand channel or imply personal endorsement.

4.1 - Status treatments

Required pattern

Every project presentation must show a status as text. Color, icons, position, and motion may reinforce the label but must never replace it.

Do not substitute broad claims such as “platform”, “production-ready”, or “enterprise” unless the owning repository publishes evidence for that claim. Prefer narrow artifact categories: CLI, process layer, applied research, prototype, library, or supporting asset.

Accessibility

• Keep the full status label visible at all viewport sizes.
• Pair every color with the status-specific shape in the table.
• Use normal text contrast of at least 4.5:1 and large-text/UI contrast of at least 3:1.
• Test light and dark variants independently.
• Do not encode a status change with animation alone.

The source templates use high-contrast neutral text and reserve accent color for a supporting rule. Maintainers must rerun local validation after changing colors.

Project examples

Examples are prompts for maintainers, not permanent factual claims. Confirm each status and limitation with the owning repository before publishing.

4.2 - Social previews

Content model

Every 1280×640 preview contains only:

1. Projectious organization mark and name.
2. Project name.
3. One narrow artifact category.
4. One complete maturity label from the status vocabulary.
5. An optional short limitation, never a marketing claim.

The editable source is brand/portfolio/social-preview-template.svg. Replace bracketed text, keep the status label intact, and save a project-specific SVG beside the template. Examples for aibox, processkit, ai-market-research, and KubeClaw demonstrate the content structure; they are not evidence of current maturity.

Export and validation

Run:

npm run portfolio:validate
npm run portfolio:export

The export script uses resvg when available and otherwise leaves the SVG source as the canonical reusable asset. Commit generated PNGs only when a repository needs them.

Source and generated exports use this repository’s split license. The Projectious name and marks remain subject to TRADEMARK.md. Record any third-party typeface, icon, logo, or screenshot in brand/PROVENANCE.md before use. The supplied templates contain no third-party logos or screenshots.

4.3 - Diagrams and demos

Architecture and flow diagrams

• Prefer left-to-right flow, explicit boundaries, and named protocols.
• Distinguish implemented components from planned components with text: implemented, external, or planned.
• Add a caption with repository, source path, commit or release, and capture date.
• Never infer architecture from a social preview or marketing page.
• Keep editable source beside the export and document the export command.

Suggested caption:

Source: owner/repository, docs/architecture.svg, release vX.Y.Z, captured YYYY-MM-DD. Planned elements are labelled.

Screenshots and demos

• Show real output from a named build, commit, or release.
• Frame the output without modifying product state or hiding errors.
• State sample/synthetic data clearly.
• Do not fabricate dashboards, terminal output, customer logos, or product UI.
• Crop personal data, tokens, account identifiers, and unrelated windows.
• Record capture command, viewport, theme, and date in provenance.

When there is no real output yet, use a text-first project card labelled Idea / implementation starting. A truthful absence is better than a fictional interface.

5 - Media

Media guidance covers everything with a time dimension or a photographic surface — the places where the system meets material it does not fully control.

5.1 - Audio and video

Audio identity

Four defined cues. All are short, tonal, and mid-register — the audio equivalent of “slides into place, doesn’t bounce”.

Error is a single low note, not a buzz or a descending pair — it marks the event without scolding.

Video rules

• Demos run at real time. No fast-forward, no speed ramps. If a step is slow, that is information the viewer needs.
• Transitions are a cut or a 200ms fade. No swoops, wipes, or 3D moves.
• All video uses midnight surfaces.
• Subtitles are always available.
• Export at 1080p minimum, 4K when possible.

5.2 - Photography and illustration

Sources

Preferred: Unsplash and Pexels — royalty-free, no attribution required for commercial use. Commission custom photography where possible, from local European photographers.

Never use: watermarked Shutterstock or Getty imagery, or AI-generated imagery.

Every photograph must pass the test: “would a developer trust this?” Stock imagery of handshakes in glass lobbies fails it. A real desk, real hardware, or real people working passes it.

Treatment

• Photographs in dark mode receive a subtle black overlay so they do not punch a hole in the page.
• The logo never sits directly on an unmodified photograph — see Logo usage.
• Never place text over a busy region. Add a scrim or crop to a quiet area.

Illustration

The illustration style is abstract system diagrams — nodes, flows, and pipelines drawn in the brand palette.

• Midnight for structure, slate for supporting lines, accent for the single element that matters.
• Dashed strokes indicate inferred or optional relationships.
• Labels use Source Sans 3; never letter-space diagram labels.
• Diagrams are line-based, not filled — the system reads as engineering drawing, not infographic.

5.3 - Presentations

Core slides

Six slide types cover most decks:

The full deck

Twelve slide types cover a complete talk. Each is 16:10 and uses the same tokens as the product surfaces — no separate “presentation theme”.

Rules

• 16:10 aspect ratio.
• Title slides and section statements use midnight surfaces; content slides use white or midnight-1.
• projectious.work is visible on the title and closing slides.
• One idea per slide. If a slide needs a paragraph, it needs to be two slides.

Animation

• Slide transitions: cut or 200ms fade.
• Build animations use --ease-out at --duration-standard.
• Never animate text character-by-character.
• Motion is for revealing structure, not for holding attention.

Templates

Document templates for LaTeX and Typst are in brand/templates/. Both embed brand identity and fall under the brand-asset licence terms — see Licensing.

6 - Collateral

Collateral is where the brand travels without its context. These artefacts are often seen once, at small size, next to other companies’ material — so they lean harder on the mark and the wordmark than in-product surfaces do.

6.1 - Business card

The primary format is digital — a vCard shared via QR code or direct link, not a printed card.

Layout

• Midnight surface, mark top-left, name in Plus Jakarta Sans 700.
• Role in Source Sans 3 400, in slate-dark-11.
• Contact rows in IBM Plex Mono at 11px — addresses and handles are data, and monospace makes them scannable and unambiguous.
• projectious.work always present.
• Accent used once, on the QR frame or the primary contact method.

Print fallback

If a printed card is required:

• 85×55mm, matte stock.
• Single-colour midnight on uncoated white, or reversed white on midnight.
• Use the monochrome mark — no accent on press unless a spot colour is budgeted.
• Respect the 1× clear-space rule; do not bleed the mark to the trim edge.

6.2 - Email signature

The signature is built to work in clients with hostile CSS support — Outlook included. The source is brand/email/signature.html.

Construction rules

• Table-based layout. Flexbox and grid do not survive Outlook.
• Inline styles only. Most clients strip <style> blocks.
• Web-safe font fallbacks. Brand fonts will not load in most clients — the stack must degrade to a system sans without breaking the layout.
• The mark is a hosted PNG, not an SVG and not a data URI. Include alt text; many clients block images by default.
• No background images. Use a solid bgcolor attribute.

Content

One line each: name, role, projectious.work, and a single contact method. The one-line lockup is used here — the signature is a horizontal context.

6.3 - Social and OG images

Priority

LinkedIn and GitHub first, blog second, Twitter/X as backup. The templates are sized for those surfaces in that order.

Template rules

• Backgrounds are midnight or midnight-dark, or white with an accent top bar.
• projectious.work is always visible.
• Never place text over a busy background.
• An accent glow circle at subtle opacity provides visual interest without competing with the text.
• Typography hierarchy is unchanged: Plus Jakarta Sans for headlines, Source Sans 3 for body.

Open Graph

• 1200×630px.
• Headline at Display weight, capped at roughly 60 characters — longer headlines are truncated by most platforms anyway.
• The mark sits bottom-left or top-left, never centred.
• Test the rendering at 320px wide: most impressions are in a mobile timeline.

7 - Governance

This section states what you may and may not do with the material in this repository. It is deliberately explicit: a design system that is source-available without clear terms is a liability for everyone who touches it.

7.1 - Licensing

The repository carries two categories of intellectual property under different terms. The full text is in LICENSE.md; this page summarises it.

Brand assets — proprietary, source-available

Everything representing the visual identity: logos, brand imagery, and the design-system documents under brand/.

Document templates under brand/templates/ fall under these same terms: they embed brand identity (colours, fonts, tagline). You may use them as structural reference for your own templates, but not redistribute them with projectious.work branding intact.

Code, scripts, and tokens — MIT

Source code, automation scripts, and configuration files (.py, .js, .sh, .json, .yaml) are MIT-licensed: use, copy, modify, merge, publish, distribute, sublicense, and sell, provided the copyright and permission notice travel with the software.

The design tokens — brand/tokens/ — are in this category. The values are free to use; the marks are not.

What this means in practice

For commercial inquiries or brand consent: info@projectious.work

7.2 - Trademark

The names, logos, and icons associated with projectious.work are its trademarks. Full text: TRADEMARK.md.

Not permitted

• Using the logo as your own, or as part of your own logo.
• Using the brand name in a way that suggests partnership or official status without a signed agreement.
• Registering domain names, social handles, or app names that include the trademarks in a confusingly similar way.

Permitted

1. Linking to the official website.
2. Press articles or blog posts about the project.
3. Technical documentation that refers to the tools.

These are nominative uses — referring to the thing by its name. They do not require permission, and they do not grant any broader licence.

7.3 - Legal assessment

A pre-launch review of the elements that carry legal risk. Source: brand/html/projectious-legal-assessment.html.

Summary

Fonts

All three families are SIL Open Font License 1.1 and served from Google Fonts. OFL permits commercial use, embedding, and redistribution; it forbids selling the fonts on their own and requires that any derivative font use a different name. Since the fonts are linked rather than bundled, no font binaries are redistributed by this repository.

Icons — Lucide

ISC License, functionally equivalent to MIT: free commercial use, modification, redistribution, sublicensing. No attribution required in product UI — only the notice retained in source. Over 1,400 icons, actively maintained, a fork of Feather with a broader community.

Photography

Both permit free commercial use without attribution for website imagery, marketing, social posts, presentations, and blog posts. The binding restriction is that you may not compile the images into a competing stock service.

Colour

Colours cannot be trademarked in the abstract — only in connection with specific goods and services in specific contexts (Tiffany blue for jewellery being the canonical example). The palette (#1d3352 midnight, #E05232 orange, #546a82 slate) uses common design colours and does not infringe any known colour trademark in the IT consulting space.

Recommended actions before launch

• Run a registered-trademark search in the operating jurisdictions.
• Keep the asset provenance inventory current as assets are added.
• Retain licence notices in source for all third-party dependencies.

7.4 - Asset provenance

The authoritative inventory is brand/PROVENANCE.md in the repository. Check it before adding an asset or shipping collateral.

Fonts

Loaded at runtime from the Google Fonts CDN — no font files are bundled.

Icons and photography

Neither is bundled in this repository. Both are cleared for future use:

Original work

All logo files, design tokens, document templates, and design-system documents are original work, © projectious.work, under the brand-asset terms in Licensing.

Review status

Last reviewed 2026-07-26: no unlicensed, sensitive, or third-party binary assets are committed to this repository. Every physically present file is original.

8 - Tokens

The token files are the machine-readable form of the foundations. They are MIT-licensed — the values are free to use, the marks are not. See Licensing.

Downloads

Source: brand/tokens/.

CSS

<link rel="stylesheet" href="variables.css">

.button--primary {
  background: var(--color-primary);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  transition: background var(--duration-standard) var(--ease-out);
}

What the tokens cover

• Colour — the seven named aliases. The full 12-step scales are documented on the Colour page; the token file exports the named entry points.
• Typography — the three font stacks.
• Spacing — the nine-step 4px scale.
• Radius — five steps.
• Elevation — four shadow levels.
• Motion — four durations, two easing curves.

Consuming them in SCSS

This site maps the tokens onto Bootstrap and Docsy variables in src/assets/scss/_variables_project.scss. That file is a worked example of wiring the brand into an existing component framework — including the full 12-step scales in both modes, which the CSS export does not carry.