Brand#
The leptoskit mark is the architecture drawn as three boxes.
The two ember boxes form an L. They are layout boxes: elements placed by the layout engine and committed as real native widgets. The mint box is the last piece of the interface, arriving over the air. It is tilted because it is still landing: code push drops the next version of your interface into a shell that is already installed.
In the wordmark, the dot on the i is that same mint piece.
Files#
Every file lives in docs/src/assets.
| File | Use it for |
|---|---|
logo-light.svg | The full logo on light backgrounds. |
logo-dark.svg | The full logo on dark backgrounds. |
mark.svg | The mark alone, on any background, including favicons down to 16px. |
icon.svg | The mark on an ink tile, for app icons, avatars, and rustdoc. |
social.png | The 1280×640 card for link previews and the GitHub social preview. |
Colours#
#ff7a45#e5304f#5ef2c2#14bf9b#16111f#faf6f0Ember boxes use a gradient from ember warm at the top to ember at the bottom. The mint piece runs from mint bright at the top left to mint at the bottom right.
Typography#
The wordmark is custom monoline lettering drawn as SVG strokes, so it needs no font. The website and docs use skribble lettering: Skribble Noto Sketch for headings and body text, and Skribble Mono Playful for code. These fonts are served locally under the SIL Open Font License. The paper-and-ink theme uses seeded sketches, while the LeptosKit mark keeps its ember and mint identity.
Using the mark#
- Keep the mint piece tilted at −12°. Straightening it removes the one detail that says "over the air".
- Leave clear space of at least the width of the mint piece around the mark.
- Don't recolour the boxes, add outlines, or set the mark on busy imagery. On a coloured background, use
icon.svg.