FLOWMINT LOGO LOCKUPS: HORIZONTAL AND STACKED

Files for "Create a Horizontal and Stacked SVG Logo Lockup" on svgai.org.
Made in October 2026. FlowMint is a fictional finance dashboard.

FILES
flowmint-symbol-original.svg: The symbol, generated with SVG AI on
September 5, 2026 (Classic, one SVG, 1:1 ratio, transparent background)
and unchanged. Its prompt is in
https://www.svgai.org/blog/ai-assisted-svg-creation
flowmint-lockup-horizontal-editable.svg and
flowmint-lockup-stacked-editable.svg: The editable masters, composed in
SVG AI's SVG Code Editor. The symbol's three paths are unchanged inside
a group that scales and moves them, and the name is live <text> in
Nunito Bold. They need Nunito Bold installed or loaded to look right;
without it, the name falls back to the next font in its list.
flowmint-lockup-horizontal.svg and flowmint-lockup-stacked.svg: The
delivery copies: the same lockups with the name as outlines (paths),
drawn from the Nunito Bold font file with HarfBuzz and fontTools. Use
these with <img> and anywhere the font may be missing.
index.html: The example page: the horizontal lockup in a header, the
stacked lockup in a sign-in card, and a footer that switches between
them with <picture>.
check-results.json: What was checked, and the results.

SPACING
u is a quarter of the symbol's height (100 units in these files).
Symbol: 4u tall. Gap between symbol and name: 1u. Name: cap height 2u
in the horizontal lockup, 1.25u in the stacked one. Clear space: 1u on
every side, outside the viewBox.
Horizontal viewBox: 0 0 1661.642 400 (4.15:1).
Stacked viewBox: 0 0 772.34 629.61 (1.23:1).
These are this example's choices, not rules.

SIZES
Smallest height that still read at 1x: horizontal 24 px (about 100 px
wide), stacked 48 px (about 59 px wide). On 2x screens both read one
step smaller (20 px and 40 px). Below these, use the symbol alone.
On the example page: header 40 px tall (1u = 10 px of clear space),
sign-in card 80 px tall (1u = 13 px), footer 32 px (horizontal) or
64 px (stacked).

FONT
Nunito by The Nunito Project Authors, SIL Open Font License 1.1, with
no Reserved Font Name. It is not included here; get it from
https://fonts.google.com/specimen/Nunito

ALT TEXT
A logo that is the only content of a link home: "FlowMint home".
A logo that isn't a link: "FlowMint". A logo next to visible text that
already names the site: alt="".

TO CHANGE THE NAME
Edit the <text> in an editable master. A different word needs a new x
position and viewBox width. In the stacked master, also move the symbol
so it stays centered over the name: the group's translate x becomes
(name width - 325.897) / 2 - 97.916. If the new name is narrower than
the shield (325.897 units), the shield sets the viewBox width instead:
center the name under it. The stacked viewBox ends at 629.61, just
below the baseline at 627.837, because FlowMint has no descenders; a
name with g, j, p, q or y needs a taller viewBox. Nunito Bold's
descenders reach about 33.7 units below the baseline at this size, so
raise the height from 629.61 to about 661.6. In the horizontal lockup
they end at about 353.9, inside its 400-unit height. Then make new
outlined copies, for example with Figma's Outline text or Inkscape's
Path > Object to Path.

TESTED
Chrome 155 and Edge 155 on Windows: the outlined copies against
live Nunito Bold text, the editable files as <img> without Nunito,
the example page at widths from 320 to 1440 px (sizes, clear space,
scrolling, layout shift, the <picture> switch), the accessible names
in the DevTools accessibility tree, and size ladders at 1x and 2x.
Not tested: Safari, Firefox, real phones, screen readers, printing and
other editors.
The lockups, the outlines and the checks were made by an AI coding
agent.
