Use the icon
with intent.
Guidance for spacing, contrast, scale, placement, and choosing between the Cortlet icon and full logo.
01 // Clear space
Give it room.
Define X as the width or height of the Cortlet icon. Maintain minimum clear space of 0.5X on every side.
Minimum
0.5X of clear space on every side of the icon.
More is fine
The minimum is not a target. Give the icon additional breathing room when the layout allows it.
Keep unrelated elements out
Text, logos, controls, borders, and graphics should not enter the minimum clear-space area.
02 // Contrast
Use the right
variant.
Dark on light
Use the official dark icon on light or pale backgrounds.
Light on dark
Use the official light icon on dark or near-black backgrounds.
Dark on dark
Do not use a low-contrast variant that makes the icon difficult to recognize.
Light on light
Do not use the light icon on pale backgrounds.
Match the asset
to the scale.
Use the source size closest to the final rendered size. Avoid scaling small source files upward when a larger official file exists.
Tiny UI
Favicons and compact controls.
Small UI
Navigation, lists, and compact cards.
General use
Avatars, product cards, and documentation.
Large use
High-density output, presentations, and large digital placement.
Keep it
secondary.
When the Cortlet icon appears inside another product, website, or project, it should identify Cortlet without competing with the primary identity.
ACME Console
Uses Cortlet infrastructureClear supporting placement
The host product remains visually dominant while the Cortlet icon is used as a secondary technical or attribution mark.
Icon treated as primary branding
Do not make the Cortlet icon appear to own, operate, or replace another product's identity.
Use the icon
when context exists.
Compact contexts
Name-first contexts
06 // Do & don't
Keep the mark intact.
Use official assets
Use the files distributed by Cortlet rather than rebuilding the icon yourself.
Preserve proportions
Scale the icon uniformly and maintain its original orientation.
Choose for contrast
Use the official light or dark variant that gives the mark sufficient contrast.
Don't recolor
Do not create unofficial colors, gradients, or alternate treatments.
Don't distort
Do not stretch, skew, rotate, crop, or otherwise alter the icon geometry.
Don't decorate
Do not add outlines, shadows, glow, bevels, textures, or other visual effects.
See it used
Rules are better
in context.
Explore practical Cortlet icon examples or open the complete fictional website implementation.