YBM Labs

Overview

YBM Labs is an applied AI innovation platform that transforms enterprise operations through intelligent workflow automation, LLM fine-tuning, and custom AI deployment. The brand embodies 'Precision Minimalism'—a design philosophy that strips away visual noise to expose the clarity and power of technology. The aesthetic is deliberately austere: pure white backgrounds (#ffffff), deep blacks (#111111), and a singular electric blue accent (#0000ee) that commands attention on CTAs and critical interactions. The emotional response is one of institutional confidence and technical mastery—users feel they're engaging with a platform built by engineers for engineers, where every pixel serves a function and no decoration exists without purpose.

The voice is direct, authoritative, and precise. YBM Labs speaks in the language of deployment, scalability, and security—never breathless, never casual. Vocabulary favors concrete nouns (workflows, automation, LLMs, deployment) over abstract adjectives. The brand personality is 'trusted operator': calm under pressure, detail-oriented, and focused on outcomes. Example sentence in brand voice: 'We deploy AI systems that scale across your operations—no experimentation, no delays, security from day one.'

Colors

The color system is built on institutional restraint. The primary surface is pure white (#ffffff) with a carefully calibrated grayscale stack for depth: surface-container-low (#f0f0f0) for subtle elevation, surface-container (#eeeeee) for secondary containers, and surface-container-highest (#dddddd) for maximum contrast without introducing new hues. The on-surface text is near-black (#111111) for maximum legibility at 16px body copy; on-surface-variant (#595959) is used for secondary text and disabled states. The primary accent is electric blue (#0000ee)—a vivid, unmistakable color reserved exclusively for CTAs, links, and active states. This color appears on the 'Talk to us' button and 'View our products' link in the hero, creating immediate visual hierarchy. Secondary accent is success-g

Typography

The type system pairs two distinct font families to create visual hierarchy and emotional resonance. Display and headline levels use Neue Haas Grotesk Display Pro (weights 45 Light through 95 Black) for its geometric precision and institutional authority—this typeface communicates technical competence and forward-thinking vision. Body and label text uses Safiro Regular and Fragment Mono for warmth and readability: Safiro at 16–18px with 0.01–0.02em letter-spacing for body copy, and Fragment Mono at 12px for labels and micro-interactions. The display level (60px, 500 weight, -0.04em tracking) is reserved for hero headlines like 'Deploying Intelligence'; headline-lg (40px, 600 weight) for section titles; headline-md (28px, 600 weight) for subsections. Body-lg (18px, 400 weight, 28px line-hei

Layout

The layout system uses a 12-column grid with a maximum container width of 1440px, allowing content to breathe on large displays while maintaining focus on medium screens. The gutter is fixed at 24px between columns, creating a 1:1 ratio of content to white space in the grid structure. Page rhythm is governed by the spacing scale: lg (40px) separates major sections (hero from features, features from testimonials); md (24px) separates cards and component groups within sections; sm (12px) separates related elements like icon + label pairs. The hero section uses centered, single-column layout with max-width: 800px for the headline and supporting copy, creating a focal point that draws the eye downward through the page. The feature grid below uses 4 columns on desktop, 2 on tablet, 1 on mobile—

Elevation & Depth

Depth in this system is achieved through subtle layering rather than dramatic shadows. The elevation scale uses three levels: sm (0 1px 2px rgba(0, 0, 0, 0.06)) for hover states on interactive elements, md (0 4px 12px rgba(0, 0, 0, 0.08)) for elevated cards and modals, and lg (0 16px 40px rgba(0, 0, 0, 0.12)) for floating elements like tooltips or dropdowns. The primary CTA button 'Talk to us' uses {elevation.sm} at rest and transitions to {elevation.md} on hover with a 120ms cubic-bezier(0.2, 0, 0.38, 0.9) easing function. Cards use a 1px solid border at {colors.outline} (#cccccc) combined wi

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used sparingly and purposefully to soften technical interfaces without introducing organic or playful qualities. The rounded scale is: sm (0.25rem / 4px) for small interactive elements like icon buttons; DEFAULT (0.5rem / 8px) for standard buttons and inputs; md (0.75rem / 12px) for card corners and larger containers; lg (1rem / 16px) for modals and elevated surfaces; xl (1.5rem / 24px) for hero sections and full-width containers; full (9999px) for badges and pill-shaped elements. Buttons use {rounded.DEFAULT} (8px) to maintain

Components

Action Elements Buttons are the primary interaction mechanism and must be immediately recognizable. The button-primary component uses {colors.primary} (#0000ee) background, {colors.on-primary} (#ffffff) text, {typography.label-md} (14px, 600 weight), {rounded.DEFAULT} (8px), and padding of 12px 24px for a 44px total height. The box-shadow is {elevation.sm} (0 2px 4px rgba(0, 0, 0, 0.1)) at rest. On hover, the background shifts to #0000cc (darker blue) and the shadow expands to {elevation.md} (0 4px 12px rgba(0, 0, 0, 0.15)); the transition timing is 120ms ease-out. On active (pressed), the background becomes #0000aa with no shadow change. The button-secondary variant uses a transparent background with a 1px border at {colors.outline} (#cccccc) and {colors.primary} text; on hover, the b

Do's and Don'ts

**Do**

• Do use {colors.primary} (#0000ee) exclusively for CTAs, links, and active states—never for backgrounds or decorative elements.
• Do maintain the 24px gutter and 40px section spacing religiously; white space is a design material that defines the brand's institutional character.
• Do pair Neue Haas Grotesk Display Pro for headlines with Safiro Regular for body copy to create clear visual hierarchy between information levels.
• Do apply {elevation.sm} (0 2px 4px rgba(0, 0, 0, 0.1)) to interactive elements and expand to {elevation.md} on hover; never use drop shadows larger than {elevation.lg}.
• Do use 1px borders at {colors.outline} (#cccccc) to define card and container edges; borders + subtle color shifts replace heavy shadows.
• Do keep rounded corners between 8px and 16px; avoid both sharp corners (0px) and excessive rounding (24px+) to maintain technical precision.

**Don't**

• Don't introduce new accent colors beyond {colors.primary} (#0000ee), {colors.secondary} (#37c25a), and {colors.tertiary} (#f21d1d); the chromatic restraint is core to the brand.
• Don't use system fonts or generic sans-serif; always load Neue Haas Grotesk Display Pro and Safiro from the provided @font-face declarations.
• Don't collapse the 24px gutter or 40px section spacing for visual 'tightness'—the breathing room is intentional and defines the brand's confidence.
• Don't apply text-shadow or text-stroke to body copy; reserve these techniques for small labels (12px) over busy backgrounds only.
• Don't use opacity or color overlays to create depth; use the surface-container stack and border system instead.
• Don't animate transitions faster than 100ms or slower than 200ms; the brand moves with precision, not sluggishness or frenetic energy.