ORYZO AI

Overview

ORYZO AI represents a new category of premium physical products reimagined for the artificial intelligence era—where tactile precision meets intelligent functionality. The brand serves discerning users who refuse to compromise between aesthetic refinement and technological capability, evoking a sense of considered luxury through every interaction. The design language draws from **Architectural Minimalism with Organic Warmth**: a palette of deep charcoal (#100904) and cream (#ffedd7) anchors the visual system, while a vibrant burnt-orange accent (#dc5000) punctuates moments of interaction and emphasis. The emotional response is one of quiet confidence—users feel they've discovered something rare, engineered with intention, and built to last.

The brand voice is precise, unhurried, and deeply considered. Vocabulary favors concrete, tactile language: "grip-locked," "insulate," "lift," "flip encryption"—words that ground abstract technology in physical reality. The tone never rushes or oversells; instead, it invites users to notice the details. Example: "Designed to lift, insulate, and grip in all the right ways. Oryzo makes the simplest moment feel considered."

Colors

The color system is rooted in natural materials and refined restraint. **Primary (#dc5000)** is the burnt-orange accent reserved exclusively for call-to-action buttons, interactive states, and moments of emphasis—it commands attention without aggression. **Surface (#100904)** is a near-black that serves as the dominant background, creating a canvas that makes the cream text (#ffedd7) sing with clarity and reduces eye strain in low-light environments. **Secondary (#445231)** is a muted sage-green used for supporting UI elements, badges, and secondary containers, evoking natural materials and grounding the interface in the physical world. **Tertiary (#6c5f51)** is a warm taupe that bridges the gap between surface and text, used for dividers, outlines, and tertiary interactive states. The sur

Typography

The type system pairs **halyard-display-variable** (a geometric, high-contrast display font) for headlines and UI labels with **halyard-text-variable** (a humanist text font) for body copy, creating a sophisticated hierarchy that balances precision with warmth. Display (109px, 500 weight, -0.02em tracking) commands attention on hero sections; headline-lg (68px) anchors major sections; headline-md (45px) introduces subsections; body-lg (38px, 400 weight) carries narrative content with generous line-height (48px) for readability. All labels use 500 weight with 0.02–0.05em positive letter-spacing and uppercase transformation, reinforcing the brand's architectural precision. On small labels over busy backgrounds or interactive elements, apply text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) to ensure

Layout

The layout system uses a 16-column fluid grid with a dynamic gap scale (0.267 ratio) that adapts to viewport width, ensuring proportional spacing across devices. The container max-width is 1280px, with site padding of 3.125vw on left and right, creating a responsive gutter that scales with the viewport. The grid-gap-width and grid-column-width are calculated dynamically via CSS custom properties, allowing the layout to breathe on desktop (1920px) while remaining compact on mobile (375px). Vertical rhythm is established through a row-height system (derived from site-padding-x × 8 ÷ 60) that governs section spacing: lg spacing (40px) separates major sections, md spacing (24px) groups related content, and sm spacing (12px) provides breathing room within components. The page rhythm alternates

Elevation & Depth

Depth is conveyed through a restrained shadow system and subtle surface-container transitions rather than dramatic layering. **Level 1 (Base)**: The background canvas (#100904) with a fixed Three.js canvas providing subtle animated depth. **Level 2 (Standard Cards & Inputs)**: surface-container (#100904) with box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15), creating a soft separation from the base. **Level 3 (Elevated Modals & Overlays)**: surface-container-highest (#24201a) with box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2), establishing clear hierarchy. Interactive elements (buttons, especially the da

Shapes

The shape philosophy is **Precision with Warmth**: sharp corners and geometric forms dominate the interface, reflecting the brand's technical sophistication, while strategic use of rounded corners humanizes key interactive moments. Buttons use border-radius: 32px (3em in relative units), creating a pill shape that feels approachable and clickable without sacrificing modernity. Cards and containers use 16px (1rem) border-radius, providing subtle softening that prevents the interface from feeling cold or austere. Input fields and form elements use 0px border-radius (sharp corners) with a bottom

Components

Action Elements Buttons are the primary interaction mechanism and use a high-contrast, intentional design language. **button-primary** (#dc5000 background, #100904 text, 32px border-radius, 12.8px 21.3px padding) is reserved for primary CTAs and uses a 0.18s ease-in-out transition to background-color on hover, shifting to primary-fixed-dim (#f0d4b0) to indicate state change without jarring the user. **button-secondary** uses secondary color (#445231) with the same padding and border-radius, transitioning to secondary-container (#5d6c49) on hover. **button-dark** is a variant for dark backgrounds, featuring a 2px dashed border at rgba(220, 80, 0, 0) that transitions to a solid border and inset glow (box-shadow: inset 0 0 12px rgba(220, 80, 0, 1)) on hover, creating a sense of depth and

Do's and Don'ts

**Do**

• Do use primary (#dc5000) exclusively for CTAs, focus states, and moments of emphasis—never for backgrounds or body text.
• Do maintain the 16-column grid structure and respect the dynamic gutter scale; never hardcode pixel values for layout spacing.
• Do apply uppercase letter-spacing (0.02–0.05em) to all UI labels and buttons to reinforce the brand's architectural precision.
• Do use the surface-container stack (lowest through highest) to create subtle depth; avoid shadows with spread radius > 3px.
• Do pair halyard-display-variable with halyard-text-variable to maintain the geometric-meets-humanist aesthetic across all typography.

**Don't**

• Don't use secondary (#445231) or tertiary (#6c5f51) as primary interactive colors; they are supporting accents only.
• Don't apply border-radius > 32px to buttons or interactive elements; maintain the precision-first philosophy.
• Don't use box-shadow with blur-radius > 24px or spread-radius > 3px; keep shadows tight and controlled.
• Don't mix halyard fonts with system fonts or generic sans-serif fallbacks; always specify the full font stack with fallback to serif.
• Don't reduce the contrast ratio between on-surface (#ffedd7) and surface (#100904) below 16:1; accessibility is non-negotiable.