Brand
Every mark here comes with the rule that goes with it. Every color comes with the token behind it. Read this before you put our mark in a deck or an article.
MIAMI WEB AI is a trade name of Nuko Nova Dynamics LLC.
The tiles hold their own ground. A reversed mark stays on black in either theme.
Copy any SVG to your clipboard or save the file.
Icon beside the name. The default mark; what the site header uses.
Smallest size: 120px wide on screen, 30mm in print.
For light grounds
The default. Headers, footers, a deck title, anywhere the slot is wider than it is tall. This is what the site header uses.
Avoid. On a dark or busy background; use the reversed one. In email: clients that invert for dark mode drop transparent art, so the signature uses a mark baked onto an ink tile instead.
For dark grounds
The horizontal lockup on ink, void, or any dark photograph. The site's dark-mode header.
Avoid. On white or paper: the white paths disappear.
For light grounds
Single-ink print, engraving, embossing, a fax-grade context, or anything that has to be recolored: this file inherits currentColor.
Avoid. Where the full-color version could be used; the dot is the brand and this drops it to black.
For dark grounds
Single-color on a dark ground: a dark print piece, a video end card, a partner's dark slide where the orange dot would fight their palette.
Avoid. On light backgrounds, and anywhere the reversed full-color would do.
For either ground
A deliberate accent moment: a poster, merch, a loud end card. Reads on both black and white.
Avoid. As the everyday mark. At small sizes on white the orange text drops below AA contrast; keep it large.
Icon above the name, in a square. For upright and square slots.
Smallest size: 64px wide on screen, 16mm in print.
For light grounds
A square or upright slot: a social avatar with room for the name, a badge, a print stack.
Avoid. In a wide slot; the horizontal lockup was drawn for that.
For dark grounds
The vertical lockup on a dark ground.
Avoid. On white or paper.
For light grounds
Single-ink or recolorable vertical stack. Inherits currentColor.
Avoid. Where full color is available.
For dark grounds
Single-color vertical stack on a dark ground.
Avoid. On light backgrounds.
Three bars and the dot, alone. For anything too small or too square to carry the name.
Smallest size: 24px wide on screen, 6mm in print.
For light grounds
The mark alone, for slots too small or too square to carry the name: favicons, app icons, avatars, the schema.org logo, the corner of a card. The schema.org Organization logo points at the 512px PNG of this one.
Avoid. Beside the name set in another face: the lockups exist so the name is never re-typeset.
For dark grounds
The icon on a dark ground. The dark-mode favicon and the dark app-icon variant.
Avoid. On white or paper.
For light grounds
Single-ink or recolorable icon: a monochrome toolbar, a stamp, an engraving. Inherits currentColor.
Avoid. Where the full-color icon would do.
For dark grounds
Single-color icon on a dark ground. The share-card preview uses this over the dark image.
Avoid. On light backgrounds.
The name alone, stacked. The only wordmark: the horizontal ones carried a retired tagline and were withdrawn (ADR 0008).
Smallest size: 64px wide on screen, 16mm in print.
For light grounds
The name without the mark, when the mark is already on the page or the context is text-only. Inherits currentColor.
Avoid. As the primary mark on a page that has no icon anywhere; the dot is the brand.
For dark grounds
The wordmark on a dark ground.
Avoid. On light backgrounds.
For either ground
An accent moment, large. Reads on black and on white.
Avoid. Small, or as body-adjacent text on white: below AA.
For light grounds
The wordmark with only "AI" in beacon. For a light ground where the name should carry one hit of color without the icon.
Avoid. On dark grounds; there is no reversed version of this one.
Each ratio below is worked out from the published colors.
Get your free AI Plan
6.3:1
Get your free AI Plan
3.3:1
Then we build it.
3.3:1
Read the terms.
5.3:1
Beacon #ff4d00 is for fills: the dot in the mark, buttons, the selection highlight, large display text. Black on Beacon measures 6.3:1 and passes AA; white on Beacon is 3.3:1 and fails, so text on an orange fill is Void, not Paper.
As text on Paper, Beacon measures about 3.3:1 and fails AA. Text and thin strokes on a light ground use Beacon-text #c43b00 instead, which passes. In dark mode Beacon-text resolves to Beacon itself, because the orange reads fine on Void.
The site's hero accent line uses Beacon as large display text on purpose; that is a brand call for one place, not a licence for body copy.
6 core values and 0 accents. Each swatch prints the custom property that owns it.
Void#000000
--void
The dark-mode page and the darkest structural surface. The mark's bars on a light ground are this.
On Paper 21.0On Void 1.0
Ink#111111
--ink
Body text on light, and the dark card surface. Not pure black on purpose; it sits back from the mark.
On Paper 18.9On Void 1.1
Paper#FFFFFF
--paper
The light-mode page. Reversed marks are drawn in this.
On Paper 1.0On Void 21.0
Surface#FAF9F7
--surface
The warm tint for cards and sections on a light page. The one thing that keeps Paper from reading as clinical.
On Paper 1.1On Void 20.0
Beacon#FF4D00
--beacon
The brand orange. The dot in the mark, fills, buttons, the selection highlight. See the beacon rule for when it may be text.
On Paper 3.3On Void 6.3
Beacon, text#C43B00
--beacon-text
Beacon darkened until it passes AA as text on Paper (4.5:1 and above). Text and thin strokes on a light ground use this, never the fill orange.
On Paper 5.3On Void 4.0
Headlines use weight 800 and tight spacing. Each is one ink sentence, then one orange sentence.
Each size grows with the window. The number is its size on your screen right now.
--fs-displayclamp(40px, 5.4vw, 84px)
Find out what to fix first.
--fs-h2clamp(32px, 4vw, 60px)
Then we build it and run it.
--fs-h3clamp(20px, 1.6vw, 24px)
A card title sits at this size.
--fs-leadclamp(17px, 1.25vw, 20px)
A lead sets up what a section is about.
--fs-bodyclamp(16px, 1.1vw, 18px)
Body text is for reading. It stays short and plain.
--fs-small15px
Small text holds notes and captions.
--fs-micro13px
The smallest size. Nothing goes below it.
miamiweb.ai/api/v2/studio
500 only
Not part of the public site's look since the redesign (ADR 0021): Jakarta carries every label. The demos and code samples use it.
Warm precision.
Variable, 400 to 900, upright and italic
Not part of the public site since the redesign (ADR 0021). The Casa Brickell demo's identity uses it.
Type and padding grow with the window. Around a mark, the unit is the mark itself: one bar width.
Keep one bar-width of empty space on every side, measured off the bar in the mark. Nothing else inside it: no text, no rule, no edge of a photo.
Horizontal lockup120px wide on screen, 30mm in print.
Vertical lockup64px wide on screen, 16mm in print.
Icon24px wide on screen, 6mm in print.
Wordmark64px wide on screen, 16mm in print.
01Stretch, squash, rotate or skew a mark.
02Recolor the dot on its own. A full-color mark keeps its colors; a black one-color file takes one color for the whole mark, and nothing else changes.
03Re-typeset the name in any font, including the ones on this page. Use a lockup.
04Add a drop shadow, outline, gradient or glow to the art.
05Put a full-color mark on a photograph without a solid panel behind it.
06Pair the mark with a tagline. There is no tagline lockup (ADR 0008).
07Crop the icon's bars or use the dot alone.
You may use the marks on this page to refer to Miami Web AI: in an article, a talk, a case study, a partner deck, a listing that says you work with us.
Take the file as it is. Do not alter it, recolor it, or set the name in another face. The one exception: the black one-color files are drawn to take a single color of your choosing, and that is the only change they allow. Do not use a mark in a way that suggests we made, endorsed, or are part of something we did not, and do not use it as part of your own name, logo, or product.
The marks stay ours; this is permission to use them, not a transfer. If you want to do something this does not cover, write to legal@miamiweb.ai and we will usually say yes.
Our Terms of Service reserve the names, logos and brand assets and point here for what you may do with them.
The archive is built from the same list this page reads. A mark that leaves the set leaves the download too.
All 17 marks as SVG, plus a PNG of each at 512 and 2400 pixels wide for the places that refuse vectors. The rules on this page come with it.
