Lambda — design system & UI screens
Dark AI-cloud landing; 'The Superintelligence Cloud' eyebrow over a giant condensed headline, Launch-GPU and Talk-to-team CTAs, and a three-column value row (You bring models, Your supercomputer, Experts included).
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 →