Martlet.

Room for substantial work.

A design language for readable sequence, meaningful relationships, and continuity through the whole task. Build publishing, services, and applications with Martlet’s grammar, components, patterns, and agent tools.

Explore the language Build with React 0.3 preview · MIT

Light.

White, silver, and a clear blue.

Field notesAll changes saved

Sunday, October 18

A place for your next idea.

A few notes, a useful reference, and enough room to think.

palette.mjsJavaScript

// A shared vocabulary for two themes.
export const martlet = {
  name: 'Martlet',
  mode: 'light',
  colors: 88,
  accent: '#154C9E'
};

paint(martlet);

Martlet — zshTerminal.app

james@mac ~/martlet % ls
src/  site/  LICENSE  README.md

james@mac ~/martlet % npm test
✓ Light and dark palettes
✓ Color profiles

james@mac ~/martlet %

Download this Terminal.app profile ↓

Dark.

Midnight navy, silver, and gold.

Field notesAll changes saved

Sunday, October 18

A place for your next idea.

A few notes, a useful reference, and enough room to think.

palette.mjsJavaScript

// A shared vocabulary for two themes.
export const martlet = {
  name: 'Martlet',
  mode: 'dark',
  colors: 88,
  accent: '#FEE46E'
};

paint(martlet);

Martlet — zshTerminal.app

james@mac ~/martlet % ls
src/  site/  LICENSE  README.md

james@mac ~/martlet % npm test
✓ Light and dark palettes
✓ Color profiles

james@mac ~/martlet %

Download this Terminal.app profile ↓

Illustrative examples using the actual Martlet colors. Select a swatch to copy its hex value.

Find your colors.

Every role has a name. Every value is ready to copy.

Find a tokenShow

88 tokens · Light palette

Token	Value	Copy value
`bg`	`#FFFFFF`
`panel`	`#F1F5FB`
`panel2`	`#E2EBF7`
`text`	`#122744`
`muted`	`#455B76`
`accent`	`#154C9E`
`accent2`	`#154C9E`
`on-accent`	`#FFFFFF`
`accent-hover`	`#12438B`
`line`	`#CBCFD6`
`control-line`	`#808790`
`focus`	`#154C9E`
`selection`	`#D7E1F0`
`selection-text`	`#122744`
`green`	`#286B40`
`danger`	`#A02E42`
`warning`	`#805000`
`error-bg`	`#E9E1E9`
`error-text`	`#A02E42`
`shadow`	`0 10px 40px #00000022`
`surface-canvas`	`#FFFFFF`
`surface-subtle`	`#F8FAFD`
`surface-sunken`	`#E2EBF7`
`surface-overlay`	`#FFFFFF`
`text-strong`	`#0D2038`
`text-subtle`	`#455B76`
`text-disabled`	`#61738B`
`text-inverse`	`#FFFFFF`
`link`	`#154C9E`
`link-hover`	`#103A79`
`link-visited`	`#68409B`
`border-subtle`	`#D6DFEA`
`border-strong`	`#65758A`
`input-bg`	`#FFFFFF`
`input-text`	`#122744`
`input-placeholder`	`#61738B`
`input-border`	`#808790`
`button-secondary-bg`	`#E2EBF7`
`button-secondary-text`	`#122744`
`button-secondary-hover`	`#D6E3F4`
`disabled-bg`	`#E2E8F0`
`disabled-text`	`#61738B`
`focus-ring`	`#154C9E`
`focus-offset`	`#FFFFFF`
`hover-bg`	`#E7F0FA`
`active-bg`	`#D7E6F7`
`code-bg`	`#E2EBF7`
`code-text`	`#122744`
`quote-border`	`#154C9E`
`table-stripe`	`#F1F5FB`
`scrollbar-track`	`#F1F5FB`
`scrollbar-thumb`	`#808FA5`
`overlay-scrim`	`#122744AA`
`info`	`#154C9E`
`info-bg`	`#E2EBF7`
`info-text`	`#103A79`
`success`	`#286B40`
`success-bg`	`#E5F3E9`
`success-text`	`#205932`
`warning-bg`	`#FFF1D3`
`warning-text`	`#805000`
`danger-bg`	`#FBE5E9`
`danger-text`	`#A02E42`
`chart-1`	`#154C9E`
`chart-2`	`#286B40`
`chart-3`	`#925C00`
`chart-4`	`#A02E42`
`chart-5`	`#68409B`
`chart-6`	`#007582`
`chart-7`	`#9B4A00`
`chart-8`	`#546276`
`chart-grid`	`#CBCFD6`
`chart-axis`	`#455B76`
`syntax-keyword`	`#154C9E`
`syntax-string`	`#286B40`
`syntax-function`	`#103A79`
`syntax-type`	`#805000`
`syntax-variable`	`#122744`
`syntax-comment`	`#455B76`
`syntax-number`	`#A02E42`
`syntax-operator`	`#455B76`
`syntax-constant`	`#68409B`
`syntax-tag`	`#154C9E`
`syntax-attribute`	`#805000`
`syntax-regexp`	`#286B40`
`syntax-invalid`	`#A02E42`
`syntax-property`	`#103A79`
`syntax-decorator`	`#68409B`

CSS names use the prefix --martlet-. Shadow and translucent colors are included in the reference.

Put two colors together.

Check a foreground against a background before you use it.

ForegroundBackground

A little room to think.
A clear place to begin.

15.01:1AA and AAA for normal text

WCAG 2 contrast for the selected opaque sRGB colors. A passing pair does not establish accessibility for a whole application.

Take Martlet with you.

Pick a format. The same source colors go with it.

Browse the source ↗

Terminal.app

Native profiles for the terminal included with macOS. Background, text, cursor, selection, and all sixteen ANSI colors.

Martlet Light ↓ .terminal Martlet Dark ↓ .terminal

How to install

Download either profile.
Open Terminal and choose Terminal → Settings → Profiles.
Use the action menu beneath the profiles list to choose Import, then select the downloaded file. You can also drag the file into that list.
Select Martlet Light or Martlet Dark. Choose Default if you want it for new windows.

Apple’s profile import guide ↗

These profiles have not yet been tested in Terminal.app on a Mac.

CSS variablesScoped Light and Dark themes.css ↓JSON tokensThe complete color specification.json ↓Light CSSLight theme on its own.css ↓Dark CSSDark theme on its own.css ↓VS Code LightStarter color definition.json ↓VS Code DarkStarter color definition.json ↓Terminal Light JSONSixteen ANSI colors.json ↓Terminal Dark JSONSixteen ANSI colors.json ↓

A prompt to match.

A two-line prompt in blue or gold, with your user, host, directory, and Git state. Both variants show command failures and work with plain Zsh or Oh My Zsh. No special font required.

james@mac ~/projects [martlet +1 ~2 ?1]
>

Martlet Light ↓ .zsh-themeMartlet Dark ↓ .zsh-theme

Install the Zsh prompt

Download a variant that matches your terminal background. Move it into ~/.config/zsh/themes/:

mkdir -p ~/.config/zsh/themes
cp ~/Downloads/martlet-dark.zsh-theme ~/.config/zsh/themes/

Add this line at the end of ~/.zshrc, after any shell framework or prompt setup, then open a new shell:

source "$HOME/.config/zsh/themes/martlet-dark.zsh-theme"

For Light, replace martlet-dark with martlet-light. For Oh My Zsh, you can instead put the file in its custom themes directory and set ZSH_THEME="martlet-dark" before loading Oh My Zsh.

Git markers: +N staged, ~N unstaged, ?N untracked entries, xN conflicts. A failed command shows its exit code. Set MARTLET_GIT=0 before sourcing to omit Git inspection. Use Zsh 5.9 or newer. Truecolor terminals use the exact role colors; other terminals use ANSI palette slots, supplied by the matching Terminal.app profile. The prompt sets no terminal background; use the matching Terminal.app profile for that.

For your next web project.

Framework-independent colors, typography, spacing, shape, motion, and optional interface styles. Take the parts your project needs.

@martlet/theme · v2.2.1

Core on npm ↗Download npm archive ↓npm source ↗

Use the npm package

Install the published package from npm:

npm install @martlet/theme

import '@martlet/theme/css';
import { dark } from '@martlet/theme';
console.log(dark.tokens.accent);

Set data-martlet="light" or data-martlet="dark" on the element to theme. Read colors using var(--martlet-accent). CommonJS is supported. For highlight.js, import @martlet/theme/highlight-dark.css or its Light equivalent.

Build with Astro.

Layouts, containers, headings, cards, and buttons using the same core definitions. Start with the neutral starter or add components to your existing site.

@martlet/astro · v1.2.1

Astro on npm ↗Setup and starter guide ↗Design system specification ↗

Use the Astro package

npm install @martlet/theme @martlet/astro

---
import { Layout, Container, Card } from '@martlet/astro';
---
<Layout title="Your website">
  <Container><Card><p>Your own content.</p></Card></Container>
</Layout>

Astro 5.14+, 6, or 7. The core is a peer dependency, so install both packages. The starter is included in the published Astro package.

Vim & Neovim.

Syntax, editor surfaces, diffs, and diagnostics, with truecolor and 256-color support.

Download colorschemes ↓Vim source ↗

Install the Vim colorscheme

Extract the archive and copy the files in colors/ into ~/.vim/colors/ for Vim or ~/.config/nvim/colors/ for Neovim. Then add:

set termguicolors
set background=dark
colorscheme martlet

Set background=light for Light. Explicit names martlet-light and martlet-dark also work. The source repository supports native packages and plugin managers.

Emacs.

Light and Dark themes for font-lock, Org, diffs, completion, and the editor interface.

Download Emacs themes ↓Emacs source ↗

Install the Emacs theme

Copy the two -theme.el files into ~/.emacs.d/themes/. Add to your init file:

(add-to-list 'custom-theme-load-path
             (expand-file-name "themes/" user-emacs-directory))
(load-theme 'martlet-dark t)

Use martlet-light for Light. Disable another active theme before switching. The final t skips the source approval prompt; use it after reviewing the files. Emacs 27.1 or newer. MELPA publication is pending.

A browser to match.

Colors for tabs, toolbars, and new-tab surfaces. Firefox follows light/dark appearance; Chrome has separate variants.

Chrome Light ↓Chrome Dark ↓Firefox ↓

Chrome source ↗Firefox source ↗

Try the browser themes

These are source packages prepared for marketplace submission. Store publication and Firefox signing are pending.

For Chrome, extract one archive. Open chrome://extensions, enable Developer mode, choose Load unpacked, and select the extracted folder containing manifest.json.

For Firefox, extract the archive. Open about:debugging#/runtime/this-firefox, choose Load Temporary Add-on, and select manifest.json. It lasts until Firefox restarts. Firefox 142 or newer.

These packages contain no scripts or browsing permissions. They color browser UI; website content keeps its own styling.

ChatGPT / Codex desktop.

Copy a theme string and paste it into the desktop app’s theme import control in Settings → Appearance.

Light import string ↓Dark import string ↓

Setting	Light	Dark
Background
Foreground
Accent

Light settings ↓Dark settings ↓

Import strings use the codex-theme-v1 format from a desktop app export. They include diff and skill colors, default fonts, and opaque windows. Manual settings remain available above. Clients offering only preset accent colors cannot reproduce the full palette.

Use Martlet on a website

Load the CSS, then set data-martlet to light or dark on the element you want to theme.

<link rel="stylesheet" href="martlet.css">
<main data-martlet="dark">
  <article class="panel">Hello, Martlet.</article>
</main>

.panel {
  background: var(--martlet-panel);
  color: var(--martlet-text);
}

Light and Dark can also live in separate parts of the same page, as they do here. The VS Code files are starter color definitions; they are not packaged extensions.

Blue. Silver. Gold.

A personal beginning.

Martlet begins with the blue, silver, and gold of James P. Howard, II’s personal heraldic identity and the James Howard & Family tartan. Those are the colors of one family’s identity. The martlet gives the theme its name and its mark.

The first Light and Dark themes were built for Prism 7. This independent project extends them to interfaces, source code, and terminals. Light gives blue the leading role; Dark brings gold forward against navy. The surfaces, text colors, and supporting hues are practical additions, adjusted for the work each color has to do.

The original seven colors remain the source references shown below. The application colors can develop as Martlet is tested in more places.

A place for your next idea.

A place for your next idea.

Terminal.app

A prompt to match.

For your next web project.

Build with Astro.

Vim & Neovim.

Emacs.

A browser to match.

ChatGPT / Codex desktop.

A personal beginning.

Analytics cookies