Oryzo — Design System Reference

1. Visual Theme & Atmosphere

Oryzo is a straight-faced product launch for “the world’s most unnecessarily sophisticated cork coaster” — a deadpan parody of AI hype, built by the award-winning studio Lusion. The craft is the joke: the page treats a humble cork disc with the reverent visual language of a flagship silicon launch, so the design has to be genuinely premium for the satire to land. The canvas is a warm, edible palette — cork-cream text on near-black, with a single molten-orange accent that reads like a heat warning. Everything is set in the Halyard variable family, held at a confident medium weight and pushed almost entirely to uppercase, giving the page the clipped, technical cadence of a spec sheet. The atmosphere is luxurious, dry-humored, and obsessively considered: a coaster rendered as if it were a frontier AI model.

2. Color Palette & Roles

Foundation

• rgb(255, 237, 215) (#ffedd7) — cork-cream, the primary text/ink and brand “white”; never pure white
• rgb(16, 9, 4) (#100904) — espresso black, the page ground and inverted text
• rgb(56, 36, 22) (#382416) — brown, secondary link/surface fill

Accent

• rgb(220, 80, 0) (#dc5000) — molten orange, the single hot accent: primary buttons, focus borders, progress chips. Used sparingly, like a thermal cue.

Earth / sustainability greens (scoped to the sustainability section only)

• rgb(68, 82, 49) (#445231) — deep olive
• rgb(93, 108, 73) (#5d6c49) — lighter olive
• rgb(246, 224, 198) (#f6e0c6) — pale oat (the green section’s inverted card)

Neutrals

• rgb(108, 95, 81) (#6c5f51) — grey-brown, muted progress/meta surfaces
• rgba(32, 25, 20, 0.75) / rgba(12, 10, 10, 0.92) / rgba(0, 0, 0, 0.9) — layered scrim overlays for media and WebGL canvases

The system is fundamentally bi-tonal — cork-cream on espresso — with orange as the only saturated voice. Greens are a guest palette that appears only where the copy turns to sustainability, never as global chrome.

3. Typography Rules

Oryzo runs two variable faces: Halyard Display (--display-font) for nearly everything visible, and Halyard Text (--text-font) reserved for longer reading copy, with DM Mono for technical/spec annotations. Hierarchy is driven by size and the uppercase switch, not by dramatic weight contrast — most type sits at weight 500.

Typefaces

• Halyard Display Variable — headlines, sub-heads, labels, links: the brand voice
• Halyard Text Variable — body / reading copy
• DM Mono — <pre> blocks, spec callouts, the “model card” technical texture

Scale (desktop; sizes scale fluidly, hence the fractional px)

Principles

• The headline is the only place with negative tracking (-1.23px) and tight leading (line-height below font-size) — it sets densely, like a hero stamp.
• Everything structural — H2 through labels and links — is uppercase. Lowercase is reserved for the H1 and reading body, so the page reads as “loud spec sheet, quiet prose.”
• Weight is nearly constant (500, with 600 only at the smallest H5) — size and case do the hierarchy work.
• Mono (DM Mono) carries the “AI model card” gag: spec tables, temperature sliders, encryption demos all wear monospace to feel machine-authored.

4. Component Stylings

Primary buttons

• Background rgb(220, 80, 0) (orange), text rgb(16, 9, 4) (espresso), matching dark border — a hot, solid stamp.
• A secondary button variant inverts to cork-cream rgb(255, 237, 215) background with espresso text.

Links

• Filled brown rgb(56, 36, 22) background, cork-cream text, transparent orange border that animates in on interaction.

Product option chips (product-hero-option-item)

• Brown rgb(56, 36, 22) fill, cork-cream text, live orange rgb(220, 80, 0) border — the selected/interactive state of the hero configurator.

Spec / mono blocks (<pre>)

• Translucent cork tint rgba(255, 237, 214, 0.11) over the dark ground, cork-cream mono text — a faint card that reads as a code/console panel.

Border radius

• 20px, 12.5px for cards and panels; 50% / 100% for the many circular elements (the coaster itself, dials, badges). Roundness is a literal motif — the copy brags it’s “now 37.9% more circular.”

Shadows

• None in the extracted system. Depth comes from layered dark scrims over 3D/WebGL, not soft shadows.

5. Layout Principles

• The page is a vertically-scrolling “launch deck”: full-bleed dark sections, each one a self-contained gag (model card, encryption demo, sustainability stats, testimonials), interleaved with WebGL/video product hero moments.
• Numeric/technical callouts (255678, T = 10 / T = 1 / T = 0.1, friction coefficients, harvest ages) are treated as first-class layout objects — big mono numerals act as section anchors, mimicking a benchmark report.
• A single decisive accent (orange) punctuates an otherwise cork-on-black field, so the eye is led by warmth, not by boxes.
• Media and 3D canvases sit under graduated black scrims (rgba(12,10,10,0.92) → rgba(0,0,0,0.9)) so text stays legible over motion.

6. Depth & Elevation

Depth is built from scrims and 3D, not from shadow:

• Layered overlays — a stack of near-black translucent panels (rgba(32, 25, 20, 0.75), rgba(12, 10, 10, 0.92), rgba(0, 0, 0, 0.9)) darken WebGL/video so foreground type floats above the simulation.
• Surface tints — the rare lifted card is a whisper-light cork tint (rgb(246, 224, 198), luminance 0.89) on the cream ground, or a faint rgba(255,237,214,0.11) panel on the dark ground.
• The real depth is the canvas — a Lusion-grade interactive 3D coaster and fluid/Fresnel effects supply the actual sense of dimension; the CSS layer stays deliberately flat so the WebGL reads as the hero.

No box-shadow in the system.

7. Do’s and Don’ts

Do

• Use cork-cream #ffedd7 as the brand “white” and espresso #100904 as the ground — never pure white or pure black for content.
• Set structural type (sub-heads, labels, links) in uppercase Halyard Display at weight 500; reserve lowercase for the H1 and reading copy.
• Let one molten-orange #dc5000 carry every primary action and hot accent; keep the rest bi-tonal.
• Wear DM Mono for any “technical” element — specs, sliders, numbers, console gags — to sell the AI-model-card conceit.
• Lean into circles: 50%/100% radii, dials, the coaster itself.
• Stack dark translucent scrims over 3D/video so type stays readable on motion.

Don’t

• Don’t introduce pure #ffffff or #000000 for surfaces or text — the warmth is the brand.
• Don’t add drop shadows for elevation — use scrim layering and the 3D canvas instead.
• Don’t let the greens leak outside the sustainability context; they are a scoped guest palette.
• Don’t over-use orange — its power is its scarcity.
• Don’t set big headings with positive tracking; the H1 wants tight, dense, slightly negative spacing.

8. Responsive Behavior

A single hard breakpoint near 768px (767.98 / 768) splits mobile from desktop. A dedicated mobile-only espresso surface (rgb(16, 9, 4)) swaps in for small screens. Type sizes are fluid (note the fractional px values like 68.3333px) rather than stepped, so the dense uppercase rhythm holds from phone to desktop. The heavy WebGL/3D moments are the main responsive consideration — they degrade to video/poster frames where the live canvas is too costly.

9. Agent Prompt Guide

Build a UI that matches Oryzo’s design language.

Set the ground to espresso #100904 and all text to cork-cream #ffedd7 — never pure black or white. Use Halyard Display (a humanist variable sans) for headlines, sub-heads, labels, and links, all at weight 500; push everything structural to UPPERCASE and keep only the big H1 and reading body in lowercase. The H1 is large (~68px), with tight leading and slightly negative tracking, so it sets as a dense hero stamp. Use a single molten-orange #dc5000 for every primary button (orange fill, espresso text, dark border) and for live focus/selection borders — keep the rest of the page strictly cork-on-espresso. Render any “technical” element — spec tables, sliders, big benchmark numerals, console gags — in DM Mono to sell a deadpan AI-model-card tone. Use circular shapes generously (border-radius: 50%/100%) and modest 12.5–20px radii on cards. Add no drop shadows; build depth by stacking near-black translucent scrims (rgba(0,0,0,0.9) and friends) over video or WebGL, and let an interactive 3D hero supply the real dimension. Reserve a small olive-green palette (#445231, #5d6c49, #f6e0c6) strictly for a sustainability section. Keep the whole thing premium, dry, and over-engineered — the polish is the punchline.

Generated by Sparkbites — extracted from live CSS analysis