Robi Labs

Overview

Robi Labs operates at the intersection of technical precision and human-centered design, building reasoning engines and multimodal AI systems that demand clarity without sacrificing sophistication. The design system embodies 'Technical Minimalism'—a movement that strips away visual noise while maintaining visual hierarchy through color, scale, and intentional whitespace. The brand personality is authoritative yet approachable: the interface speaks in the language of capability, not hype. The emotional response is one of calm confidence—users trust that complex systems are being handled with rigor. Voice: direct, precise, never breathless. Example: 'Robi Garden introduces a new model family. Deploy in minutes, scale to millions of tokens.'

Colors

The color palette centers on a deep navy-to-black surface (#06060f) paired with a signature indigo accent (#6e7bff) that appears on all primary CTAs, focus states, and brand-critical interactive elements. This indigo is the primary color—it is the only warm accent in an otherwise cool, technical palette, making it unmistakable as the call-to-action. Secondary surfaces layer from #050509 (surface-dim, used for the darkest backgrounds) through #1a1a2e (surface-container-highest, for elevated modals and overlays). Text defaults to #e6e9f2 (on-surface, a cool off-white at 93% lightness) for maximum legibility on dark backgrounds, with #8a90a6 (on-surface-variant) reserved for secondary text, hints, and disabled states. The outline color is the primary indigo (#6e7bff), reinforcing brand consis

Typography

The type system uses Inter as the primary typeface—a geometric sans-serif that conveys technical precision without coldness. Display sizes (86.4px, 600 weight) anchor hero sections with -0.02em letter-spacing to maintain legibility at scale. Headline-lg (48px, 600 weight) and headline-md (32px, 600 weight) establish section hierarchy with -0.015em and -0.01em tracking respectively. Body text (18px and 16px, 400 weight) maintains 28px and 24px line-heights for comfortable reading on dark backgrounds. Labels (14px and 12px, 500 weight) use 0.01em and 0.05em letter-spacing to add visual distinction for UI controls and metadata. Red Hat Mono is reserved for code samples and technical references at 14px, 400 weight. On dark backgrounds, apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) to small l

Layout

The layout follows a 12-column grid with a max-width of 1280px (container-max), centered with 24px horizontal gutters on desktop and 16px on mobile. Page rhythm is established through lg spacing (40px) for section separation and md spacing (24px) for component padding. The hero section uses full-viewport height with a starfield background (linear-gradient with radial-gradient mask, opacity 40%) that provides visual depth without competing with content. Cards and containers use md padding (24px) internally, with lg spacing (40px) between major sections. The grid is fluid below 768px, collapsing to single-column layouts with consistent gutter preservation. Navigation uses a fixed header at the top with transparent background and 4px py (16px total padding including safe-area-inset), maintain

Elevation & Depth

Depth is conveyed through layered surfaces and subtle shadows rather than dramatic drop-shadows. Level 1 (Base): the background surface (#06060f) with an optional grid texture overlay (72px × 72px grid at rgba(190, 204, 237, 0.06), masked to 78% radial gradient for fade-out). Level 2 (Standard Cards): surface-container (#0b0b1a) with a 1px border at rgba(110, 123, 255, 0.1) and box-shadow: 0 4px 12px rgba(110, 123, 255, 0.15) for subtle lift. Level 3 (Elevated/Modals): surface-container-highest (#1a1a2e) with a 1px border at rgba(110, 123, 255, 0.2) and box-shadow: 0 16px 40px rgba(0, 0, 0, 0.

Shapes

The shape philosophy is 'Technical Softness'—rounded corners are applied consistently but conservatively, avoiding the extremes of sharp rectangles or pill-shaped buttons. Buttons and inputs use DEFAULT radius (0.5rem / 8px) for a modern, approachable feel that still reads as technical. Cards and elevated containers use lg radius (1rem / 16px) to create visual distinction from interactive elements. Modals and dropdowns use xl radius (1.5rem / 24px) for the most prominent surfaces. The grid background uses 72px × 72px cells with no rounding, maintaining a technical aesthetic. Focus rings and ba

Components

Action Elements Buttons are the primary interaction pattern. Primary buttons use #6e7bff background with #06060f text, 12px 20px padding, 44px height, and 0.5rem border-radius. On hover, the background transitions to #7c87ff (primary-fixed-dim) over 150ms. On active/press, it shifts to #8b94ff (primary-fixed). Secondary buttons use transparent background with a 1px border at rgba(230, 233, 242, 0.2) and #e6e9f2 text; on hover, the background becomes rgba(230, 233, 242, 0.08) and the border strengthens to rgba(230, 233, 242, 0.4). Ghost buttons (used for tertiary actions) have transparent background and #6e7bff text, transitioning to rgba(110, 123, 255, 0.08) background on hover. All buttons use font-weight: 500 and transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) for smo

Do's and Don'ts

**Do**

• Do use the primary indigo (#6e7bff) exclusively for CTAs, focus states, and brand-critical interactive elements—it is the only warm accent and must remain distinctive.
• Do maintain 24px gutters on desktop and 16px on mobile; use lg spacing (40px) for section separation to create breathing room in dense layouts.
• Do apply text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) to small labels (12px and below) when layered over gradient or image backgrounds to prevent haloing and ensure readability.
• Do use 150ms cubic-bezier(0.4, 0, 0.2, 1) transitions for all interactive state changes (hover, focus, active) to maintain consistent motion language.
• Do layer surfaces using the surface-container stack (#0b0b1a → #131325 → #1a1a2e) rather than introducing new background colors; this maintains visual cohesion and reduces cognitive load.

**Don't**

• Don't use the primary indigo (#6e7bff) for body text, backgrounds, or non-interactive elements—reserve it exclusively for actions and focus states to maintain visual hierarchy.
• Don't apply border-radius greater than 1.5rem (xl) to any component; the system uses a graduated approach (DEFAULT for buttons, lg for cards, xl for modals) and deviating breaks the technical aesthetic.
• Don't add drop-shadows to buttons or inputs; use only on elevated containers (cards, modals) with box-shadow: 0 4px 12px rgba(110, 123, 255, 0.15) or stronger for hierarchy.
• Don't mix typefaces; Inter is the primary typeface for all UI text, and Red Hat Mono is reserved for code samples only—avoid serif fonts or decorative typefaces in the interface.
• Don't use pure white (#ffffff) or pure black (#000000) in the interface; the system uses #e6e9f2 for light text and #06060f for dark backgrounds to reduce eye strain and maintain brand consistency.