---
title: "ORYZO AI design system"
variant: extended
source: https://oryzo.ai/
captured_at: 2026-10-12
theme: dark
industry: ai
generator: Design DNA (https://four.wiralomi.com/style/oryzo-ai)
ai_generated: true
ai_label: "本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。 / AI-assisted content"
---

# ORYZO AI · Design System

> Considered product design, staged like a cinematic workshop.

**Theme:** dark · **Industry:** ai · **Source:** https://oryzo.ai/ · **Captured:** 2026-10-12 (1440×900 desktop)

_AI-assisted content: values are measured from the public page at capture time; names, roles and guidance are model-written interpretations. Trademarks belong to their owners._

ORYZO pairs a near-black canvas and warm ivory typography with a full-bleed workshop image of its cork coaster. Oversized branding, compact navigation, and restrained supporting copy make the product photograph—not interface chrome—the focal point.

## North star

Let one cinematic, full-bleed product photograph lead; keep the warm ivory interface sparse and legible over it.

## Overview

The visual identity is anchored by a near-black brown canvas (#100904) and warm, pale ivory text (#ffedd7). In the opening viewport, the ivory wordmark and navigation sit over a cinematic, edge-to-edge workshop photograph; the image’s green cutting mat, cork, wood, and tools supply the dominant earthy hues, rather than acting as additional interface palette colours. Halyard Display Variable carries the typography throughout, shifting from an oversized, regular-weight wordmark to small uppercase navigation and captions, with readable sentence-case supporting copy. The layout treats the viewport as a composed product still: branding occupies the upper left, navigation the upper right, product and copy share the central area, and a small studio note sits low on the left. Elements float directly over the image instead of occupying a conventional card grid. Dotted rules and subtle overlays add structure while leaving the photography in control.

## Colors

| Name | Hex | Token | Group | Role |
|---|---|---|---|---|
| Roasted Umber | `#100904` | `--color-roasted-umber` | brand | Near-black brown canvas behind the opening hero and the large empty bands visible below it. |
| Warm Parchment | `#ffedd7` | `--color-warm-parchment` | neutral | High-contrast wordmark, navigation, hero copy, and small editorial captions over the image. |

### Semantic aliases

`--color-canvas` → `#100904` (Roasted Umber) · `--color-text` → `#ffedd7` (Warm Parchment) · `--color-text-muted` → `#100904` (Roasted Umber)

### Contrast (WCAG 2.x)

| Text | Background | Ratio | Level |
|---|---|---|---|
| `#ffedd7` | `#100904` | 17.26:1 | AAA |

### Gradients

- `repeating-linear-gradient(90deg, rgb(255, 237, 215) 0px, rgb(255, 237, 215) 2px, rgba(255, 237, 215, 0) 0px, rgba(255, 237, 215, 0) 4px)`

## Typography

| Family | Token | Source | Weights | Role | Free substitute |
|---|---|---|---|---|---|
| halyard-display-variable | `--font-body` | webfont | 500, 400 | Wordmark, navigation, headings, body copy, and uppercase captions. | DM Sans |

- **halyard-display-variable:** Use regular and medium weights; keep navigation and captions uppercase, while hero copy stays sentence case.

### Type scale — Major Third (ratio ≈ 1.258, base 18px)

| Role | Size | Weight | Line height | Letter spacing | Case | Family | Used for |
|---|---|---|---|---|---|---|---|
| h1 | 28.5px | 400 | 1.26 | 0 | — | halyard-display-variable | Large ORYZO wordmark over the upper-left hero image. |
| h2 | 24px | 500 | 1.09 | 0 | uppercase | halyard-display-variable | Uppercase section or product headings where present. |
| body | 18px | 400 | 1.33 | 0 | — | halyard-display-variable | Sentence-case product description and supporting studio copy. |
| caption | 12px | 500 | 1 | 0 | uppercase | halyard-display-variable | Compact uppercase studio credit and editorial labels. |
| nav | 12px | 500 | 1 | 0 | uppercase | halyard-display-variable | Small uppercase links aligned across the hero’s upper-right edge. |

## Spacing & layout

- Base unit **2px**, density **comfortable**.
- Scale (most used values): 2, 8, 9, 10, 12, 18, 24, 45 px.
- Section rhythm — · element gap 8px · card padding — · max content width —.

Treat the opening viewport as a full-bleed photographic canvas rather than a centered content container. Overlay the wordmark at upper left and a compact horizontal navigation at upper right; balance the product image with a short copy block toward the right. A small editorial credit anchors the lower-left area, with a scroll cue near the bottom. Keep content sparse and let large areas of dark canvas create a deliberate, quiet rhythm. Measurements do not establish a max-width or section-gap value.

## Shape & elevation

- Radius: xs `12px`
- Shadow `md` (other): `rgba(255, 140, 0, 0.6) 0px 0px 10px 3px`
- Shadow `inset` (other): `rgb(255, 160, 0) 0px 0px 3px 2px inset, rgb(224, 112, 16) 0px 0px 8px 4px inset`
- Motion: standard transition `0.18s ease` on interactive elements.

The interface is mostly flat, relying on image contrast and placement rather than cards or borders. A subtle translucent dark backing helps the lower-left studio note read over the photograph; a dotted horizontal rule provides a quiet divider. Measured orange glows may come from product or media details, so do not turn them into general elevation styling.

## Imagery

Use tactile, carefully staged product photography: the hero shows a cork coaster on a gridded cutting mat among workshop tools. Frame it as an overhead tabletop scene, full bleed, with warm directional light and a restrained cinematic finish. Earthy greens, wood, and cork belong to the photograph, not the measured interface palette. A small video-style thumbnail appears near the bottom edge.

## Components

### Hero wordmark

Oversized, regular-weight warm ivory lettering over the upper-left area of the workshop photograph.

### Hero navigation

Compact uppercase links in warm ivory, placed along the upper-right edge over the image.

### Product description

Short, sentence-case copy over the right side of the hero, kept visually subordinate to the coaster.

### Studio credit

Small uppercase editorial note in a subtly backed lower-left image overlay, followed by a dotted divider and brief supporting copy.

### Scroll cue

Small low-contrast indicator and label near the bottom edge, inviting the visitor to continue.

### Video thumbnail

Small media preview near the lower-right edge, framed as a detail rather than a primary CTA.

### Measured component styles

- **Navigation item** (“I I N N T T R R O O F F E E A A T T U U ”): transparent background · text #ffedd7 · radius 0px · padding 0px · 500 12px halyard-display-variable · uppercase

## Do

- Use #100904 as the measured dark canvas.
- Set interface text in #ffedd7.
- Make the product photograph the hero’s focal point.
- Keep navigation uppercase, compact, and unobtrusive.
- Layer text directly over imagery with careful contrast.
- Use earthy image colours as photography, not extra UI tokens.

## Don't

- Do not invent extra interface palette hex values.
- Do not replace the hero with a card-based layout.
- Do not add bright gradients or decorative colour bands.
- Do not crowd the hero with lengthy copy.
- Do not mistake image-derived green and cork tones for measured brand colours.
- Do not add heavy shadows or prominent borders.

## Agent prompt

Build a new page in ORYZO’s cinematic product-editorial style. Use Roasted Umber (#100904) for the measured dark canvas and Warm Parchment (#ffedd7) for interface text; do not promote colours found only in product photography into UI tokens. Lead with one large, full-bleed, tactile product photograph, then overlay a bold wordmark, discreet uppercase navigation, and a concise supporting copy block. Use Halyard Display Variable when available, with DM Sans as a free substitute; combine regular and medium weights and keep labels uppercase. Favor direct image overlays, sparse editorial captions, and subtle dotted separators over cards, grids, or decorative borders. Preserve generous visual breathing room, maintain readable contrast, and let the product remain the primary focus.

## Page sections (top to bottom)

| # | Type | Layout | UX patterns | UI patterns |
|---|---|---|---|---|
| 1 | hero | Full-bleed workshop photograph with overlaid wordmark, compact top navigation, right-side description, and low-edge editorial details. | top-level navigation, scroll cue, video preview | full-bleed product photography, text overlay, dotted divider, uppercase labels |

## Source CSS custom properties (selected)

```css
--display-font: "halyard-display-variable";
--text-font: "halyard-text-variable";
--grid-gap-scale: calc(24 / 90);
--grid-gap-width: calc((100vw - 3.125vw * 2) / ((16 / calc(24 / 90)) + 16 - 1));
--color-white: #ffedd7;
--color-white-transparent: #ffedd700;
--color-black: #100904;
--color-black-transparent: #10090400;
--color-grey-brown: #6c5f51;
--color-green: #445231;
--color-green-light: #5d6c49;
--color-green-lightest: #f6e0c6;
--color-pure-white: #fff;
--color-pure-black: #000;
--color-orange: #dc5000;
--color-brown: #382416;
```

---
本文件由 AI 辅助生成：数值取自公开网页的实测样式，命名、用途说明与建议为模型解读。商标归原所有者。
Generated by Design DNA · https://four.wiralomi.com/style/oryzo-ai