imagnnd

Brand guide

Artwork, color, and type for imagnnd.

imagnnd wordmark with the lime symbol above the first letter

01Artwork

The wordmark is custom artwork traced from the supplied source. Use the supplied files; do not recreate it with a font. Keep the lettering, symbol, proportions, and spacing together.

Use SVG for scalable artwork and PNG where vector files are not supported. The primary PNG files have transparent backgrounds.

02Color & type

Olive

#24241F

Page backgrounds and dark artwork.

Cream

#F7F5EB

Text on dark backgrounds and light surfaces.

Lime

#D9F16B

The symbol, primary actions, and small accents.

Display typeface

Archivo Black

For page titles and short display headings. Use the font’s regular weight; keep headlines brief.

Body & interface typeface

DM Sans

For body copy, navigation, labels, and controls. Weights: regular 400, medium 500, semibold 600, and bold 700.

Neither typeface replaces the custom imagnnd wordmark. This portable guide uses system fonts so it can be opened offline; the website uses the typefaces named above.

Download JSON tokensDownload CSS tokens

03Usage

Ink horizontal lockup on cream
Ink artwork on cream or other light backgrounds.
Primary horizontal lockup on olive
Primary artwork on olive. Use cream artwork for a single-color version.

Clearspace

Leave at least one quarter of the artwork’s height clear on every side. Keep text, borders, and image edges outside that space.

Horizontal lockup surrounded by clearspace

Recommended web minimums

Symbol
24px
Horizontal lockup
120px wide
Wordmark
160px wide

Use the dedicated 16px and 32px exports for browser tabs. At small sizes, use the symbol without lettering. Test print and embroidery samples at their final physical size.

Keep the artwork intact

Scale proportionally. Do not stretch, rotate, redraw, rearrange, add outlines, or apply shadows. Choose a supplied color version with a clear background behind it.

Accessibility

Use cream text on olive and olive text on lime. Avoid cream text on lime. Keep descriptive text on controls; the symbol should not replace a control’s label.

Text contrast: cream / olive 14.3:1 · lime / olive 12.4:1. Give a linked logo the accessible name “imagnnd home”; decorative repeats can use empty alternative text.

04Digital assets

Favicons & app icons

Use the standalone symbol for browser tabs and app icons. Browser exports are available as SVG, ICO, and 16px or 32px PNG. App exports include 192px and 512px PNG, an Apple touch icon, and a 512px maskable icon.

Use the maskable export for platforms that crop app icons. Its padding keeps the symbol inside the safe area.

Use your browser’s Print command to print or save a PDF. Keep this HTML file beside the artwork files so previews and download links work offline.