{ "contract": "aesthetary.record/1.0", "record_spec": "1.1.0", "semantics": { "vocabulary": "aesthetary.public-evidence/1.0", "definitions": "vocabulary.json" }, "slug": "developer-dark", "name": "Developer Dark", "identity": { "definition": { "state": "resolved", "text": "A contemporary register derived from software development environments, recognizable through the combination of dark surfaces with technical content, developer-oriented conventions and an emphasis on precision, information and operation." }, "scope": { "state": "resolved", "text": "The dark appearances of software-development tools (code editors, developer platforms and developer-tool design systems) and of products for technical audiences that adopt their conventions. In the tools themselves dark is one user-selectable appearance beside light and high-contrast themes, laid over a technical interface that separates workbench colours from syntax colours. The name 'Developer Dark' and the treatment of this as one register are Aesthetary's; no opened source names it.", "ruling": "D0-1" }, "aliases": [], "layer_verdict": { "state": "none" } }, "native_medium": { "state": "resolved", "value": [ "software" ], "evidence": { "quote": "technical software", "field": "native_context" }, "ruling": "freeze ruling 1 (2026-09-27)" }, "research": { "line": "partly_sourced", "text": "Partly sourced", "sentence": "19 sources attached." }, "areas": [ { "area": "layout", "state": "resolved", "canon": "specified", "importance": "core", "posture_basis": "synthesis", "label": { "text": "Core · Specified" } }, { "area": "typography", "state": "resolved", "canon": "specified", "importance": "core", "posture_basis": "synthesis", "label": { "text": "Core · Specified" } }, { "area": "color", "state": "resolved", "canon": "specified", "importance": "core", "posture_basis": "synthesis", "label": { "text": "Core · Specified" } }, { "area": "imagery", "state": "resolved", "canon": "specified", "importance": "supporting", "posture_basis": "synthesis", "label": { "text": "Supporting · Specified" } }, { "area": "surface", "state": "resolved", "canon": "specified", "importance": "core", "posture_basis": "synthesis", "label": { "text": "Core · Specified" } }, { "area": "interface", "state": "resolved", "canon": "specified", "importance": "core", "posture_basis": "synthesis", "label": { "text": "Core · Specified" } }, { "area": "motion", "state": "resolved", "canon": "specified", "importance": "supporting", "posture_basis": "synthesis", "label": { "text": "Supporting · Specified" } }, { "area": "motif", "state": "resolved", "canon": "open_question", "importance": "unknown", "posture_basis": "synthesis", "label": { "text": "Open question" } }, { "area": "technique", "state": "resolved", "canon": "specified", "importance": "unknown", "posture_basis": "synthesis", "label": { "text": "Specified" } }, { "area": "form", "state": "resolved", "canon": "not_applicable", "importance": "unknown", "posture_basis": "synthesis", "label": { "text": "Does not apply" } }, { "area": "hierarchy", "state": "resolved", "canon": "specified", "importance": "unknown", "posture_basis": null, "label": { "text": "Specified" } }, { "area": "density", "state": "resolved", "canon": "specified", "importance": "unknown", "posture_basis": null, "label": { "text": "Specified" } } ], "claims": [ { "id": "vscode-theme-layers", "text": "VS Code themes workbench colors, syntax colors and semantic token colors separately.", "role": "rule", "area": "technique", "basis": "documentary", "support": { "state": "cited_unverified", "for": [ "src-vscode" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "vscode-theme-roles", "text": "VS Code's theming exposes colors for editors, activity bars, sidebars, status bars, borders, focus states and other interface roles.", "role": "rule", "area": null, "basis": "documentary", "support": { "state": "cited_unverified", "for": [ "src-vscode" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "vscode-high-contrast", "text": "VS Code includes a dedicated High Contrast theme.", "role": "rule", "area": null, "basis": "documentary", "support": { "state": "cited_unverified", "for": [ "src-vscode" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "dark-mode-is-appearance", "text": "Dark Mode is an appearance setting: a systemwide dark palette for low-light viewing.", "role": "rule", "area": null, "basis": "documentary", "support": { "state": "cited_unverified", "for": [ "src-apple" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "dark-not-inversion", "text": "Dark palettes are not simple inversions of light palettes; base and elevated dark backgrounds communicate depth.", "role": "rule", "area": "color", "basis": "documentary", "support": { "state": "cited_unverified", "for": [ "src-apple" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "dark-contrast-testing", "text": "Test dark interfaces with increased contrast and reduced transparency; minimum contrast considerations apply.", "role": "rule", "area": null, "basis": "documentary", "support": { "state": "cited_unverified", "for": [ "src-apple" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "geist-system", "text": "Geist combines Sans and Mono, code and code-block components, developer-tool icons, high-contrast color and grid foundations.", "role": "rule", "area": "typography", "basis": "documentary", "support": { "state": "cited_unverified", "for": [ "src-geist" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "definition", "text": "A contemporary register derived from software development environments, recognizable through the combination of dark surfaces with technical content, developer-oriented conventions and an emphasis on precision, information and operation.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "darkness-insufficient", "text": "Darkness alone does not make something Developer Dark.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "boundary-test", "text": "Remove the dark background. Does the remaining interface still communicate a developer or technical environment? If not, it was probably just Dark Mode.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "signal-hierarchy", "text": "Signals ranked necessary / strong / common / optional / unreliable (see signals[]).", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "origin-terminals", "text": "Early computer terminals established a precedent for luminous information on dark displays.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "origin-editor-themes", "text": "Later code editors and IDEs made configurable, syntax-aware color themes part of everyday developer work.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "no-origin-point", "text": "No single founder, manifesto or starting date; an accumulation of conventions.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "register-emergence", "text": "The register appears when conventions of technical working software become an intentional identity for products, documentation and marketing aimed at technical audiences.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "stereotypes-coexist", "text": "Neon, glow, glitch, scan lines, Matrix code and all-monospace can coexist with Developer Dark but none defines it.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "boundary-terminal", "text": "Terminal centers the command-line metaphor; Developer Dark is broader and does not pretend everything is a CLI.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "boundary-saas", "text": "Modern SaaS is broadly legible commercial software presentation; Developer Dark imports more from technical environments. They can overlap.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "boundary-cyberpunk", "text": "Cyberpunk uses technology as atmosphere and spectacle; Developer Dark uses technology as working material.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "boundary-dark-mode", "text": "Dark Mode is a palette/appearance state; Developer Dark is a broader register.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "counterexample-dark", "text": "Dark luxury-fashion homepages, streaming services such as Netflix, black photography portfolios, nightclub sites and dark automotive configurators use near-black without adopting the register.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "counterexample-light-docs", "text": "Light developer documentation with dark code specimens is developer-oriented but not fully Developer Dark; technical content is at least as important to the identity as darkness.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "not-list", "text": "Not black + neon; not Cyberpunk without the dystopia; not a terminal stretched into a website; not monospace everywhere; not Matrix code; not dark-mode SaaS; not an established historical movement; not one company's design system.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "color-relational", "text": "No canonical palette. Relational rule: black → charcoal → deep neutral fields; light neutral primary text; reduced-contrast secondary text; subtle tonal borders; sparse purposeful accent; semantic color for status, syntax, state or data.", "role": "rule", "area": "color", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "type-division", "text": "Sans commonly handles navigation, headlines, body, controls and hierarchy; mono handles code, commands, values, paths, shortcuts, logs and metadata. Monospace everywhere reads as a terminal costume.", "role": "rule", "area": "typography", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "composition", "text": "Tolerates more visible information than many consumer registers, but density is not required; structured technical information is the principle; whitespace still matters.", "role": "rule", "area": "layout", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "geometry", "text": "Rectangles, straight alignment, fine separators, modest radii, repeated rows and grids are strong. No exact radius, sharp corners, pill buttons or rounded cards are canonical.", "role": "rule", "area": "layout", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "imagery", "text": "Strongest native imagery is often the product itself. Illustration or photography does not disqualify, but lifestyle photography as primary identity moves away from the register. Fake code is dangerous.", "role": "rule", "area": "imagery", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "interface-language", "text": "No canonical button shape or navigation pattern; inputs must stay identifiable; do not automatically turn every section into a floating rounded card.", "role": "rule", "area": "interface", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "motion-character", "text": "Motion communicates state, focus, selection, progress, opening/closing, data change and navigation. No universal timing. Expressive motion is not prohibited.", "role": "rule", "area": "motion", "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "dark-accessibility-risks", "text": "Text can become too dim, boundaries disappear, semantic colors converge, focus vanishes, very bright elements become uncomfortable.", "role": "rule", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": null }, { "id": "name-status", "text": "Name status: Aesthetary taxonomy term; not an established historical movement name", "role": "history", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "derives_from": [], "ruling": "D0-3 C6 meta" }, { "id": "signal:low-luminance-field", "text": "A low-luminance visual field. Black, charcoal or deep neutral surfaces establish the field.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "necessary", "set_by": "synthesis", "label": { "text": "Necessary · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:dev-connection", "text": "A meaningful connection to technical / developer environments.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "necessary", "set_by": "synthesis", "label": { "text": "Necessary · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:functional-hierarchy", "text": "A clear functional hierarchy capable of supporting technical information.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "necessary", "set_by": "synthesis", "label": { "text": "Necessary · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:layered-surfaces", "text": "Layered near-black or charcoal surfaces. Small shifts in luminance, borders or contrast rather than dramatic shadows.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "strong", "set_by": "synthesis", "label": { "text": "Strong · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:technical-specimens", "text": "Code, command-line, data or technical-interface specimens. Communicate what the product actually does; not decorative filler.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "strong", "set_by": "synthesis", "label": { "text": "Strong · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:mono-with-sans", "text": "Monospace used alongside a neutral UI/display face.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "strong", "set_by": "synthesis", "label": { "text": "Strong · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:fine-borders", "text": "Fine borders and separators.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "strong", "set_by": "synthesis", "label": { "text": "Strong · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:semantic-color", "text": "Color used semantically or sparingly.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "strong", "set_by": "synthesis", "label": { "text": "Strong · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:compact-metadata", "text": "Compact technical metadata.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "strong", "set_by": "synthesis", "label": { "text": "Strong · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:command-palettes", "text": "Command palettes.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "common", "set_by": "synthesis", "label": { "text": "Common · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:kbd-labels", "text": "Keyboard-shortcut labels.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "common", "set_by": "synthesis", "label": { "text": "Common · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:syntax-highlighting", "text": "Syntax highlighting.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "common", "set_by": "synthesis", "label": { "text": "Common · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:status-dots", "text": "Status dots.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "common", "set_by": "synthesis", "label": { "text": "Common · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:grid-lines", "text": "Grid lines.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "common", "set_by": "synthesis", "label": { "text": "Common · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:terminal-prompts", "text": "Terminal prompts.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "common", "set_by": "synthesis", "label": { "text": "Common · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:file-trees", "text": "File-tree structures.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "common", "set_by": "synthesis", "label": { "text": "Common · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:tiny-labels", "text": "Tiny uppercase or monospace labels.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "common", "set_by": "synthesis", "label": { "text": "Common · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:dev-screenshots", "text": "Developer-oriented product screenshots.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "common", "set_by": "synthesis", "label": { "text": "Common · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:gradients", "text": "Gradients.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "optional", "set_by": "synthesis", "label": { "text": "Optional · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:glow", "text": "Glow.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "optional", "set_by": "synthesis", "label": { "text": "Optional · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:translucency", "text": "Translucency.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "optional", "set_by": "synthesis", "label": { "text": "Optional · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:pure-black", "text": "Pure black.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "optional", "set_by": "synthesis", "label": { "text": "Optional · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:bright-accents", "text": "Bright brand accent colors.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "optional", "set_by": "synthesis", "label": { "text": "Optional · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:animated-terminal", "text": "Animated terminal text.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "optional", "set_by": "synthesis", "label": { "text": "Optional · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:neon-green", "text": "Neon green.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "unreliable", "set_by": "synthesis", "label": { "text": "Unreliable · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:matrix-code", "text": "Matrix-like falling code.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "unreliable", "set_by": "synthesis", "label": { "text": "Unreliable · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:cyberpunk-glow", "text": "Cyberpunk glow.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "unreliable", "set_by": "synthesis", "label": { "text": "Unreliable · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:glitch", "text": "Glitch effects.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "unreliable", "set_by": "synthesis", "label": { "text": "Unreliable · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:crt-scanlines", "text": "CRT scan lines.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "unreliable", "set_by": "synthesis", "label": { "text": "Unreliable · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:all-mono", "text": "Everything being monospace.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "unreliable", "set_by": "synthesis", "label": { "text": "Unreliable · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "signal:black-bg-alone", "text": "A black background by itself.", "role": "diagnostic", "area": null, "basis": "synthesis", "support": { "state": "none", "for": [], "against": [], "contested": false }, "label": { "kind": "reading", "text": "Our reading" }, "strength": [ { "signal": "unreliable", "set_by": "synthesis", "label": { "text": "Unreliable · our ranking" } } ], "derives_from": [], "ruling": null }, { "id": "kcc:surface-1", "text": "Dark surfaces separate by luminance: layered surfaces get brighter as they rise, and background levels recede by being dimmer.", "role": "rule", "area": "surface", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-S5", "kcc-developer-dark-S11" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "Apple HIG and Atlassian (whose products include developer tools); not developer-specific" }, "derives_from": [], "ruling": null }, { "id": "kcc:surface-2", "text": "Shadows read weakly on dark grounds, so separation cannot rely on shadow alone.", "role": "rule", "area": "surface", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-S7", "kcc-developer-dark-S11" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "Geist (Vercel) and Atlassian" }, "derives_from": [], "ruling": null }, { "id": "kcc:surface-3", "text": "In Vercel's Geist system, a surface is a preset of radii, fills, strokes and shadows, and there are two page backgrounds, the second used sparingly.", "role": "rule", "area": "surface", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-S7", "kcc-developer-dark-S8" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "Geist only; one maker's system" }, "derives_from": [], "ruling": null }, { "id": "kcc:hierarchy-1", "text": "Text importance is ranked by stepped label colours (primary to quaternary) that adapt per appearance.", "role": "rule", "area": "hierarchy", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-S5" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "Apple HIG, general" }, "derives_from": [], "ruling": null }, { "id": "kcc:hierarchy-2", "text": "Colour should not be the primary means of emphasis.", "role": "negative", "area": "hierarchy", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-S10" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "GitHub Primer" }, "derives_from": [], "ruling": null }, { "id": "kcc:hierarchy-3", "text": "Elevation rank follows the element's place in the layered hierarchy, using the lowest elevation that still reads.", "role": "rule", "area": "hierarchy", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-S7" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "Geist" }, "derives_from": [], "ruling": null }, { "id": "kcc:density-1", "text": "GitHub's product UI aims to be fast and compact.", "role": "rule", "area": "density", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-S9" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "GitHub product UI (Primer); one maker" }, "derives_from": [], "ruling": null }, { "id": "kcc:w2-form-1", "text": "Apple's HIG documents simulated depth in dark mode: dimmer base colours make background interfaces appear to recede and brighter elevated colours make foreground interfaces appear to advance. Aesthetary reads this as elevation (Interface), not three-dimensional form.", "role": "negative", "area": "form", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-W2S6" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "Apple HIG; the tool docs (S1, S3) describe the workbench only as coloured regions" }, "derives_from": [], "ruling": null }, { "id": "kcc:w2-form-2", "text": "VS Code's theme guide sorts interface colours into categories, one being workbench colours used in views and editors, from the Activity Bar to the Status Bar.", "role": "context", "area": "form", "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-W2S1" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "scope": { "practice": "VS Code" }, "derives_from": [], "ruling": null }, { "id": "kcc:scope", "text": "The dark appearances of software-development tools (code editors, developer platforms and developer-tool design systems) and of products for technical audiences that adopt their conventions. In the tools themselves dark is one user-selectable appearance beside light and high-contrast themes, laid over a technical interface that separates workbench colours from syntax colours. The name 'Developer Dark' and the treatment of this as one register are Aesthetary's; no opened source names it.", "role": "boundary", "area": null, "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-S4", "kcc-developer-dark-S2", "kcc-developer-dark-S1", "kcc-developer-dark-S6" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "kcc:boundary-1", "text": "vs Dark Mode (system appearance): Dark Mode is a systemwide appearance setting; the developer tools also offer dark as one option. What the sources add in developer tools is the technical layer (syntax colours, developer-tool icons), not darkness.", "role": "boundary", "area": null, "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-S5", "kcc-developer-dark-S4", "kcc-developer-dark-S1", "kcc-developer-dark-S6" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "kcc:answers-source-status", "text": "VS Code's docs confirm Dark Modern is the default preferred dark theme; the syntax-highlight guide names keywords, strings, comments and variable names (not numbers or symbols); GitHub's theme page quoted here mentions colourblind themes, while the 'not simple inversions' point is quoted from Apple's HIG, not GitHub.", "role": "context", "area": null, "basis": "documentary", "support": { "state": "cited", "for": [ "kcc-developer-dark-W2S2", "kcc-developer-dark-W2S4", "kcc-developer-dark-W2S5", "kcc-developer-dark-W2S6" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "kcc:reworded-vscode-dark-modern", "text": "VS Code's preferred dark colour theme defaults to Dark Modern.", "role": "rule", "area": null, "basis": "documentary", "support": { "state": "cited", "for": [ "src-vscode" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "kcc:reworded-vscode-token-type", "text": "VS Code separates workbench colours from syntax colouring, which colours keywords differently from strings, comments and variable names.", "role": "rule", "area": "typography", "basis": "documentary", "support": { "state": "cited", "for": [ "src-vscode" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null }, { "id": "kcc:reworded-github-theme-range", "text": "GitHub's theme settings include a high-contrast theme, with greater contrast between foreground and background, for users with low vision.", "role": "rule", "area": null, "basis": "documentary", "support": { "state": "cited", "for": [ "src-github" ], "against": [], "contested": false }, "label": { "kind": "seen", "text": "Seen in the work" }, "derives_from": [], "ruling": null } ], "web_translations": [ { "id": "a11y-implementation-rules", "text": "Never encode status by color alone; preserve visible focus; test muted text; let code and data colors survive color-vision deficiencies.", "target": null, "area": null, "label": { "kind": "translation", "text": "Web translation" }, "derives_from": [ "dark-accessibility-risks", "dark-contrast-testing" ] }, { "id": "components-translation", "text": "Button, input, tabs, table row, command/search states, code block, status badge, navigation and panel as drawn on this page.", "target": null, "area": "interface", "label": { "kind": "translation", "text": "Web translation" }, "derives_from": [ "area:interface", "interface-language" ] }, { "id": "motion-treatment", "text": "Per-behaviour treatments and durations used on this page.", "target": null, "area": "motion", "label": { "kind": "translation", "text": "Web translation" }, "derives_from": [ "area:motion", "motion-character" ] }, { "id": "web-translation-brief", "text": "Near-black neutral field, subtle surface hierarchy, restrained sans/mono pairing, actual technical material, compact metadata, hairlines, semantic accents, prominent product UI, command/search, technical diagrams, responsive density, clear focus, behaviour-tied motion. Not every implementation needs every item.", "target": null, "area": null, "label": { "kind": "translation", "text": "Web translation" }, "derives_from": [ "signal:low-luminance-field", "signal:layered-surfaces", "signal:mono-with-sans", "signal:technical-specimens", "signal:compact-metadata", "signal:fine-borders", "signal:semantic-color", "signal:command-palettes", "motion-character" ] }, { "id": "page-type-pair", "text": "Instrument Sans + JetBrains Mono: Aesthetary interpretation for this page only; not a pair for dark aesthetics in general.", "target": null, "area": "typography", "label": { "kind": "translation", "text": "Web translation" }, "derives_from": [ "area:typography", "type-division" ] }, { "id": "page-accent", "text": "Warm-neutral accent #D8C7A8: example value and Aesthetary interpretation only; not Developer Dark color guidance.", "target": null, "area": "color", "label": { "kind": "translation", "text": "Web translation" }, "derives_from": [ "area:color", "color-relational" ] }, { "id": "page-values", "text": "All hex values on the page are page tokens, not canonical Developer Dark values.", "target": null, "area": "color", "label": { "kind": "translation", "text": "Web translation" }, "derives_from": [ "area:color", "color-relational" ] } ], "standard_practice": [], "sources": [ { "id": "src-vscode", "kind": "source", "title": "Visual Studio Code — theming documentation", "url": null, "status": "verified", "retrieval": "retrieved" }, { "id": "src-github", "kind": "source", "title": "GitHub Docs — themes", "url": null, "status": "verified", "retrieval": "retrieved" }, { "id": "src-apple", "kind": "source", "title": "Apple Developer — Dark Mode (Human Interface Guidelines)", "url": null, "status": "verified", "retrieval": "retrieved" }, { "id": "src-geist", "kind": "source", "title": "Vercel — Geist design system", "url": null, "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-S1", "kind": "source", "title": "Color Theme (extension guide)", "url": "https://code.visualstudio.com/api/extension-guides/color-theme", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-S10", "kind": "source", "title": "Typography — Primer", "url": "https://primer.style/foundations/typography", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-S11", "kind": "source", "title": "Overview — Elevation — Atlassian Design", "url": "https://atlassian.design/foundations/elevation", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-S2", "kind": "source", "title": "Themes", "url": "https://code.visualstudio.com/docs/configure/themes", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-S4", "kind": "source", "title": "Managing your theme settings", "url": "https://docs.github.com/en/get-started/accessibility/managing-your-theme-settings", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-S5", "kind": "source", "title": "Dark Mode — Human Interface Guidelines (data endpoint of developer.apple.com/design/human-interface-guidelines/dark-mode)", "url": "https://developer.apple.com/tutorials/data/design/human-interface-guidelines/dark-mode.json", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-S6", "kind": "source", "title": "Geist Design System — Introduction", "url": "https://vercel.com/geist/introduction", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-S7", "kind": "source", "title": "Materials — Geist Design System", "url": "https://vercel.com/geist/materials", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-S8", "kind": "source", "title": "Colors — Geist Design System", "url": "https://vercel.com/geist/colors", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-S9", "kind": "source", "title": "Getting started — Primer Product UI", "url": "https://primer.style/product/getting-started/", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-W2S1", "kind": "source", "title": "Color Theme (extension guide)", "url": "https://code.visualstudio.com/api/extension-guides/color-theme", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-W2S2", "kind": "source", "title": "Themes", "url": "https://code.visualstudio.com/docs/configure/themes", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-W2S4", "kind": "source", "title": "Syntax Highlight Guide", "url": "https://code.visualstudio.com/api/language-extensions/syntax-highlight-guide", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-W2S5", "kind": "source", "title": "Managing your theme settings", "url": "https://docs.github.com/en/get-started/accessibility/managing-your-theme-settings", "status": "verified", "retrieval": "retrieved" }, { "id": "kcc-developer-dark-W2S6", "kind": "source", "title": "Dark Mode — Human Interface Guidelines (data endpoint of developer.apple.com/design/human-interface-guidelines/dark-mode)", "url": "https://developer.apple.com/tutorials/data/design/human-interface-guidelines/dark-mode.json", "status": "verified", "retrieval": "retrieved" } ], "relations": [ { "slug": "terminal", "kind": "confused_with", "status": "proposed" }, { "slug": "monospace-minimal", "kind": "confused_with", "status": "proposed" } ], "open": [ { "kind": "missing_research", "question": "No artefacts recorded: the rules have not been checked against real developer tools, documentation or marketing." }, { "kind": "missing_research", "question": "No images recorded: every specimen on the page is constructed." }, { "kind": "missing_research", "question": "Only classification confidence is recorded; per-claim confidence is not." }, { "kind": "verification", "question": "[filed on visual-directions developer-dark] 1 evidence reference(s) for bases recorded in the editorial-provenance ledger, not linked to Source rows (C13)" }, { "kind": "open_question", "question": "Is there a repeating decorative mark system?" }, { "kind": "missing_research", "question": "Is 'Developer Dark' a recognised register outside Aesthetary?" }, { "kind": "missing_research", "question": "Density on developer-facing marketing sites" } ], "aesthetary_build": { "note": "Values Aesthetary built with. Not claims about the Aesthetic.", "measured": { "note": "Read from the page's own stylesheet at build time. Values Aesthetary built with, not claims about the Aesthetic.", "slug": "developer-dark", "stylesheet": "developer-dark.css", "bytes": 95119, "colours": [ "#0B0C0E", "#111316", "#171A1E", "#1E2227", "#252A30", "#353B43", "#E6E9ED", "#B4BBC4", "#8B939E", "#3FB97A", "#E0A43A", "#F07070", "#7AA7FF", "#8AB4FF", "#C9A2FF", "#9FD39A", "#F2B872", "#82B8FF", "#79818C", "#7FD6C8", "#D8C7A8", "#17140F", "#59616B", "#30353C", "#15171A", "#D5D9DE", "#6B727C", "#2A3038", "#0E0F11", "#16181B", "#272B31", "#A3AAB3", "#F7F7F5", "#FFFFFF", "#DADCD8", "#141518", "#5C6168", "#18794E", "#C23B3B", "#9A6200", "#C8663F", "#F1C27D", "#2C3A5A", "#050506", "#F5F5F5", "#39FF6A", "#1A1A1A", "#1FAF4A", "#121418", "#3A414A", "#C9CDD2", "#F4F5F7", "#DADDE2", "#1B1D22", "#9AA0A8", "#4F5BD5", "#0A0512", "#FF2E97", "#00F0FF", "#18181B", "#2A2A2E", "#EDEDED", "#77777D", "#1C1916", "#0C0A09", "#CDBFAE", "#EFE6DA", "#1B1613", "#2A221D", "#3A2F28", "#A89C90", "#B8A794", "#8C7B69", "#FAFAF8", "#DEDFDB", "#17181B", "#E4E5E1", "#C9CED6", "#1A1D21", "#FF4FD8", "#22E3FF", "#FFE14D", "#7CFF4F", "#A36BFF", "#090A0C", "#1C2230", "#1E1B2E", "#3B2F66", "#0F1012", "#22262B", "#14161A" ], "radii": [ "3px", "4px", "5px", "6px", "8px", "10px", "14px", "15px", "16px", "17px", "22px", "50%" ], "fontSizes": [ "7.5px", "9px", "9.5px", "10px", "10.5px", "11px", "11.5px", "12px", "12.5px", "13px", "13.5px", "14px", "14.5px", "15px", "15.5px", "16px", "17px", "18px", "19px", "20px", "22px", "24px", "26px", "28px", "30px", "32px", "34px", "40px", "44px", "46px", "52px", "54px", "56px", "72px", "88px", "132px" ], "faces": [ "Instrument Sans", "JetBrains Mono", "Cormorant Garamond", "Georgia" ], "tokens": [ { "name": "--c0", "value": "#0B0C0E" }, { "name": "--c1", "value": "#111316" }, { "name": "--c2", "value": "#171A1E" }, { "name": "--c3", "value": "#1E2227" }, { "name": "--b1", "value": "#252A30" }, { "name": "--b2", "value": "#353B43" }, { "name": "--tx", "value": "#E6E9ED" }, { "name": "--t2", "value": "#B4BBC4" }, { "name": "--t3", "value": "#8B939E" }, { "name": "--ok", "value": "#3FB97A" }, { "name": "--warn", "value": "#E0A43A" }, { "name": "--err", "value": "#F07070" }, { "name": "--info", "value": "#7AA7FF" }, { "name": "--focus", "value": "#8AB4FF" }, { "name": "--kw", "value": "#C9A2FF" }, { "name": "--str", "value": "#9FD39A" }, { "name": "--num", "value": "#F2B872" }, { "name": "--fn", "value": "#82B8FF" }, { "name": "--com", "value": "#79818C" }, { "name": "--ty", "value": "#7FD6C8" }, { "name": "--accent", "value": "#D8C7A8" }, { "name": "--on-accent", "value": "#17140F" }, { "name": "--sans", "value": "\"Instrument Sans\", system-ui, -apple-system, \"Segoe UI\", sans-serif" }, { "name": "--mono", "value": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace" }, { "name": "--pad", "value": "48px" }, { "name": "--bg", "value": "#0E0F11" }, { "name": "--bg2", "value": "#16181B" }, { "name": "--ln", "value": "#272B31" }, { "name": "--sx", "value": "#E6E9ED" }, { "name": "--s2", "value": "#A3AAB3" }, { "name": "--okc", "value": "#3FB97A" }, { "name": "--erc", "value": "#F07070" }, { "name": "--wc", "value": "#E0A43A" }, { "name": "--acc", "value": "#E6E9ED" }, { "name": "--accdim", "value": "#B4BBC4" }, { "name": "--p", "value": "hover { background: #FFFFFF" }, { "name": "--s", "value": "hover { border-color: var(--t3)" }, { "name": "--g", "value": "hover { color: var(--tx) !important" }, { "name": "--pin", "value": "has(.dd-matrix) { display: none" } ], "animates": true, "absent": [] }, "design_grammar": { "note": "Aesthetary's translation of this record into web primitives. Every value carries a basis: \"record\" is a rule the record holds (cites names it), \"translation\" is our choice derived from the cited rules (because says how), \"not_recorded\" means the record is silent (guidance says what to do). A \"record\" value restates a claim the record holds; its standing is that claim's own kind in the record (a requirement, period practice, modern practice, or our interpretation), which the cited rule states. \"record\" does not by itself make a value a property of the language.", "slug": "developer-dark", "version": "2026-09-29", "summary": "A starting grammar for a website in Developer Dark: a near-black neutral field with surfaces that brighten as they rise, sans for people and mono for machines, hairlines instead of shadows, and colour kept for status, syntax, state and data.", "color": { "roles": [ { "role": "canvas", "value": "#0B0C0E", "use": "The field. Near-black, not pure black.", "basis": "translation", "cites": [ "claim:color-relational", "claim:page-values" ] }, { "role": "surface", "value": "#111316", "use": "Panes and sidebars: one step up.", "basis": "translation", "cites": [ "claim:kcc:surface-1", "claim:page-values" ] }, { "role": "elevated", "value": "#171A1E", "use": "Overlays, palettes, controls: brighter again.", "basis": "translation", "cites": [ "claim:kcc:surface-1", "claim:page-values" ] }, { "role": "border", "value": "#252A30", "use": "Hairlines between regions.", "basis": "translation", "cites": [ "claim:color-relational", "claim:kcc:surface-2" ] }, { "role": "border-strong", "value": "#353B43", "use": "Field boundaries and hover.", "basis": "translation", "cites": [ "claim:color-relational" ] }, { "role": "text", "value": "#E6E9ED", "contrast": "16.1:1", "use": "Primary text. Light neutral, not pure white.", "basis": "translation", "cites": [ "claim:color-relational", "claim:kcc:hierarchy-1" ] }, { "role": "text-secondary", "value": "#B4BBC4", "contrast": "10.1:1", "use": "Body copy, secondary labels.", "basis": "translation", "cites": [ "claim:kcc:hierarchy-1" ] }, { "role": "text-muted", "value": "#8B939E", "contrast": "6.3:1", "use": "Timestamps, hints, metadata. Tested, not assumed.", "basis": "translation", "cites": [ "claim:kcc:hierarchy-1", "claim:a11y-implementation-rules" ] }, { "role": "accent", "value": "#D8C7A8", "use": "Brand meaning, once or twice per view. An example value only.", "basis": "translation", "cites": [ "claim:page-accent" ] }, { "role": "text-on-accent", "value": "#17140F", "use": "Text on the accent.", "basis": "translation", "cites": [ "claim:page-accent" ] }, { "role": "focus", "value": "#8AB4FF", "use": "The focus ring, kept apart from the accent.", "basis": "translation", "cites": [ "claim:a11y-implementation-rules" ] }, { "role": "success", "value": "#3FB97A", "use": "Status, always with an icon and a word.", "basis": "translation", "cites": [ "claim:color-relational", "claim:a11y-implementation-rules" ] }, { "role": "warning", "value": "#E0A43A", "use": "Status, always with an icon and a word.", "basis": "translation", "cites": [ "claim:color-relational", "claim:a11y-implementation-rules" ] }, { "role": "error", "value": "#F07070", "use": "Status, always with an icon and a word.", "basis": "translation", "cites": [ "claim:color-relational", "claim:a11y-implementation-rules" ] } ], "alternates": [], "rules": [ { "rule": "Build the palette as relationships: black to charcoal to deep neutral fields, light neutral text, reduced-contrast secondary text, subtle tonal borders, a sparse accent, semantic colour for status, syntax, state or data.", "basis": "record", "cites": [ "claim:color-relational" ] }, { "rule": "Separate layered surfaces by luminance: a surface is brighter the higher it sits, and the background recedes by being dimmer.", "basis": "record", "cites": [ "claim:kcc:surface-1" ] }, { "rule": "Do not make colour the primary means of emphasis.", "basis": "record", "cites": [ "claim:kcc:hierarchy-2" ] }, { "rule": "Pair every status colour with an icon and a word.", "basis": "translation", "cites": [ "claim:a11y-implementation-rules", "claim:dark-accessibility-risks" ], "because": "Status is never encoded by colour alone, and semantic colours converge on dark grounds." }, { "rule": "The sources specify no canonical palette, and no hue is required.", "basis": "not_recorded", "cites": [ "claim:color-relational" ], "guidance": "The values here are one page's tokens. Keep the relationships; choose your own values, and do not reach for neon because the page is dark.", "silence": "source" } ] }, "typography": { "family": { "stack": "\"Instrument Sans\", system-ui, -apple-system, \"Segoe UI\", sans-serif", "class": "a neutral sans for people, paired with a legible mono for machine output (the pair is this page's choice)" }, "tokens": { "font-mono": "\"JetBrains Mono\", ui-monospace, \"SF Mono\", Menlo, monospace" }, "roles": [ { "role": "heading", "size": "1.75rem", "weight": 600, "lineHeight": "1.2", "case": null, "tracking": null, "measure": null, "use": "Section and page headings, in the sans." }, { "role": "body", "size": "1rem", "weight": 400, "lineHeight": "1.5", "case": null, "tracking": null, "measure": "70ch", "use": "Reading text and controls, in the sans." }, { "role": "mono", "size": "0.8125rem", "weight": 400, "lineHeight": "1.6", "case": null, "tracking": null, "measure": null, "use": "Code, commands, values, paths, shortcuts, logs, metadata." }, { "role": "label", "size": "0.6875rem", "weight": 400, "lineHeight": "1.45", "case": null, "tracking": null, "measure": null, "use": "Small metadata labels, in mono and muted text." } ], "rules": [ { "rule": "Sans handles navigation, headlines, body, controls and hierarchy; mono handles code, commands, values, paths, shortcuts, logs and metadata. Monospace everywhere reads as a terminal costume.", "basis": "record", "cites": [ "claim:type-division" ] }, { "rule": "Rank text importance with stepped label colours (primary, secondary, tertiary) rather than more sizes.", "basis": "record", "cites": [ "claim:kcc:hierarchy-1" ] }, { "rule": "Colour syntax separately from the interface: keywords apart from strings, comments and variable names.", "basis": "record", "cites": [ "claim:kcc:reworded-vscode-token-type" ] }, { "rule": "Use Instrument Sans with JetBrains Mono, as this page does.", "basis": "translation", "cites": [ "claim:page-type-pair", "claim:type-division" ], "because": "The pair is Aesthetary's interpretation for one page; any neutral sans and legible mono keep the division." }, { "rule": "The sources specify no canonical typeface.", "basis": "not_recorded", "cites": [], "guidance": "Choose a neutral sans and a legible mono and say that the pair is yours.", "silence": "source" } ] }, "gridLayout": { "summary": "Structured technical information in repeated rows and grids, with straight alignment and fine separators. Density is tolerated, not required.", "tokens": { "row-gap": "0.75rem", "pane-gap": "1px", "page-pad": "3rem" }, "rules": [ { "rule": "Structure technical information; tolerate more visible information than consumer registers, but do not require density, and keep whitespace.", "basis": "record", "cites": [ "claim:composition" ] }, { "rule": "Build with rectangles, straight alignment, repeated rows and grids.", "basis": "record", "cites": [ "claim:geometry" ] }, { "rule": "Divide panes with 1px hairlines rather than gutters of empty space inside a tool surface.", "basis": "translation", "cites": [ "claim:geometry", "claim:kcc:surface-2" ], "because": "Fine separators are strong, and borders carry separation where shadows read weakly." }, { "rule": "The sources specify no grid, column count or density level.", "basis": "not_recorded", "cites": [ "claim:kcc:density-1" ], "guidance": "GitHub's product UI aims to be fast and compact, but that is one maker. Set density for the content, and say so.", "silence": "source" } ] }, "shapeGeometry": { "tokens": { "radius-control": "5px", "radius-region": "0", "hairline": "1px" }, "rules": [ { "rule": "No exact radius, sharp corners, pill buttons or rounded cards are canonical; modest radii are strong.", "basis": "record", "cites": [ "claim:geometry" ] }, { "rule": "Round controls 3–6px and leave regions square.", "basis": "translation", "cites": [ "claim:geometry", "claim:page-values" ], "because": "A modest radius on what you press and none on what you read in keeps controls identifiable; the values are this page's." }, { "rule": "Do not rely on shadow alone to separate layers.", "basis": "record", "cites": [ "claim:kcc:surface-2" ] } ] }, "imagery": { "rules": [ { "rule": "Show the product itself; illustration or photography does not disqualify, but lifestyle photography as the main identity moves away from the register.", "basis": "record", "cites": [ "claim:imagery" ] }, { "rule": "Use real technical material (real commands, real output), never decorative fake code.", "basis": "translation", "cites": [ "claim:imagery" ], "because": "The record calls fake code dangerous." }, { "rule": "The sources specify no image treatment or frame style.", "basis": "not_recorded", "cites": [], "guidance": "Show product UI at its real size and contrast; add no glow or tilt.", "silence": "source" } ] }, "components": { "button": { "name": "Button", "becomes": "A rectangle on the surface ladder: the primary action one step brighter than its pane, secondary actions a bordered neutral, a shortcut in mono beside the label.", "anatomy": [ "1px tonal border", "label in the sans", "optional shortcut in mono (⌘↵)", "no shadow" ], "tokens": { "radius": "5px", "height": "2.25rem", "border": "1px solid border", "background": "elevated", "primary": "accent on text-on-accent" }, "states": { "default": "Elevated fill, 1px border, primary text.", "hover": "One surface step brighter. Nothing lifts.", "focus": "2px focus ring, offset 2px, outside the border.", "active": "Back one surface step.", "disabled": "Muted text on the surface, border kept so the control stays identifiable." }, "accessibility": [ "Label text 13:1 or better on the elevated fill.", "The focus ring is a separate colour from the accent, so focus never disappears into brand.", "At least 36px tall; 44px on touch." ], "values": [ { "rule": "Give the button no canonical shape: choose one and keep it.", "basis": "record", "cites": [ "claim:interface-language" ] }, { "rule": "Draw it as a rectangle with a modest radius and a fine tonal border.", "basis": "translation", "cites": [ "claim:geometry", "claim:page-values" ], "because": "Rectangles, fine separators and modest radii are strong; no exact radius is canonical, so 5px is this page's choice." }, { "rule": "Show hover by a step up the surface ladder, not a shadow.", "basis": "translation", "cites": [ "claim:kcc:surface-1", "claim:kcc:surface-2" ], "because": "Layered surfaces separate by luminance, and shadows read weakly on dark grounds." }, { "rule": "Set a keyboard shortcut beside the label in mono.", "basis": "translation", "cites": [ "claim:type-division" ], "because": "Mono handles shortcuts; sans handles controls." } ] }, "card": { "name": "Card", "becomes": "A pane, not a floating card: a region one surface step above the canvas, divided by hairlines, with its metadata in mono.", "anatomy": [ "surface fill", "1px border", "title in the sans", "metadata row in mono (hash, branch, age)", "no shadow, square region corners" ], "tokens": { "radius": "0", "border": "1px solid border", "background": "surface", "padding": "1rem" }, "states": { "default": "Surface fill, 1px border.", "hover": "Border steps to border-strong.", "focus": "2px focus ring around the pane." }, "accessibility": [ "Borders carry the separation, so the pane still reads at increased contrast.", "Metadata in muted text measures 5.6:1 or better on the surface." ], "values": [ { "rule": "Do not turn every section into a floating rounded card.", "basis": "record", "cites": [ "claim:interface-language" ] }, { "rule": "Use the lowest elevation that still reads.", "basis": "record", "cites": [ "claim:kcc:hierarchy-3" ] }, { "rule": "Draw panes as regions: square corners, a hairline border, one surface step up.", "basis": "translation", "cites": [ "claim:geometry", "claim:kcc:surface-1" ], "because": "Rectangles, fine separators and repeated rows are strong, and surfaces separate by luminance." } ] }, "input": { "name": "Input", "becomes": "A field that stays a field: canvas-dark well, 1px border, label above in the sans, value in mono when it is a machine value.", "anatomy": [ "label above", "canvas fill (one step below its pane)", "1px border-strong", "value in mono for tokens, paths and IDs", "error as text below" ], "tokens": { "radius": "4px", "height": "2.25rem", "border": "1px solid border-strong", "background": "canvas" }, "states": { "default": "Canvas well, border-strong.", "focus": "Border in the focus colour plus a 2px ring.", "error": "Error colour border, an icon, and a message that begins \"Error:\".", "disabled": "Surface fill, muted text, border kept." }, "accessibility": [ "The field boundary is 3:1 or better against its pane.", "The label is real text, never placeholder.", "Error is a word and an icon as well as a colour." ], "values": [ { "rule": "Keep inputs identifiable as inputs.", "basis": "record", "cites": [ "claim:interface-language" ] }, { "rule": "Sink the field one step below its pane and give it a stronger border.", "basis": "translation", "cites": [ "claim:kcc:surface-1", "claim:color-relational" ], "because": "Surface order is luminance order, so a well reads as a place to type rather than a panel." }, { "rule": "Set machine values (tokens, paths, IDs) in mono inside the field.", "basis": "translation", "cites": [ "claim:type-division" ], "because": "Mono handles values, paths and metadata." } ] }, "navigation": { "name": "Navigation", "becomes": "A command-first bar: a few sans links, the current one in primary text, a search/command control with its shortcut shown in keycaps.", "anatomy": [ "product name", "section links in the sans", "current item in primary text with an underline rule", "command control with ⌘K keycaps" ], "tokens": { "height": "3rem", "border": "1px solid border", "background": "surface" }, "states": { "default": "Links in secondary text.", "hover": "Primary text.", "focus": "2px focus ring.", "current": "Primary text and a 2px rule under it; aria-current=\"page\"." }, "accessibility": [ "The current item is marked by weight of text and a rule, not colour alone.", "The command control is a real button with a text label, shortcut as a hint." ], "values": [ { "rule": "Treat the navigation pattern as open: the sources specify no canonical pattern.", "basis": "record", "cites": [ "claim:interface-language" ] }, { "rule": "Offer command/search as a first-class control.", "basis": "translation", "cites": [ "claim:web-translation-brief" ], "because": "The record's web brief lists command/search among what makes the register feel native." }, { "rule": "Mark the current item with text weight and a rule, not colour.", "basis": "translation", "cites": [ "claim:kcc:hierarchy-2" ], "because": "Colour should not be the primary means of emphasis." } ] } }, "motion": { "spec": { "durations": { "state": "120ms", "panel": "180ms" }, "easing": { "state": "ease-out", "panel": "cubic-bezier(0.2, 0, 0, 1)" }, "transforms": "Opacity and small translate for opening and closing panels; colour and border changes for state.", "entrance": "None for content. Panels and palettes open where they are summoned.", "hover": "A surface or border step within 120ms.", "reducedMotion": "Every change is instant." }, "rules": [ { "rule": "Let motion communicate state, focus, selection, progress, opening and closing, data change and navigation. Expressive motion is not prohibited.", "basis": "record", "cites": [ "claim:motion-character" ] }, { "rule": "Treat timing as open: the sources set no universal timing.", "basis": "record", "cites": [ "claim:motion-character" ] }, { "rule": "Use short durations tied to a behaviour (120ms for state, 180ms for a panel).", "basis": "translation", "cites": [ "claim:motion-treatment", "claim:motion-character" ], "because": "Motion tied to system behaviour, with this page's own values." } ] }, "dimensions": [ { "key": "syntax", "label": "Workbench and syntax", "summary": "Two colour systems that never mix: the neutral workbench the interface lives in, and syntax colours that only appear on code.", "tokens": { "syntax-keyword": "#C9A2FF", "syntax-string": "#9FD39A", "syntax-function": "#82B8FF", "syntax-comment": "#79818C" }, "values": [ { "rule": "Theme workbench colours, syntax colours and semantic token colours separately.", "basis": "record", "cites": [ "claim:vscode-theme-layers" ] }, { "rule": "Colour keywords differently from strings, comments and variable names.", "basis": "record", "cites": [ "claim:kcc:reworded-vscode-token-type" ] }, { "rule": "Let syntax tokens differ in lightness as well as hue, and keep them off the interface chrome.", "basis": "translation", "cites": [ "claim:a11y-implementation-rules", "claim:vscode-theme-layers" ], "because": "Code and data colours must survive colour-vision differences, and the workbench stays neutral." } ] }, { "key": "appearance", "label": "One appearance of several", "summary": "In the tools, dark is one appearance a user selects beside light and high-contrast themes. Darkness alone does not make the register.", "values": [ { "rule": "Treat dark as one selectable appearance beside light and high-contrast themes.", "basis": "record", "cites": [ "claim:kcc:scope" ] }, { "rule": "Darkness alone does not make something Developer Dark.", "basis": "record", "cites": [ "claim:darkness-insufficient" ] }, { "rule": "Ship a high-contrast option and test with increased contrast.", "basis": "translation", "cites": [ "claim:vscode-high-contrast", "claim:dark-contrast-testing" ], "because": "The tools include dedicated high-contrast themes, and dark interfaces are tested with increased contrast." } ] } ], "notRecorded": [ { "category": "color", "what": "A canonical palette or hue", "why": "The record gives relationships, not values. Every hex here is a page token." }, { "category": "typography", "what": "A canonical typeface or pair", "why": "The record divides sans and mono by job; the faces are this page's choice." }, { "category": "shapeGeometry", "what": "An exact radius", "why": "Modest radii are strong; no value is canonical." }, { "category": "gridLayout", "what": "A grid or a required density", "why": "Density is tolerated, not required; the one density source is a single maker." }, { "category": "motion", "what": "Universal timing", "why": "The record says no universal timing; the durations here are this page's." }, { "category": "motif", "what": "A repeating decorative mark system", "why": "An open question on the record. Nothing is drawn in its place." } ], "silence": { "color": "source", "typography": "source", "gridLayout": "source", "shapeGeometry": "source", "imagery": "source", "components": "source", "motion": "source" }, "uiNote": "The record sets interface conventions for Developer Dark. These four components are contemporary builds on them, not historical artefacts." } } }