Origin 137

Overview

Origin 137 is a French AI engineering firm specializing in Forward Deployed Engineers, AI agents, RAG systems, and production-grade LLM deployment for mid-market and enterprise clients. The design system embodies **Architectural Minimalism with Warmth** — a philosophy that prioritizes clarity, precision, and human-centered impact through restrained, earthy aesthetics. The interface evokes a sense of professional confidence and technical mastery, using a warm neutral palette (deep charcoal #16140f, cream #fcfcfa) anchored by a distinctive burnt-orange accent (#e2552c) that signals action and forward momentum. The emotional response is one of calm authority: users feel they are working with seasoned engineers who understand complexity and deliver results.

The brand voice is direct, expert, and French-inflected—never breathless or hyperbolic. Vocabulary favors precision over marketing flourish: "embarked engineers," "orchestrated pods," "measured impact," "mastered internally." Tone examples: "You keep control of your AI. We embed senior engineers into your teams—experts who commit to what they deliver." The design reinforces this voice through generous whitespace, restrained typography (Geist for body, IBM Plex Mono for labels), and deliberate use of color. Every interactive element—buttons, links, focus states—uses the primary orange to signal agency and forward progress.

Colors

The color system is rooted in a warm, earthy palette that reflects the French design tradition of refined restraint. **Primary (#e2552c)** is a burnt-orange accent used exclusively for CTAs, active states, focus indicators, and brand moments—it commands attention without aggression. **Secondary (#16140f)** is a near-black deep charcoal that serves as the primary text color and button fill for secondary actions; it pairs with cream (#fbfaf7) for maximum contrast and readability. **Surface stack** ranges from bright white (#ffffff) at the top through warm creams (#fcfcfa, #fbfaf7, #faf7f1) to a soft beige (#f4f0e7) for elevated containers, creating visual depth without relying on shadows. **On-surface variants** (#6b665c for muted, #9a948a for softer muted) provide hierarchy for secondary te

Typography

The type system pairs Geist (a geometric sans-serif with humanist warmth) for all body and display text with IBM Plex Mono for labels, metadata, and UI chrome. This pairing communicates both approachability and technical precision. Display (88px, weight 450, line-height 84px, -0.03em tracking) is reserved for hero headlines and sets the brand's confident scale; headline-lg (48px, weight 600) anchors section introductions; body-lg (18px, weight 400, 28px line-height) is the primary reading size for descriptive copy. Label-md (14px, weight 500, IBM Plex Mono, 0.12em tracking) is used for navigation, button text, and tab labels—the monospace family and tight tracking reinforce technical authority. On small labels over busy backgrounds (e.g., badges on image overlays), apply text-shadow: 0 1px

Layout

The layout system uses a 12-column grid with a fixed max-width of 1320px, centered with auto margins. The page rhythm is built on a 56px base unit (7 × 8px spacing unit) for major section separation, with 40px (lg spacing) used for subsection breaks and 24px (md spacing) for component-level padding. The hero section uses a 2-column asymmetric grid (1.7fr 1fr) that places the headline and CTA on the left with breathing room, while supporting imagery occupies the right. Container padding is responsive: clamp(20px, 4vw, 56px) ensures mobile readability while scaling gracefully to desktop. White-space philosophy: generous margins between sections (56–90px vertical padding) create visual rest and emphasize content hierarchy. The grid of hero images below the fold uses a 5-column layout with cla

Elevation & Depth

Depth in this system is achieved through subtle layering rather than dramatic shadows. The base layer (Level 0) is the warm gradient background (linear-gradient(180deg, #FCFCFA 0%, #FCFBF8 35%, #FAF7F1 72%, #F4F0E7 100%)) which provides visual energy without distraction. Level 1 (Standard cards and containers) uses a 1px border at rgba(20, 18, 12, 0.1) with no shadow, relying on the surface-container background color (#fbfaf7) to separate from the page. Level 2 (Elevated cards, modals) applies box-shadow: 0 3px 8px rgba(22, 20, 15, 0.15), a soft, close shadow that suggests proximity without dr

Shapes

The shape philosophy is **Refined Geometric Precision** — rounded corners are used sparingly and consistently to soften hard edges without sacrificing technical clarity. Buttons and primary interactive elements use 9px border-radius (between md and lg tokens), a deliberate choice that sits between pure rectangles and fully rounded pills, signaling both friendliness and professionalism. Cards and containers use 14px border-radius (between lg and xl), creating a gentle, approachable feel while maintaining visual weight. Input fields use 8px border-radius (between DEFAULT and md), slightly sharpe

Components

Action Elements

**Button Primary** uses backgroundColor: {colors.primary} (#e2552c), textColor: {colors.on-primary} (#fbfaf7), padding: 12px 20px, height: 44px, border-radius: 9px, font-weight: 500 (label-md typography). On hover, the background darkens to #d1461f (shift -17% in lightness) with a smooth transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1). The button must never use box-shadow on hover; instead, rely on the color shift and cursor change to signal interactivity. **Button Secondary** uses transparent background with a 1px border at rgba(20, 18, 12, 0.22), same padding and height as primary, and text color {colors.on-surface} (#16140f). On hover, apply backgroundColor: {colors.surface-container-high} (#f4f0e7) to create a subtle fill effect. All buttons must have a minimum

Do's and Don'ts

**Do**

• Do use primary (#e2552c) exclusively for CTAs, active states, and focus indicators—it is the brand's signature accent and must never be diluted or overused.
• Do maintain the warm, earthy color palette (creams, warm grays, charcoal) as the foundation; the orange accent only works because the background is calm and restrained.
• Do apply consistent border-radius: 9px for buttons, 14px for cards, 8px for inputs—these proportions are distinctive and must not vary.
• Do use IBM Plex Mono for all labels, metadata, and UI chrome (11–14px, 0.12em tracking) to reinforce technical authority and visual hierarchy.
• Do ensure all interactive elements have a clear hover state with a 150–200ms transition; never rely on color alone—pair with shadow, background, or border changes.
• Do respect the spacing scale (12px sm, 24px md, 40px lg, 64px xl) for consistent rhythm; avoid arbitrary pixel values outside this system.

**Don't**

• Don't use the primary orange (#e2552c) for body text, backgrounds, or decorative elements—it must remain reserved for interactive moments and brand emphasis.
• Don't apply box-shadow to buttons on hover; instead, shift the background color or add a subtle border change to maintain the clean, minimalist aesthetic.
• Don't round corners beyond 14px on any component; excessive rounding (full pills) undermines the technical precision of the brand.
• Don't use system fonts (system-ui, -apple-system) for body text; always use Geist or Geist Fallback to maintain the warm, humanist character.
• Don't create new colors outside the defined palette; if you need a new tone, derive it from the existing surface stack or primary/secondary/tertiary roles.
• Don't apply multiple shadows or blur effects in sequence; the header's backdrop-filter: blur(14px) is the only glassmorphic treatment in the system.