Brand guidelines
The Loops brand
The logo, type, and color that make every Loops surface feel like one product. Everything here is download-ready.
Wordmark
Loops House
01, Logo
Logo & marks
Twelve exported files, all in /brand, in three families: with the wordmark, mark-only on a background, and transparent. Every one is a download.
Logo with signature
Mark plus the “Loops House” wordmark, on a baked background. Start here, this is the lockup for decks, banners, and anywhere the name should read.
Logo with background
The same backgrounds, mark only. Use these where a wordmark can't be read anyway, avatars, app icons, stickers.
Transparent marks
No background baked in, you supply the surface, and you own the contrast. Match the mark to what sits behind it.
Do
- Keep clear space equal to the icon height on every side.
- Pair icon + wordmark, and scale them together.
- Match the mark to its surface, dark on light, light on dark.
Don’t
- Stretch, recolor, rotate, or add shadows to the mark.
- Rebuild the wordmark in another typeface.
- Place it on a busy or low-contrast background.
02, Typography
Typography
Funnel Sans carries everything, UI, body, and headings. Pixelify Sans is display-only, reserved for the wordmark.
Primary typeface
Funnel Sans
Aa
Build with purpose.
Display · wordmark only
Pixelify Sans
Loops House
Never use Pixelify for body copy or UI labels.
Type scale
clamp(26px, 7vw, 48px)clamp(20px, 5.5vw, 36px)clamp(17px, 4.5vw, 26px)clamp(15px, 4vw, 17px)Label treatment
Uppercase · tracking · ink/55
The signature label style, eyebrows, field labels, nav links. Semibold, letter-spaced, muted.
03, Color
Color
Reference tokens, never raw hex. Ink carries text and controls; lime is the single accent; creams are the page surfaces.
#0F2C23bg-ink#E2FEA5bg-lime-soft#3C574Bbg-moss#B8CAB2bg-sage#C8E64Abg-lime-dim#F8FFE8bg-cream-lime#FBFFF2bg-cream