projectious.work brand

Business card

Mon, 01 Jan 0001 00:00:00 +0000

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

Digital vCard

projectious · work

Bernhard Gerlach

Cloud · Agile · Agentic AI

info@projectious.work

projectious.work

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:

Colour

Mon, 01 Jan 0001 00:00:00 +0000

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.

Components

Mon, 01 Jan 0001 00:00:00 +0000

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.

Variants — medium (40px)

Sizes — sm 32px · md 40px · lg 48px

On a midnight surface

Variant	Fill	Border	Text	Contrast	Use
Primary	`midnight-9`	none	white	12.75:1	Default action
Accent	`accent-solid` `#cc4528`	none	white	4.72:1	The single most important action
Outline	transparent	1.5px `orange-9`	`orange-11`	5.13:1	Secondary action
Ghost	transparent	1px border	`slate-9`	—	Tertiary, toolbars
Danger	`#a8261c`	none	white	7.10:1	Destructive action

Accent buttons fill with accent-solid, not step 9

orange-9 (#E05232) is the identity accent and is unchanged as a mark, border, active state, or syntax colour. But white on it measures 3.87:1 — below the 4.5:1 floor for 13–14px labels. Solid accent controls therefore fill with --color-accent-solid (#cc4528), white at 4.72:1; hover continues to accent-dark (#b84228, 5.46:1).

Hugo

Mon, 01 Jan 0001 00:00:00 +0000

This page is the source of truth for rendering the projectious.work brand with Hugo. It answers which files supply the brand, where a theme may be changed, and how to prove the result is conformant.

Choose the Docsy or Hextra subsection after reading the shared contract. The examples use named values such as midnight-9 and accent-solid; resolve those names from the canonical token source when building a production theme.

Implementation Contract

This contract applies before choosing Docsy or Hextra. It gives a human implementer and an AI agent one unambiguous answer to the theme’s source of truth, customization boundary, and release evidence.

Licensing

Mon, 01 Jan 0001 00:00:00 +0000

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/.


Permitted	Download and view for personal reference, editorial reporting, or authorised partner use
Prohibited	Modification, derivative works, sale, or commercial use — including merchandise or software featuring these assets — without prior written consent
No impersonation	Use must not imply endorsement, affiliation, or ownership by anyone other than projectious.work

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.

Lockups

Mon, 01 Jan 0001 00:00:00 +0000

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

Two-line (default) and one-line

projectious · work Two-line · headers, slides, cards · min 120px

projectious · work One-line · navbars, footers, signatures · min 140px

Dot-replace and stacked

projectious work Dot-replace · compact horizontal · min 160px

projectious · work Stacked · app icons, avatars, slide corners · min 60px

Lockup	Composition	Use for	Minimum width
Two-line	Mark + “projectious” over “· work”	Headers, slides, cards — the default	120px
One-line	Mark + “projectious · work” inline	Navbars, footers, signatures	140px
Dot-replace	Mark substitutes the dot in “projectious.work”	Compact horizontal contexts	160px
Stacked	Mark above the wordmark, centred	App icons, avatars, slide corners	60px

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.

Status treatments

Mon, 01 Jan 0001 00:00:00 +0000

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.

Status	Use when	Supporting cue
Usable project	Documented users can complete the stated core task.	Solid dot
Working prototype	A real implementation runs, with known limits.	Half-filled dot
Applied research	Evidence or experiments are the primary output.	Diamond
Supporting asset	The repository enables another project.	Square
Idea / implementation starting	Scope exists; implementation is absent or partial.	Ring
Archived	Work is preserved but no longer maintained.	Horizontal bar

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.

Audio and video

Mon, 01 Jan 0001 00:00:00 +0000

Audio identity

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

Cue	Sound	Length
Notification	Short tonal chime, mid-register	200ms
Success	Ascending C→E, warm sine wave	—
Error	Single low A2	300ms
Podcast intro	Ambient pad, tension→warmth resolve	3s

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.

Show the real thing at real speed. Caption everything.

Dark mode

Mon, 01 Jan 0001 00:00:00 +0000

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.

The same card in both modes

Light mode

Body text is midnight-12; supporting copy is slate-11.

Deploy

Dark mode

Never pure white — midnight-12 from the dark scale.

Deploy

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.

Email signature

Mon, 01 Jan 0001 00:00:00 +0000

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

Signature — one-line lockup, four lines maximum

projectious · work

Bernhard Gerlach

Cloud · Agile · Agentic AI

projectious.work

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.

Social previews

Mon, 01 Jan 0001 00:00:00 +0000

Content model

Every 1280×640 preview contains only:

Projectious organization mark and name.
Project name.
One narrow artifact category.
One complete maturity label from the status vocabulary.
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.

Terminal

Mon, 01 Jan 0001 00:00:00 +0000

This page is the source of truth for rendering the projectious.work brand in a terminal. It answers which sixteen colours the brand uses, which program owns each part of the result, and how to prove a configuration is conformant.

The terminal is where the brand’s rule that code surfaces stay dark in both modes stops being a stylistic choice and becomes the only option: a terminal has one surface, it is dark, and everything is measured against it.

Trademark

Mon, 01 Jan 0001 00:00:00 +0000

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

Linking to the official website.
Press articles or blog posts about the project.
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.

Typography

Mon, 01 Jan 0001 00:00:00 +0000

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

Family	Weights	Role	Licence
Plus Jakarta Sans	400 · 500 · 600 · 700 · 800	Headings, display, buttons, navigation, wordmark	SIL OFL 1.1
Source Sans 3	400 · 500 · 600	Body copy, UI labels, captions	SIL OFL 1.1
IBM Plex Mono	400 · 500	Code, terminal output, data	SIL OFL 1.1

Loading them:

Usage

Mon, 01 Jan 0001 00:00:00 +0000

Clear space

Exclusion zone — 1x the icon height on every side

Nothing enters the dashed zone

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

Code

Mon, 01 Jan 0001 00:00:00 +0000

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:

Diagrams and demos

Mon, 01 Jan 0001 00:00:00 +0000

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.

Files

Mon, 01 Jan 0001 00:00:00 +0000

Formats

Format	Contents	Use for
SVG	Vector source	Primary for web and print
PNG @1x	16 / 32 / 48 / 64 / 128 / 256 / 512px	Native-resolution raster
PNG @2x	2× pixel dimensions	Retina — required for web
PNG @3x	3× pixel dimensions	Super-retina — mobile
ICO	Multi-resolution (16 + 32 + 48)	Favicon
apple-touch	180×180 PNG	iOS home screen

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

Legal assessment

Mon, 01 Jan 0001 00:00:00 +0000

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

Not legal advice

This is a design-side risk assessment, not a legal opinion, and it is not a registered-trademark search. Obtain professional advice before relying on it for a commercial launch.

Summary

#	Area	Verdict
1	Company name “projectious”	Low risk
2	Logo similarity — stencil peony bud	Low risk
3	Font licensing	Low risk
4	Icon library — Lucide	Low risk
5	Photography and imagery sources	Low risk
6	Other design elements	Low risk

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.

Photography and illustration

Mon, 01 Jan 0001 00:00:00 +0000

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.

Social and OG images

Mon, 01 Jan 0001 00:00:00 +0000

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 card — 1200x630

Bad software is a decision,
not a constraint.

projectious.work · Cloud · Agile · Agentic AI

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.

Keep one message per card. Check contrast against the actual background, not the design canvas.

Space, shape, and motion

Mon, 01 Jan 0001 00:00:00 +0000

Spacing

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

Token	Value	Typical use
`--space-1`	4px	Icon-to-label gaps
`--space-2`	8px	Tight component padding
`--space-3`	12px	Control padding
`--space-4`	16px	Default element spacing
`--space-5`	24px	Card padding, paragraph rhythm
`--space-6`	32px	Component separation
`--space-7`	48px	Sub-section separation
`--space-8`	64px	Section separation
`--space-9`	96px	Page-level bands

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

Icons

Mon, 01 Jan 0001 00:00:00 +0000

Library

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

Property	Value
Licence	ISC (functionally equivalent to MIT)
Commercial use	Permitted
Attribution	Not required in product UI; retain the notice in source
Modification	Permitted

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.

Presentations

Mon, 01 Jan 0001 00:00:00 +0000

Core slides

Six slide types cover most decks:

Slide	Purpose
Title	Deck opening — display type on midnight
Section statement	A single sentence marking a new section
Three-up	Three parallel points
Quote	A single quotation, attributed
Code showcase	Code on the always-dark surface
CTA closer	The one thing you want the audience to do

Core slide types — 16:10

Redesigning work

Cloud · Agile · Agentic AI

projectious.work

Bad software is a decision, not a constraint.

The agent-first approach

Define Build Deploy

"We run what we recommend."

// pipeline
createPipeline({
policy: "strict"
});

Let's talk

projectious.work

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”.

Asset provenance

Mon, 01 Jan 0001 00:00:00 +0000

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.

Font	Licence	Attribution	Role
Plus Jakarta Sans	SIL OFL 1.1	Not required	Headings, display
Source Sans 3	SIL OFL 1.1	Not required	Body, UI
IBM Plex Mono	SIL OFL 1.1	Not required	Code, data

Icons and photography

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

Forms

Mon, 01 Jan 0001 00:00:00 +0000

Sizing

Size	Height
sm	32px
md	40px — the default
lg	48px

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

Sizes — sm 32 · md 40 · lg 48

Small

Medium

Large

States

State	Treatment
Default	`slate-7` border
Focus	`midnight-9` border + 2px focus ring, midnight at 15% alpha, 2px offset
Error	`orange-9` border + `orange-1` background
Disabled	`slate-4` background, `slate-8` text, `cursor: not-allowed`

Every state

Default

Focus

ErrorDescribe the problem in words.

Disabled

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.

Tokens

Mon, 01 Jan 0001 00:00:00 +0000

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

File	Format	Use
`variables.css`	CSS custom properties	Any web project
`tokens.json`	JSON	Build pipelines, Style Dictionary
`tailwind.config.js`	JS	Tailwind CSS projects

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.