Loma

Logo

The Loma logo combines the Crosscut symbol with the Loma wordmark set in Red Hat Display Black. The symbol and wordmark always appear together in the primary lockup. Always use the approved files — never recreate the logo.

Logo Symbol — Crosscut

The Crosscut symbol is inspired by the "kiri" (crosscut) pattern in the ancient board game Go. Four stones at adjacent grid intersections — two solid, two lighter — representing opposing forces meeting at a critical junction. In Go, the crosscut is one of the most aggressive, decisive moves: it forces immediate resolution.

Primary Mark

The gradient background version is our hero treatment for marketing and splash moments.

Logo Variations

Use the appropriate variation based on background context. Maintain minimum clear space equal to the height of the "O" on all sides.

Clear Space & Minimum Size

Minimum clear space: 1x the cap height of the "O". Minimum logo width: 80px for digital, 20mm for print.

Color System

Our palette is anchored by fluorescent yellow on warm cream surfaces. The warm cream foundation creates a human, inviting feel while electric yellow accents maintain energy and forward momentum.

Primary Colors

Neutrals

Semantic Colors

Gradient Definitions

Use gradients sparingly for hero moments and accent surfaces. Never apply gradients to body text.

Typography

Red Hat Display is our logo typeface — enterprise-born with humanist warmth. Figtree is used for body text. Outfit handles display headings and section titles. JetBrains Mono is for code, data, and technical labels. This quartet balances confidence with warmth and readability.

Display / Headings — Outfit

Body — Figtree

Mono — JetBrains Mono

Type Scale

Spacing & Grid

We use a 4px base unit spacing system and a 12-column grid. Generous whitespace is core to the Loma aesthetic — when in doubt, add more space.

Spacing Scale

12-Column Grid

Desktop: 12 columns, 24px gutter, 64px margins. Tablet: 8 columns. Mobile: 4 columns, 16px gutter, 20px margins.

Border Radius

Iconography

Icons use a 1.5px stroke, rounded caps and joins, on a 24x24 grid. Keep icons simple and geometric. Use Lucide or a similar open icon set as a base, customized to match our stroke weight and corner radius.

Icon Style

Outlined, 1.5px stroke, round line-cap, round line-join. Never filled unless toggled active. Color: inherit from context (typically warm dark gray on cream, yellow on dark).

Icon Specifications

Photography & Imagery

Photography should feel editorial, high-contrast, and forward-looking. We favor dark environments with electric highlights, abstract tech textures, and candid human moments that feel authentic — never stocky.

Art Direction

Do / Don't

Voice & Tone

Loma's voice is confident, concise, and technically sharp — but never cold. We speak like a brilliant friend who happens to be an engineer: clear, direct, occasionally witty, always respectful of the reader's intelligence.

Brand Personality

Writing Examples

Headline Style

Headlines are punchy, often 2-5 words. Use sentence case. Lead with a verb or a bold claim. Avoid questions in headlines.

Motion & Animation

Motion should feel quick, intentional, and polished. We use ease-out curves for entrances (things arriving), ease-in-out for transitions (things changing state). Never bounce. Never overshoot.

Easing Curves

Durations

Motion Patterns — Hover to Preview

Staggered Reveals

When multiple elements enter together, stagger by 60-80ms per item using animation-delay. Maximum stagger: 5 items. Beyond that, animate as a group.

Components

Core UI building blocks designed for consistency across product and marketing surfaces. All components inherit brand tokens for color, spacing, radius, and motion.

Buttons

Inputs

Badges & Tags

Toggle

Card

Shadows

Applications

How the brand system comes together across key touchpoints. These examples demonstrate correct usage of logo, typography, color, and components in context.

Landing Page Hero

Slide / Presentation

Social Card

Design Tokens

All values are defined as CSS custom properties for direct implementation. These are the Warm Cream token overrides — copy into your project for instant brand compliance.

/* Loma Design Tokens — v1.0 · Warm Cream */
:root {
  /* Primary */
  --loma-yellow: #E8FF5A;
  --loma-yellow-light: #F0FF85;
  --loma-yellow-text: #7A8F00;
  --loma-lime: #8FB800;
  --loma-green: #3D8C2E;

  /* Surfaces (warm cream) */
  --loma-bg: #FDFBF7;
  --loma-surface: #F7F4EF;
  --loma-border: #E8E4DD;
  --loma-border-muted: #EEEAE4;

  /* Text (warm neutrals) */
  --loma-text-primary: #1F1D1A;
  --loma-text-secondary: #5C5650;
  --loma-text-muted: #8C857D;
  --loma-text-faint: #B8B1A8;

  /* Semantic */
  --loma-success: #3D8C2E;
  --loma-warning: #CC9900;
  --loma-error: #C4392E;
  --loma-info: #2288CC;

  /* Typography */
  --font-display: 'Outfit', sans-serif;
  --font-logo: 'Red Hat Display', sans-serif;
  --font-body: 'Figtree', sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Spacing (4px base) */
  --space-1: 4px;   --space-2: 8px;
  --space-3: 12px;  --space-4: 16px;
  --space-5: 24px;  --space-6: 32px;
  --space-7: 48px;  --space-8: 64px;
  --space-9: 96px;  --space-10: 128px;

  /* Radius */
  --radius-sm: 6px;   --radius-md: 12px;
  --radius-lg: 20px;  --radius-xl: 32px;
  --radius-full: 9999px;

  /* Shadows (warm-tinted) */
  --shadow-sm: 0 1px 3px rgba(30,25,15,0.05);
  --shadow-md: 0 4px 16px rgba(30,25,15,0.07);
  --shadow-lg: 0 12px 40px rgba(30,25,15,0.1);
  --shadow-glow: 0 0 40px rgba(232,255,90,0.18);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
}