BarnLabs Brand Guidelines
The visual system behind BarnLabs: a practical mark, a deliberate palette, clear typography, and editorial imagery.
BarnLabs makes careful tools for research, learning, and exploration. The name holds two useful ideas together: a barn is practical; a lab is curious. This system is designed to make the work feel clear, calm, and trustworthy.
The BarnLabs branding repository is the private, version-controlled source of truth for collaborators. Its BarnLabs directory holds the approved masters, exports, guidelines, manifests, and QA evidence. Public-ready files remain available in the BarnLabs brand kit.
The mark
The parent mark is a constructed B with an open L in its negative space. The outer letter names BarnLabs. The opening is room for an idea to be examined, shaped, and shipped.
Use the complete lockup when BarnLabs may be unfamiliar. Use the symbol alone for compact contexts such as favicons, avatars, and app chrome.
- Keep at least one quarter of the symbol height clear on every side.
- Keep the standard symbol at 32 px or larger; use the prepared micro export at 16 px and 24 px.
- Keep the horizontal lockup at 160 px or larger on screen.
- Use the approved source exports. Do not redraw, crop, rotate, outline, stretch, shade, or animate the mark.
The canonical logo is flat and one color. A gradient, glow, texture, shadow, or product mark inside the symbol is not part of the identity.
Color
BarnLabs begins with a deep ink green and a warm paper ground. Mint, gold, and coral are purposeful signals, not decoration.
| Role | Name | Hex | Use |
|---|---|---|---|
| Canvas | BarnLabs Ink | #062A24 | Primary dark background and dark mark |
| Surface | Pine | #0F2A22 | Cards and grouped content |
| Border | Moss | #2A5C4D | Dividers and outlines |
| Light surface | BarnLabs Paper | #F6F3EA | Editorial and presentation surfaces |
| Action | BarnLabs Mint | #2DD4AA | Actions, progress, and the mark on Ink |
| Milestone | Arrival Gold | #E4BA52 | Deliberate emphasis and destinations |
| Caution | Warm Coral | #EF8B6B | Warnings and destructive actions |
Use Ink on Paper or white, White on Ink, and Mint on Ink. Mint is not a functional identification color on a light surface. Status must never depend on color alone.
Type and layout
Playfair Display carries the editorial voice in display settings. Noto Sans carries interface and body copy. Production wordmarks use outlined paths, so they never rely on an installed font.
The interface follows an 8 px spacing rhythm, with 4 px used only for fine alignment. Use space and hierarchy before borders or shadows. Primary actions must be clear, verb-led, and at least 44 by 44 CSS pixels. Motion should explain a change and always respect reduced-motion preferences.
Images
Choose real places, tangible artifacts, source material, and product screens that show believable work. The visual direction is documentary and specific, not generic AI imagery, neon brains, floating holograms, or busy technology collages.
For blog images, create a 1200 by 630 px JPEG or WebP master. Keep important material in the center so it survives the mobile crop. Render the article title as HTML, never inside the image. Every meaningful image needs useful alternative text, and embedded editorial images keep their own aspect ratio rather than being forced through the hero crop.
The current source artwork lives under BarnLabs/Source, and the practical rules live under BarnLabs/Guidelines. Those links require access to the private repository; the public brand kit does not.
Product relationships
Products can have task-specific identities without competing with the parent mark. BMail is an internal BarnLabs mail workspace and uses the BarnLabs parent lockup until a separate BMail identity is approved.
The working standard
Before publishing a new asset, inspect it at its real size. Test contrast, keyboard focus, text scaling, reduced motion, intrinsic dimensions, crop, and file weight. The system should make the next useful discovery easier to reach and trust; decoration alone does not meet that standard.