Loading page…
Brand kit
The mi mark, the palette, and the rules for using them.
Everything needed to put Malleable AI in a deck, a document, a partner site or a print run. Logos are filled paths — no live text, no strokes, nothing to outline before sending.
Colour.
Three base colours anchor the system. Formal marks use these colours plus white; the website adds tested UI tints for readable text, controls, panels and focus states. Textured illustrations use these material colours with light and shade.
Terracotta
Formal mark and primary button fill.
Charcoal
Wordmark, rule, strapline, body type.
Natural
Light background and dark-mode primary text.
Contrast
CombinationRatioUse
Charcoal on natural11.86 : 1Any size
Charcoal on white15.31 : 1Any size
Natural on charcoal11.86 : 1Any size
Terracotta on white5.39 : 1Body text and up
Terracotta on natural4.17 : 1Large text and graphics only — not body copy
Terracotta on charcoal2.84 : 1Fails the 3:1 graphics floor. Use the white mark.
For formal marks on charcoal, use malleable-mi-mark-white.svg.
Website UI roles
Small accent text uses #963A32 on Natural (5.52:1) and white on Charcoal (15.31:1). White text on the exact Terracotta button is 5.39:1; hover uses #92362D (7.53:1). Display accents use core Terracotta; formal marks retain their supplied colours.
Core Terracotta · #B64539
One Terracotta for display emphasis, including “enterprise.”, primary buttons and decorative details. There is no separate lighter terracotta accent. Section dots, checkmarks, quotations, supporting arrows and hover borders use core Terracotta. Contact icons, sector arrows and team initials use white on Terracotta tiles. In dark mode, small labels and links, the hero eyebrow, header wordmark, menu/theme icons and focus indicators stay white.
Terracotta on Charcoal measures 2.84:1, below the 3:1 large-text threshold. Its use in dark display headings is a visual-review exception requested by Brian. Functional text and meaningful icons use the readable roles below; white on Charcoal is 15.31:1.
Light theme
Body and muted text stay readable on backgrounds and panels.
Small accent text · #963A32
- background
- #EAE1D9
- text
- #22252E
- panel
- #F3EDE8
- muted
- #5D5A60
- border
- #B2A7A3
- control-border
- #7B6C70
- accent-text
- #963A32
- accent-hover
- #92362D
- button
- #B64539
- button-hover
- #92362D
- on-button
- #FFFFFF
- focus
- #963A32
- display-accent
- #B64539
- header-ink
- #22252E
- accent
- #B64539
Dark theme
Body and muted text stay readable on backgrounds and panels.
Small accent text · #FFFFFF
- background
- #22252E
- text
- #EAE1D9
- panel
- #2D3039
- muted
- #BEB7B4
- border
- #5D5962
- control-border
- #999098
- accent-text
- #FFFFFF
- accent-hover
- #FFFFFF
- button
- #B64539
- button-hover
- #92362D
- on-button
- #FFFFFF
- focus
- #FFFFFF
- display-accent
- #B64539
- header-ink
- #FFFFFF
- accent
- #B64539
Tested UI combinations
Role and themeRatioUse
light: text on background11.86 : 1Text — 4.5:1 minimum
light: muted on background5.25 : 1Text — 4.5:1 minimum
light: muted on panel5.84 : 1Text — 4.5:1 minimum
light: accent-text on background5.52 : 1Text — 4.5:1 minimum
light: accent-text on panel6.14 : 1Text — 4.5:1 minimum
light: accent-hover on background5.84 : 1Text — 4.5:1 minimum
light: on-button on button5.39 : 1Text — 4.5:1 minimum
light: on-button on button-hover7.53 : 1Text — 4.5:1 minimum
light: focus on background5.52 : 1Icons / control boundary / focus — 3:1 minimum
light: control-border on panel4.29 : 1Icons / control boundary / focus — 3:1 minimum
dark: text on background11.86 : 1Text — 4.5:1 minimum
dark: muted on background7.74 : 1Text — 4.5:1 minimum
dark: muted on panel6.67 : 1Text — 4.5:1 minimum
dark: accent-text on background15.31 : 1Text — 4.5:1 minimum
dark: accent-text on panel13.18 : 1Text — 4.5:1 minimum
dark: accent-hover on background15.31 : 1Text — 4.5:1 minimum
dark: on-button on button5.39 : 1Text — 4.5:1 minimum
dark: on-button on button-hover7.53 : 1Text — 4.5:1 minimum
dark: focus on background15.31 : 1Icons / control boundary / focus — 3:1 minimum
dark: control-border on panel4.27 : 1Icons / control boundary / focus — 3:1 minimum
light: accent-text on soft5.13 : 1Text — 4.5:1 minimum
light: accent-text on hover4.85 : 1Text — 4.5:1 minimum
light: on-button on icon-panel5.39 : 1Icons / control boundary / focus — 3:1 minimum
dark: accent-text on soft14.64 : 1Text — 4.5:1 minimum
dark: accent-text on hover14.24 : 1Text — 4.5:1 minimum
dark: on-button on icon-panel5.39 : 1Icons / control boundary / focus — 3:1 minimum
dark: header-ink on background15.31 : 1Text — 4.5:1 minimum
Subtle section borders are decorative. Form boundaries use the stronger control-border token; focus rings use the readable accent-text role. Primary buttons have no border; soft shadows provide depth, increasing on hover. Keyboard focus keeps a visible ring. Hover surfaces mix 10% core Terracotta with the theme background. Decorative accents never carry information alone.
The mark.
A lowercase mi drawn as one continuous blob — three descending arches with a free-standing tittle. Aspect 2.010 : 1, filled paths only.
Lockups.
Compact is the default. The full lockup's strapline stops resolving into letters below about 40px tall, so switch rather than shrink.
Compact lockup
SVGThe default for headers, slides, and anything wide and small.
Minimum 36px tall
Full lockup
SVGCovers, title slides, posters, print — anywhere it renders large.
Minimum 40px tall · 60px recommended
Full lockup, white
SVGThe full lockup on dark grounds.
Minimum 40px tall · 60px recommended
Full lockup, charcoal
SVGOne-colour full lockup.
Minimum 40px tall · 60px recommended
Stack
SVGWhere the space is squarer than it is wide.
Minimum 140px tall
Stack, charcoal
SVGOne-colour stack.
Minimum 140px tall
Avatars and favicon.
Square derivatives built from the same path data. Avatars apply the clear-space rule exactly, which puts the mark at 75% of the square.
Avatar
SVGTerracotta on natural. The default profile image.
Download size 512px square
Avatar, reversed
SVGNatural on terracotta.
Download size 512px square
Avatar, charcoal
SVGWhite on charcoal, for platforms that render avatars small.
Download size 512px square
Favicon
SVGRounded tile with clear space cut to a third of a tittle. Legible from 32px.
Minimum 32px square
Clear space.
One tittle diameter on all four sides — 0.166 × the mark's ink width, so it scales with the asset. Nothing sits inside that band: no type, no rule, no image edge, no crop.
- Full lockup
- 60px tall · hard floor 40px
- Compact lockup
- 36px tall
- Stack
- 140px tall
- Mark alone
- 24px wide
The dashed line is the mark's ink box; the band outside it is the clear space.
Type.
Nunito for headings. Instrument Sans for body text, navigation, and buttons. The website and downloadable logos use the same Nunito Bold “Malleable AI” lettering. SVG lettering is outlined, so it cannot be replaced by a fallback font.
Nunito — headings
ABCDEFGHIJKLM
abcdefghijklm 0123456789
Instrument Sans — body and interface
ABCDEFGHIJKLM
abcdefghijklm 0123456789
Textured illustrations.
Clay uses Terracotta and Natural as material anchors, with texture, highlights and shadows. Charcoal and Natural ground the dark and light scenes. These are illustrations, including the sculpted mi in the hero; the flat-mark rules below apply to the supplied formal SVG marks and lockups.
For this first preview, the existing olive foliage and material accents remain as secondary illustration colours for Brian’s review. Natural skin and hair colours are preserved. Partner logos keep their own identities.
Recolour materials without changing subjects, faces, framing, silhouettes, transparency or the shared animation floor. Keep editable originals and colour-adjusted masters in artwork/; publish only optimized responsive images. See the illustration guidance.
Formal mark rules.
- Recolour the mark. Terracotta, charcoal, or white — nothing else.
- Put terracotta on charcoal or near-black. Use the white mark.
- Add a stroke to the mark. It is a filled outline; a stroke thickens the arches unevenly.
- Rebuild the mark as a brush stroke. There is no centreline and no stroke width.
- Re-space a lockup. Use the supplied symbol and lettering proportions.
- Retype a supplied logo lockup as live text. Use the asset; its Nunito Bold lettering matches the website.
- Stretch, rotate, skew, or add shadows, gradients, bevels or glows.
- Crop the mark or let anything intrude on its clear space.
- Use the full lockup below 40px tall. Switch to the compact one.
Questions, or need a format that isn't here? Email hello@malleable.ai.