Brand Guidelines

Loopfour Brand Guidelines

This document outlines the visual identity system for Loopfour, including colors, typography, logo usage, and animation principles.

Brand Philosophy

Design Principles:

• Precision over decoration — Every element serves a purpose
• Quiet confidence — The interface feels assured, not flashy
• Negative space as a feature — Let content breathe
• Systematic consistency — Predictable patterns build trust

Aesthetic References:

• Cursor.ai: Deep blacks, subtle borders, monospace elegance
• Linear: Clean surfaces, precise spacing, purposeful animation
• Vercel: High contrast, typographic hierarchy

Color System

Loopfour uses a monochrome palette optimized for both light and dark modes.

Light Mode

Dark Mode

Typography

Font Family

Primary: Geist Sans (by Vercel)

• Modern, geometric sans-serif
• Excellent screen rendering
• Free and open source

Monospace: Geist Mono

• Perfect pairing with Geist Sans
• Optimized for code display

Type Scale

Logo

The Mark

The Loopfour logo consists of 4 circles arranged in a pinwheel pattern, connected by lines to a central hub. This represents:

• 4 workflow stages: Trigger → Action → Transform → Output
• Continuous loop: Data flows endlessly through the system
• Connected systems: Everything is integrated

Usage Guidelines

Clear Space:

• Minimum padding: equal to the diameter of one circle

Minimum Sizes:

• Mark alone: 16px (favicon)
• Mark + wordmark: 80px width

Color Usage:

• Primary: Full contrast (black on light, white on dark)
• Never use color tints
• Always use solid fills

Logo Variants

import { Logo, LogoAnimated } from '@/components/brand';

// Standard logo with wordmark
<Logo size={32} />

// Mark only (for favicon, compact spaces)
<Logo markOnly size={24} />

// Animated mark (for interactive elements)
<LogoAnimated size={48} />

Spacing & Layout

Spacing Scale

Uses a 4px base unit:

Border Radius

Animation Principles

Core Philosophy

• Scroll-scrub preferred: User controls animation pace via scroll
• Single focal point: One element captures attention at a time
• Subtle, purposeful: Motion reinforces meaning, not decoration
• Respect reduced motion: Always provide static fallback

Hero Animation

The hero animation visualizes a workflow loop:

1. Pulse spawns at TRIGGER node
2. Travels through ACTION, TRANSFORM, OUTPUT
3. Completes the loop
4. "Woah moment": entire system illuminates

import { HeroAnimation } from '@/components/brand';

<HeroAnimation />

GSAP Configuration

// Standard scroll-scrub setup
const timeline = gsap.timeline({
  scrollTrigger: {
    trigger: container,
    start: 'top top',
    end: '+=2500', // 2500px scroll distance
    scrub: 1.2,    // Smooth 1.2s lag
    pin: true,
  },
});

Implementation Checklist

• Install dependencies: pnpm add geist gsap
• Import Geist fonts in layout.tsx
• Add CSS variables from globals.css
• Extend Tailwind config with lf-* tokens
• Use Logo component in navigation
• Add HeroAnimation to landing page

Files Reference