Skip to content
j3w1Public

About

Canonical j3w1 design system: tokens, components, accessibility rules, ports, and machine-readable exports.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Latest commit

 

History

457 Commits

Folders and files

NameName
Last commit message
Last commit date
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

j3w1 UI Theme Spec

True-black canvas. Near-black surfaces. Rose text. Red focus. Square components.

j3w1/theme defines the j3w1 look: exact tokens, semantic roles, interaction states, accessibility limits, component specifications and portability rules. People and AI agents use it to build the same theme in websites, apps, editors, terminals and native theme formats. It publishes:

Specification version 4.0.0 (release; default: approved, heritage-ansi: heritage, extended: proposed).

Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens.

Approval and consumption eligibility are separate; see the policy above and spec/decisions.md D-013.

Quick start

Pin a release tag or a full commit, never main, and read every file at that same revision. Releases are tags.

Theme an application. Download a file from the table below. Each link is pinned to this version's release tag, and the site serves the same file from its download link. Each port's README under ports/ gives scope, limits and rollback; declared status and import evidence are under Application ports.

Application File (theme 4.0.0) Also on the site Install Status
ChatGPT desktop app (Appearance) presets.json download Open ChatGPT > Settings > Appearance > Dark theme > Import and paste a preset's import string, or set the values in the preset's table by hand (see ports/chatgpt/README.md). experimental; import evidence not verified
Claude Code (custom theme) j3w1.json download Save as ~/.claude/themes/j3w1.json and set "theme": "custom:j3w1" in ~/.claude/settings.json; or run node ports/claude-code/install.mjs apply in a clone of this repository (see its README). experimental; import evidence not verified
Codex CLI (tmTheme) j3w1.tmTheme download Save as ~/.codex/themes/j3w1.tmTheme and set theme = "j3w1" under [tui] in ~/.codex/config.toml; or run node ports/codex/install.mjs apply in a clone of this repository (see its README). experimental; import evidence not verified
Ghostty theme j3w1 download Save as ~/.config/ghostty/themes/j3w1 and add theme = j3w1 to your Ghostty config. experimental; import evidence not verified
Obsidian theme manifest.json download Copy manifest.json and theme.css into /.obsidian/themes/j3w1/, choose the Dark base scheme, then select j3w1 under Settings → Appearance → Themes. experimental; import evidence not verified
Obsidian theme theme.css download Copy beside manifest.json in /.obsidian/themes/j3w1/; restart Obsidian after a manifest update. experimental; import evidence not verified
Orca (Ghostty config import) config.ghostty download Save as %APPDATA%\ghostty\config.ghostty (Windows) or ~/.config/ghostty/config.ghostty, then Orca → Settings → Terminal → Import from Ghostty → Apply Changes. experimental; import evidence not verified
Telegram Android and Desktop j3w1.attheme download File install: open in Telegram for Android (or send to Saved Messages and tap), then Apply. Cloud publication and automatic updates require the separate owner steps in the guide; the current files await a new import check. experimental; import evidence stale
Telegram Android and Desktop j3w1.tdesktop-theme download File install: open with Telegram Desktop, then Apply this theme and Keep changes. Cloud publication and automatic updates require the separate owner steps in the guide; the current files await a new import check. experimental; import evidence stale
Warp theme YAML (also Orca's Import from YAML) j3w1.yaml download Orca → Settings → Terminal Themes → Import from YAML (or save into %APPDATA%\warp\Warp\data\themes\ and use Import from Warp), then select "j3w1 theme" as the Dark Theme. Warp: save into its themes folder. experimental; import evidence not verified
Windows 11 native and Windhawk theme windows-settings.json download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme terminal-fragment.json download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme terminal-theme.json download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme fancyzones-layouts.json download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme windows-11-taskbar-styler.json download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme windows-11-start-menu-styler.json download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme windows-11-file-explorer-styler.json download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme windows-11-notification-center-styler.json download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme windows-11-settings-styler.json download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-wallpaper.bmp download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1.theme download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-arrow.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-help.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-appstarting.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-wait.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-crosshair.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-ibeam.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-nwpen.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-no.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-sizens.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-sizewe.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-sizenwse.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-sizenesw.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-sizeall.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-uparrow.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-hand.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-pin.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-person.cur download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme runtime.cjs download Use the pinned Windows lifecycle installer. experimental; import evidence not verified
Windows 11 native and Windhawk theme install-manifest.json download Use the pinned Windows lifecycle installer. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-explorer-native.wh.cpp download Use the pinned Windows lifecycle installer. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-explorer-native.json download Use the pinned Windows lifecycle installer. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-powertoys-preview.wh.cpp download Use the pinned Windows lifecycle installer. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-powertoys-preview.json download Use the pinned Windows lifecycle installer. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-calculator.wh.cpp download Use the pinned Windows lifecycle installer. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-calculator.json download Use the pinned Windows lifecycle installer. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-powertoys-markdown.wh.cpp download Use the pinned Windows lifecycle installer. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-powertoys-markdown.json download Use the pinned Windows lifecycle installer. experimental; import evidence not verified
Windows 11 native and Windhawk theme markdown-theme.css download Use the pinned Windows lifecycle installer. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-folder.ico download Run the single pinned ports/windows/install.ps1; folder defaults are included in its saved rollback. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-folder-open.ico download Run the single pinned ports/windows/install.ps1; folder defaults are included in its saved rollback. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-notepad-native.wh.cpp download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-notepad-native.json download Use the pinned ports/windows/install.ps1 lifecycle; do not overwrite whole application settings. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-notepad-chrome.wh.cpp download Use the single pinned ports/windows/install.ps1 lifecycle; chrome changes share its saved rollback. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-notepad-chrome.json download Use the single pinned ports/windows/install.ps1 lifecycle; chrome changes share its saved rollback. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-paint-chrome.wh.cpp download Use the single pinned ports/windows/install.ps1 lifecycle; chrome changes share its saved rollback. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-paint-chrome.json download Use the single pinned ports/windows/install.ps1 lifecycle; chrome changes share its saved rollback. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-terminal-chrome.wh.cpp download Use the single pinned ports/windows/install.ps1 lifecycle; chrome changes share its saved rollback. experimental; import evidence not verified
Windows 11 native and Windhawk theme j3w1-terminal-chrome.json download Use the single pinned ports/windows/install.ps1 lifecycle; chrome changes share its saved rollback. experimental; import evidence not verified

Build a web app. Use the official @j3w1/ui package: all 67 inventory entries as native HTML, typed Custom Elements, per-component imports and complete copy distributions. docs/ui-consumption.md covers the package, copy and native mapping routes. For the official implementations, read packages/ui/dist/index.json, then the contracts/<id>.json and examples/<id>.json you need; the installed j3w1-ui kit command prepares bounded framework, package, copy or mapping kits. npm publication is still an owner action; until then the portal offers an installable tarball with integrity metadata. No purchased template source or assets are included, and j3w1/j3w1.github.io stays a separate downstream app.

Use the tokens. exports/tokens.css exposes every role as a CSS custom property and exports/tokens.resolved.json holds the resolved values of every profile. Consume roles, never primitives.

Point an agent at it. Follow agents/consume.md:

  1. Read theme.json.
  2. Read exports/theme.compact.md.
  3. Read the exports/components/<id>.json files you need.
  4. Record theme.lock.json and report deviations.

exports/llms.txt is a discovery index for tools that look for one.

The identity in seven values

Role Value Status Use
color.surface.canvas #000000 approved; use Page and terminal background.
color.surface.default #100c0c approved; use Panels and cards.
color.surface.raised #160b0b approved; use Sticky headers, menus, popovers; D-027 recessed it so an open list reads as depth rather than a lighter panel.
color.text.default #e99499 observed; use Interface and body text.
color.text.bright #ffa2a7 observed; use Brighter rose interface labels and explicit semantic emphasis. Bold itself inherits color; content headings use text.heading (D-033).
color.text.prose #e99499 approved; use Long-form reading and body text; rose, never an on-fill or heading shortcut (D-033).
color.text.muted #bd787d observed; use Secondary text; the darkest colour permitted for chrome text.
color.text.subtle #ad7175 approved; use Metadata, comments, line numbers.
color.border.control #a3676b proposed; use-and-report (D-007) Form-control boundary (4.45:1, meets the 3:1 non-text minimum).
color.border.default #531310 observed; use Decorative border (1.39:1; never the only edge of a control).
color.interaction.focus.ring #e53935 observed; use 1px dashed focus ring on controls and rows.
color.interaction.selection.bg #531310 approved; use Selected row, tab, workspace; D-027 recessed the fill, leaving the 2px indicator and the check to carry selection.
color.action.primary.bg #7d1310 approved; use Primary button fill; D-026 darkened it off color12, which stays fixed as heritage ANSI 12.
color.status.danger.text #f73f35 observed; use Danger text (5.40:1).
color.status.warning.text #c9973f approved; use Warning text (7.54:1).
color.status.success.text #86a46f approved; use Success text (7.13:1).
color.status.info.text #7e9ebb approved; use Info text (7.08:1).

Three bounded hues (amber, green, blue) exist for status, diagnostics and diffs (decision D-001), and for opt-in syntax themes through code.hued.* (D-030). They are forbidden in surfaces, chrome, buttons, links and selections. The reference syntax highlighting stays monochrome in the default profile. Where the palette came from, and the three profiles (default, heritage-ansi, extended), are in spec/identity.md.

Read further

Local commands

Run these from a checkout with full Git history (CI uses fetch-depth: 0); each tool page above states its limits.

  • npm run task:kit -- --components <ids> --task "<task>" --integration-id <id> --integration-version <n> --out <new-dir> writes a task kit; --ref takes a full commit or release tag, --mode minimal omits only the optional recipes. --out must be a new directory under an existing, unredirected parent; keep that parent stable while writing (the writer is not an OS sandbox against concurrent changes). The legacy consumption:kit refuses an existing directory, so pick a new --out for each rerun.
  • npm run release:compare -- --from <tag|commit> --to <tag|commit> --out <new-dir> compares two pinned revisions; --profile picks one common profile and --migrations <file> names explicit role renames. Comparable revisions are the reviewed pins in site/releases.json.
  • npm run parity:private -- --config <file outside the repository> runs the private parity harness (protocol); with no target it prints a not-run record.
  • Browser tests use port 4173; set PW_PORT to a free port (for example PW_PORT=4174 npm run test:browser) when another checkout is testing.

Repository map

Path Owns
theme.json Versions, profiles and their statuses, entry points, export map, site URL and base path, licence map
tokens/ Exact values (primitives), semantic roles (semantic), non-colour foundations, and profile overrides — DTCG 2025.10 format, supported scope declared in the manifest
spec/ Identity, foundations, accessibility, portability, the decision log, families.json, contrast.json, and one Markdown file plus one demo fragment per component
agents/consume.md How to apply the theme elsewhere
schemas/ zod schema factories shared by the scripts and the site; schemas/json/ is generated
scripts/ Validators and generators (npm run validate, npm run generate, npm run check); scripts/lib/ is hashed into the package identities, scripts/tooling/ holds local-tooling helpers that are not
exports/ Generated, committed: resolved tokens, semantic usage index, CSS custom properties, contrast report, coverage ledger, per-component JSON and briefs, compact and full Markdown, llms.txt, digests
packages/ui/ The @j3w1/ui package; packages/ui/dist/ is generated
site/ The Astro source of the design-system portal, complete reference and token tools, built to dist/ and deployed to /theme/ by CI
references/ Pinned provenance, catalogued historical implementations, excerpts, and any reference screenshots with their provenance
ports/ One folder per app, each with a manifest, mapping, generated theme file and evidence; Orca, Claude Code and Codex also hold their installer and one guide (ports/README.md says which one you need)
templates/ Starting points for a port, a component and the fresh-agent consumption task
tests/ Source tests, dist/ tests, browser tests, consumption fixtures

Application ports

The capability explorer and exports/port-capabilities.json keep mapped, inherited, unsupported, out-of-scope and not-implemented roles apart from import verification (D-018). Changing targets, mappings, capabilities or artifact bytes makes import evidence stale. ports/README.md describes the capability metadata and the evidence fingerprint.

Port Format Declared status Import evidence Theme Tested on Supported / inherited / unsupported
ChatGPT desktop app (Appearance) chatgpt-appearance experimental not verified 4.0.0 — (windows, macos) 1 / 0 / 9
Claude Code (custom theme) claude-theme-json experimental not verified 4.0.0 — (linux, macos, windows) 1 / 1 / 2
Codex CLI (tmTheme) codex-tmtheme experimental not verified 4.0.0 — (linux, macos) 1 / 1 / 3
Ghostty theme ghostty-config experimental not verified 4.0.0 — (macos, linux) 3 / 1 / 1
Obsidian theme obsidian-theme experimental not verified 4.0.0 — (any) 3 / 1 / 2
Orca (Ghostty config import) ghostty-config experimental not verified 4.0.0 — (windows, macos, linux) 4 / 1 / 1
Telegram Android and Desktop telegram-theme experimental stale 4.0.0 Telegram Android 12.10.6, Telegram Desktop 7.2.9 (android, windows, linux, macos) 4 / 3 / 1
Warp theme YAML (also Orca's Import from YAML) warp-yaml experimental not verified 4.0.0 — (windows, macos, linux) 1 / 1 / 3
Windows 11 native and Windhawk theme windows-theme experimental not verified 4.0.0 — (windows) 4 / 1 / 1

Component coverage

Specified means the component's specification validates. Demonstrated means its demo renders every declared variant on the site. Test implemented means a browser test exists for it. Real outcomes are published separately in the linked verification report, with exact scope, configuration and digests (spec/accessibility.md, Verification evidence). The ledger is generated from the sources.

Component Family Priority Specified Demonstrated Test implemented
admin-form composed R1 yes yes yes
alert feedback R1 yes yes —
avatar display R2 yes yes —
badge display R1 yes yes —
breadcrumbs navigation R1 yes yes —
button-group actions R2 yes yes —
button actions R1 yes yes yes
card display R1 yes yes —
chart display R2 yes yes —
checkbox forms-basic R1 yes yes yes
chip display R1 yes yes —
code-editor developer R1 yes yes yes
combobox forms-advanced R1 yes yes —
command-palette navigation R2 yes yes —
compact-dashboard composed R2 yes yes —
data-table display R1 yes yes —
date-picker forms-advanced R1 yes yes —
description-list display R2 yes yes —
diagnostics developer R1 yes yes —
dialog feedback R1 yes yes yes
diff-view developer R1 yes yes —
disclosure navigation R2 yes yes —
drawer feedback R1 yes yes —
editor-search developer R2 yes yes —
empty-state feedback R1 yes yes —
error-state feedback R2 yes yes —
field forms-basic R1 yes yes —
fieldset forms-basic R1 yes yes —
file-browser composed R2 yes yes —
file-input forms-advanced R1 yes yes —
filterable-table composed R1 yes yes —
form-builder forms-advanced L yes yes yes
i3-window-frame composed R1 yes yes —
icon-button actions R1 yes yes —
kbd display R2 yes yes —
link actions R1 yes yes yes
list display R1 yes yes —
loading-indicator feedback R1 yes yes —
menu navigation R1 yes yes yes
multiselect forms-advanced R2 yes yes —
number-field forms-basic R1 yes yes —
pagination navigation R1 yes yes —
popover feedback R2 yes yes —
progress feedback R1 yes yes —
radio-group forms-basic R1 yes yes yes
range forms-basic R2 yes yes —
repeater forms-advanced R2 yes yes —
search-field forms-basic R1 yes yes —
segmented-control actions R2 yes yes —
select forms-basic R1 yes yes yes
settings-panel composed R1 yes yes —
sidebar-nav navigation R1 yes yes —
skeleton feedback R2 yes yes —
skip-link navigation R1 yes yes —
switch forms-basic R1 yes yes —
table display R1 yes yes yes
tabs navigation R1 yes yes yes
terminal developer R1 yes yes —
text-field forms-basic R1 yes yes yes
textarea forms-basic R1 yes yes —
time-picker forms-advanced R1 yes yes —
timeline display R2 yes yes —
toast feedback R1 yes yes —
toolbar navigation R1 yes yes —
tooltip feedback R1 yes yes —
tree navigation R2 yes yes —
wizard forms-advanced R1 yes yes —

Versioning

Semantic versioning over the contract, not the code.

  • Major: removing or renaming a role, changing an approved value or its meaning, removing a component or state, an incompatible export or lock schema.
  • Minor: new roles, components, states, variants or profiles; promoting proposed to approved.
  • Patch: prose, generation, test and site fixes, evidence updates.

Every global appearance change gets a changelog entry and a downstream impact note. Releases are tags; consumers pin them.

Licence

MIT for code, tokens, schemas, scripts and generated JSON/CSS; CC BY 4.0 for specification prose and specimens; reference screenshots all rights reserved (D-004). See LICENSE.md. No fonts are distributed; the recommended family is named in theme.json.

About

Canonical j3w1 design system: tokens, components, accessibility rules, ports, and machine-readable exports.

Resources

Stars

0 stars

Watchers

0 watching

Forks

Releases

Packages

Contributors

Languages