imagnnd

Brand guide

Artwork, color, and type for imagnnd.

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.

Symbol

The standalone mark for app icons, avatars, and compact spaces.

Primary SVG Transparent PNG

Ink SVG Cream SVG

Wordmark

The custom lettering with the symbol above the first letter.

Primary SVG Transparent PNG

Ink SVG Cream SVG

Horizontal lockup

The symbol beside the lettering. Use for the website header and narrow placements.

Primary SVG Transparent PNG

Ink SVG Cream SVG

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 · Archivo Black

Archivo Black

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

Body & interface · DM Sans

DM Sans

For body copy, navigation, labels, and controls. Use regular, medium, semibold, and bold weights.

Regular 400Medium 500Semibold 600Bold 700

Neither typeface replaces the custom imagnnd wordmark.

Download JSON tokens Download CSS tokens

03Usage

Ink artwork on cream or other light backgrounds.

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.

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.