Interface on projectious.work Brand

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

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.

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:

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.

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.