Martlet.

Color with a story.

Blue and silver in the light. Navy and gold in the dark. A pair of color themes for interfaces, readable code, and the terminal you keep open all day.

Get Martlet Where it began v1.0.0

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 ↓

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 personal beginning.

Analytics cookies