Branding

devvm’s logo, icons, colors and fonts.

The logo

As text, for a terminal, a README or a code comment:

╭──────────╮
│ ❯ devvm ╭┤
╰─────────██

As SVG or PNG, with a transparent background:

Icons

The app icon at any size, and the icons the site uses for browser tabs and home screens:

The social card

The image that sites and chat apps show with a link to devvm.dev:

Colors

Click a swatch to copy its hex.

• Blackcopy #000000 --devvm-bg The background.
• Surfacecopy #0f111a --devvm-surface Code blocks, panels and callouts.
• Bordercopy #20474b --devvm-border Lines around cards and code blocks.
• Limecopy #7fff00 --devvm-accent The prompt, links, buttons and arrows.
• Soft limecopy #c3e88d --devvm-accent-soft Hovers, inline code and tips.
• Dark limecopy #408000 --devvm-accent-dark The prompt in the logo for light backgrounds.
• Bluecopy #0086b3 --devvm-blue Commands and notes.
• Redcopy #ff5370 --devvm-red Only what an attack has reached, in the home page's art.
• Textcopy #eeeeee --devvm-text Headings and body text.
• Secondary textcopy #8f93a2 --devvm-text-secondary Paragraphs on the home page and labels.
• Mutedcopy #666666 --devvm-muted Dimmed text in the art.

Fonts

All three are free under the SIL Open Font License.

Using the logo

• Write the name in lowercase, as devvm, even at the start of a sentence.
• Keep the lock with the box.
• Leave clear space around the logo, at least as wide as the lock.
• Use the version for your background, and don’t recolor, stretch or outline it.

Credits

The site’s pixel icons come from Dinkie Icons, which is MIT licensed. The site is built with Hugo and the Hextra theme.