Lambda — design system & UI screens
A cloud infrastructure platform for deploying supercomputers optimized for AI model training and inference workloads. The page features a dark, modern layout with a bold hero section showcasing the core value proposition, followed by numbered feature sections (You bring models, Your rules, Orchestration handled, Experts included), product capability highlights around scaling and security, and hardware specifications displayed as product cards in an "engines of superintelligence" section.
This is a static, crawlable rendering for search & AI engines. The interactive version — filters, live decode console, copy & export — is at https://mozaika.design/website/lambda.
Decoded design system
Lambda's decoded design system: background #0B0B0B, text #E7E6D9, accent #6236F4, link #A186F8, primary #6236F4; type scale h1 117.04px / h2 24px / body 12px; 4px spacing base; 0px base radius. The single interactive/action color is #6236F4 — used only on interactive or must-notice elements (buttons, links, key highlights), never on large fills.
Color roles
| Role | Value |
|---|---|
| bg | #0B0B0B |
| surface | #181817 |
| border | #2C2B29 |
| text | #E7E6D9 |
| text_muted | #93928A |
| primary | #6236F4 |
| accent | #6236F4 |
| link | #A186F8 |
| secondary | #FF0000 |
| button_bg | #6236F4 |
| button_text | #E7E6D9 |
Using these colors
- Action color
#6236F4— the single interactive color; only on things you click or must notice, never large fills. primary,accent,button_bgare all#6236F4— one role, not several (the action color).- accent
#6236F4— THE accent / action color — interactive & must-notice only (buttons, links, focus, one key highlight); never large fills or backgrounds. Scarcity is what makes it read as designed. - link
#A186F8— inline text links and link-styled controls. - secondary
#FF0000— optional secondary accent — LOW decode confidence; use rarely (a status color or a single decorative moment) or omit it entirely. Prefer one accent unless the reference clearly shows two.
Typography
- Heading: Suisse Intl
- Body: Suisse Intl
- Mono: Suisse Intl Mono
- h1: 117.04px
- h2: 24px
- body: 12px
Spacing
- base unit: 4px
- scale: 3px, 10px, 15px, 17px, 20px, 30px, 32px, 35px, 36px, 40px
Radii
- base: 0px
- button: 0px
Shadows (elevation)
- card:
rgb(231, 0, 0) -2px 0px 0px 0px, rgb(231, 230, 0) -4px 0px 0px 0px, rgb(0, 0, 217) 2px 0px 0px 0px, rgb(0, 230, 217) 4px 0px 0px 0px
Motion
Micro-interactions run at 100ms (dominant) with cubic-bezier(0.6, 0, 0.4, 1).
- durations: 100ms · 400ms · 600ms
- easings:
cubic-bezier(0.6, 0, 0.4, 1)·ease-in-out - animated properties: color, background, opacity, height
Native design tokens
| Token | Value |
|---|---|
--osano-clear-dialog-background | rgba(11,11,11,0) |
--osano-button-border-color | #42413e |
--osano-button-background-color | #0b0b0b |
--osano-button-foreground-color | #e7e6d9 |
--osano-dialog-background-color | #000000 |
--osano-dialog-foreground-color | #e7e6d9 |
--osano-info-dialog-overlay-color | rgba(0,0,0,0.45) |
--osano-link-color | #815ef8 |
--osano-toggle-off-track-color | #42413e |
--osano-toggle-off-thumb-color | #e7e6d9 |
…and 110 more measured on the page.
Button states (measured)
- primary hover: background
#815EF6 - primary focus: outline
2px solid rgb(98, 54, 244)
Layout (measured)
- container max-width:
1398px - nav: 101px fixed
- common grid: 2 columns
Motion choreography (measured)
Load order: div×2 → div → div._heroCard_1d0dg_1×3 → div.osano-cm-info-dialog__in×2 → div._animationContainer_15je
Scroll reveal: 5 elements rest at translateY(17px), animate in over 0.6s cubic-bezier(0.6, 0, 0.4, 1).
Stagger: div ×3 — 110ms apart.
Responsive (measured)
- breakpoints: 376px · 480px · 640px · 768px · 1024px · 1200px
- mobile (390px): hero 42px · nav inline
Full design system, per-section tokens & DESIGN.md / Tailwind / CSS exports →