The Fynti mark, wordmark and app icon, and the rules for using them.
An F drawn around a single record. The curved shoulder, the column and the row all pivot on the corner of the block, so every curve and gap comes from one point and one module.
Use the horizontal lockup by default. Use the mark alone where space is tight or the name is already on screen, and the wordmark alone only next to the mark.
Every edge sits on an even unit of a 16 px grid, so the mark stays sharp at favicon and sidebar sizes.
The mark in white on a Fynti Blue tile. The tile brings its own background, so the icon reads on light and dark tab bars alike.
Give the logo room, and switch to the mark before the lockup gets too small to read.
Keep space equal to the block, one third of the mark's height, on every side. Text, edges and other logos stay outside it.
Values come straight from the theme tokens, shown for the light and dark themes.
--accentThe block in the mark, the app icon and primary actions.
--ink-strongThe mark's frame and the wordmark.
--surfaceThe default background behind the logo.
--accent-subtleSelection and soft highlights beside Fynti Blue.
The wordmark is set in Inter, the app's typeface, and outlined so it renders the same everywhere.
Lowercase keeps the calm, friendly tone of the product, and the hook of the lowercase f echoes the curve in the mark. A capital F next to an F-shaped mark would say the same thing twice.
Directions drawn on the same grid and judged at 16 and 128 px in both themes before the current mark was chosen.
An F built from a column and two rows. Crisp at every size, but it reads as a generic layout icon.
Three stages narrowing like a sales funnel. A good story, but at 16 px it looks like a text-align icon.
A lowercase f from three modules. Very legible, but heavy, and too close to familiar social marks.
A company square meeting a person circle. Meaningful, but generic shapes with no letter to remember.