Appendix E: Syntax color standard

This is the official color palette for Nyx syntax highlighting. All Nyx tools, editors, documentation, and websites must use these colors for consistency.

Color Table

Element	CSS class	Light theme	Dark theme	What it highlights
Keywords	`.kw`	`#7c3aed`	`#a78bfa`	`fn`, `let`, `var`, `if`, `else`, `while`, `return`, `import`, `struct`, `enum`, `match`, `for`, `in`, `break`, `continue`, `pub`, `true`, `false`, `trait`, `impl`
Functions	`.fn`	`#2563eb`	`#60a5fa`	`main`, `print`, `push`, `length`, `http_serve_mt`, `tcp_write`, `channel_new`
Strings	`.str`	`#059669`	`#34d399`	`"hello"`, `"std/http"`, `'c'`
Numbers	`.num`	`#d97706`	`#fbbf24`	`42`, `0`, `3.14`, `0xFF`, `128`
Types	`.ty`	`#db2777`	`#f472b6`	`String`, `int`, `float`, `bool`, `Array`, `Map`, `Fn`, user-defined structs
Comments	`.cm`	`#9ca3af`	`#5a5a78`	`// this is a comment`
Operators	`.op`	`#6b7280`	`#9494b0`	`->`, `=`, `+`, `-`, `*`, `/`, `==`, `!=`, `<`, `>`, `:`, `>=`, `<=`

Design rationale

Violet for keywords: Nyx's identity color. Keywords are the structural backbone of code — they should stand out immediately.
Blue for functions: The second most important element. Function calls are action — blue conveys activity.
Green for strings: Strings are data/content. Green is calm and distinct from the structural violet.
Amber for numbers: Warm color for numeric literals. Instantly distinguishable from strings and keywords.
Pink for types: Types define the shape of data. Pink is semantically "metadata about data."
Gray for comments and operators: Low visual priority. Comments are notes, not executable. Operators are structural punctuation.

CSS implementation

Light theme

.kw  { color: #7c3aed; }  /* violet */
.fn  { color: #2563eb; }  /* blue */
.str { color: #059669; }  /* green */
.num { color: #d97706; }  /* amber */
.ty  { color: #db2777; }  /* pink */
.cm  { color: #9ca3af; }  /* gray */
.op  { color: #6b7280; }  /* gray medium */

Dark theme

.kw  { color: #a78bfa; }  /* violet light */
.fn  { color: #60a5fa; }  /* blue light */
.str { color: #34d399; }  /* green light */
.num { color: #fbbf24; }  /* amber light */
.ty  { color: #f472b6; }  /* pink light */
.cm  { color: #5a5a78; }  /* gray dim */
.op  { color: #9494b0; }  /* gray light */

Code block backgrounds

Context	Light theme	Dark theme
Code block	`#f8f8fa`	`#12121f`
Page bg	`#ffffff`	`#06060c`

HTML example

<pre>
<span class="kw">fn</span> <span class="fn">main</span>() {
    <span class="kw">let</span> name: <span class="ty">String</span> = <span class="str">"Nyx"</span>
    <span class="kw">let</span> version: <span class="ty">int</span> = <span class="num">12</span>
    <span class="cm">// print the name</span>
    <span class="fn">print</span>(name)
}
</pre>

VS Code theme mapping

For the Nyx VS Code extension (nyx-vscode):

{
    "tokenColors": [
        { "scope": "keyword", "settings": { "foreground": "#7c3aed" } },
        { "scope": "entity.name.function", "settings": { "foreground": "#2563eb" } },
        { "scope": "string", "settings": { "foreground": "#059669" } },
        { "scope": "constant.numeric", "settings": { "foreground": "#d97706" } },
        { "scope": "entity.name.type", "settings": { "foreground": "#db2777" } },
        { "scope": "comment", "settings": { "foreground": "#9ca3af" } },
        { "scope": "keyword.operator", "settings": { "foreground": "#6b7280" } }
    ]
}

Font

The standard monospace font for Nyx code is JetBrains Mono. Fallback: monospace.

--font-mono: 'JetBrains Mono', monospace;

← Previous: Appendix D: Glossary