Brand
How to use the Loudlark name and logo. Use the files as they are, on the grounds shown, and keep to the rules below.
Logo files
Six files, all SVG, each drawn for the ground it sits on. They are drawn from the same source as the logo on this site.
Horizontal lockup
The default. Headers, documents, slides, partner pages. In Pine, on chalk or white.
Horizontal lockup, reversed
On Pine, Ink or a dark photograph. Chalk, with the lead wing in Shoot.
Stacked lockup
Square and tall spaces: a social profile card, a slide cover, a poster. In Pine.
Symbol, one color
Tight spaces under 96 px wide, avatars, favicons in one color. In Pine; recolor only to a single brand color.
Symbol, two-tone
Dark and Pine grounds only, at 48 px and larger: Chalk with the lead wing in Shoot.
App icon
Home screens, app listings, social avatars that crop to a circle or a square. It carries its own Pine tile.
Clear space and minimum size
Clear space
Leave empty space around the logo on every side, equal to a quarter of the symbol's height (S). Nothing else enters it: no text, edge or image.
Minimum size
Never set the logo smaller than these widths. In any space narrower than the symbol-only width below, use the symbol alone.
- loudlark88 px wide: horizontal lockup
- loudlark64 px wide: wordmark alone
- 16 px: symbol alone, and in any space under 96 px wide
Color
The logo is one color on a light ground, and two on a dark one.
- On chalk or white
- Pine, all of it. This is the primary logo.
- On pine, ink or a dark photograph
- Reversed: chalk, with the lead wing in shoot. At 48 px and larger.
- In one color
- Any single brand color, every part the same. Use it where two colors would blur: below 48 px, in print and on a colored ground.
- Never
- Shoot on chalk or white. It is too light to read there; the wing stays pine.
- Pine #0C3B2EThe brand color. The logo on light grounds, the primary action in light mode, brand surfaces.
- Ink #0B1F18Text, and the ground of the dark theme.
- Chalk #F6F5EFThe page ground, and text and the logo on dark grounds.
- Shoot #B7F36BThe accent, as a fill only: highlights, the lead wing on dark grounds, the primary action in dark mode.
- Shoot on light #3A7210The same hue, dark enough for links and accent text on chalk (4.5 to 1 on every light surface).
Type
The wordmark is lowercase, set in Manrope ExtraBold (800) with tight letter spacing (-0.05em). The whole site is set in Manrope: display at 700 to 800 with tight tracking, text at 400 to 500.
Please don't
- Rotate or tilt the logo.
- Outline it, or add a stroke.
- Recolor it, or use a color outside the palette.
- Stretch, squash or crop it.
- Add a gradient, a glow or a shadow.
- Add an eye, a beak or any other detail to the symbol.
- Retype the wordmark in another typeface, weight or case.
- Place it on a busy photograph or on a color with weak contrast.
- Set it smaller than the minimum sizes.
The name
In running text, write Loudlark: one word, capital L, not LoudLark or Loud Lark.
The lowercase form, loudlark, belongs to the logo. The company and the product share one name.