v3.0.2 is out — restored design-system guidance and corrected navigation. Read the notes
projectious·work
Ctrl K

Getting started

Adopt the projectious.work identity, tokens, and interface rules without guessing.

The design system is a working contract for projectious.work. It combines the brand foundations, writing voice, implementation tokens, interface patterns, accessibility settings, logo rules, and reusable artifacts in one place.

Start with the non-negotiables#

  • Write the name as projectious.work, always lowercase.
  • Join the practices as Cloud · Agile · Agentic AI, never with an ampersand.
  • Use Plus Jakarta Sans for attention, Source Sans 3 for reading, and IBM Plex Mono for code and system output.
  • Keep the light application background at #f8f9fb; white is a raised surface.
  • Reserve the orange accent for identity and decisions. It is not body text.
  • Use semantic foregrounds on their matching tints and a second channel for every status.
  • Use no emoji, decorative gradients, rainbow categorisation, or ornamental noise on a brand surface.
  • Treat code and tokens as MIT-licensed; treat the name and marks as reserved.

Choose your route#

Write or design

Start with identity, voice, colour, typography, logo, and accessibility.

Build a surface

Use the tokens, components, responsive rules, and implementation patterns.

Use an asset

Download generated tokens, marks, templates, and machine-readable manifests.

Adopt the system in order#

### Read the brand snapshot Understand the mission, convictions, audience, voice, and the three practice areas before choosing visual elements. ### Select semantic tokens Build with roles such as background, surface, foreground, border, status, and code panel. Raw scale steps exist to implement those roles—not to bypass them. ### Compose a documented pattern Start from the page shell, marketing surface, agent console, document, slide, or terminal pattern closest to the job. Change content before inventing chrome. ### Exercise every appearance and setting Review light, navy dark, and deep dark. Then enable strong focus, link underlines, 200% text, loose text spacing, reduced motion, reduced transparency, and high contrast. ### Verify and record provenance Run the repository checks, inspect the rendered artifact, and record every third-party asset and licence before publishing.
The current default focus ring is not conforming

New surfaces must set data-focus="strong". The faint compatibility default is approximately 1.2:1 and does not meet WCAG 2.1 SC 1.4.11.

Continue with the documentation overview or go directly to the developer guide.