Cartica

Generated Oct 14, 2026

DESIGN.md for oryzo.ai

oryzo.ai5 colors3 componentshalyard-display-variable

Remix

2 screenshots captured· oryzo.ai

1 / 2 · ORYZO AI · Above the fold

Preview

the generated design system

Switch between the rendered Visual preview and the Raw DESIGN.md.

Design tokens

version: alpha
name: Oryzo
description: |
  ORYZO embodies a refined, material-driven aesthetic that merges craftsmanship
  with technological innovation. The design system is rooted in natural, earthy
  warmth—terracotta and warm browns dominate the palette—set against a deep,
  near-black canvas that provides dramatic contrast and draws focus to content
  and product imagery. The typography is deliberately uppercase and geometric,
  signalling precision and forward-thinking design. This is a brand that
  respects minimalism and functional elegance: every element serves a purpose,
  whitespace is generous, and the overall impression is one of understated
  luxury paired with cutting-edge thinking. The visual language suggests a
  physical product reimagined through an AI lens—grounded, tactile, yet
  intellectually ambitious.
source:
  url: "http://oryzo.ai"
  pagesAnalyzed: 1
  extractedAt: 2026-10-14
  tokensMeasured: true
colors:
  primary: "#382416"
  link: "#DC5000"
  canvas: "#100904"
  on-primary: "#FFEDD7"
  ink: "#FFEDD7"
  accent-1: "#BBAC97"
typography:
  display-lg:
    fontFamily: halyard-display-variable
    fontSize: 51px
    fontWeight: 500
    lineHeight: 0.9
    letterSpacing: 0px
    textTransform: uppercase
  display-md:
    fontFamily: halyard-display-variable
    fontSize: 40.8px
    fontWeight: 500
    lineHeight: 0.9
    letterSpacing: 0px
    textTransform: uppercase
  heading:
    fontFamily: halyard-display-variable
    fontSize: 24px
    fontWeight: 500
    lineHeight: 1.09
    letterSpacing: 0px
    textTransform: uppercase
  body-lg:
    fontFamily: halyard-display-variable
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.33
    letterSpacing: 0px
  body-lg-strong:
    fontFamily: halyard-display-variable
    fontSize: 18px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0px
    textTransform: uppercase
  body-md:
    fontFamily: halyard-display-variable
    fontSize: 15px
    fontWeight: 500
    lineHeight: 4
    letterSpacing: 0px
    textTransform: uppercase
  body-sm:
    fontFamily: halyard-display-variable
    fontSize: 13.5px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
    textTransform: uppercase
  body-xs:
    fontFamily: halyard-display-variable
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1
    letterSpacing: 0px
    textTransform: uppercase
  button:
    fontFamily: Arial
    fontSize: 7.5px
    fontWeight: 500
    letterSpacing: 0px
    textTransform: uppercase
  label-xs:
    fontFamily: halyard-display-variable
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.09
    letterSpacing: 0px
    textTransform: uppercase
  label-xs-arial:
    fontFamily: Arial
    fontSize: 12px
    fontWeight: 500
    lineHeight: 1.1
    letterSpacing: 0px
    textTransform: uppercase
  caption:
    fontFamily: halyard-display-variable
    fontSize: 9.6px
    fontWeight: 500
    lineHeight: 1.2
    letterSpacing: 0px
    textTransform: uppercase
rounded:
  none: 0px
  full: 9999px
spacing:
  xxs: 8px
  xs: 12px
  sm: 20px
  md: 24px
  lg: 44px
borderWidths:
  thin: 1px
  medium: 2px
elevationStrategy: color-blocking
themes:
  derived: light   # the other theme is the site's measured palette
  light:
    bg: "#FBFBFB"
    surface: "#F1F1F1"
    surfaceRaised: "#E9E9E9"
    text: "#131211"
    textMuted: "#747473"
    border: "#D8D8D8"
    accent: "#382416"
    accentFg: "#FFFFFF"
    focusRing: "#382416"
    elevation: shadow
  dark:
    bg: "#100904"
    surface: "#100904"
    surfaceRaised: "#231D18"
    text: "#FFEDD7"
    textMuted: "#AB9D8D"
    border: "#2D241D"
    accent: "#815333"
    accentFg: "#FFFFFF"
    focusRing: "#382416"
    elevation: "border+surface"
components:
  button-primary:
    textColor: "{colors.ink}"
    height: 45.9688px
    padding: "14.4px 24px 14.4px 24px"
    fontSize: 12px
    fontFamily: halyard-display-variable
    fontWeight: 500
    lineHeight: 1.1
    rounded: 36px
    backgroundColor: "{colors.primary}"
  button-outline:
    typography: "{typography.button}"
    textColor: "{colors.ink}"
    border: "1px dashed {colors.on-primary}"
    height: 27px
    padding: "7.5px 0px 7.5px 0px"
    rounded: 22.5px
  button-icon:
    textColor: "{colors.ink}"
    height: 33.3281px
    fontSize: 13.3333px
    fontFamily: Arial
    fontWeight: 400
  navigation:
    typography: "{typography.body-xs}"
    textColor: "{colors.ink}"
    height: 12px
  link:
    typography: "{typography.body-xs}"
    textColor: "{colors.ink}"
  link-2:
    typography: "{typography.body-sm}"
    textColor: "{colors.ink}"
states:
  nav-hover:
    target: nav
    state: hover
    opacity: 1
  button-hover:
    target: button
    state: hover
    backgroundColor: "rgba(0, 0, 0, 0.7)"
  other-hover:
    target: other
    state: hover
    filter: "saturate(1) brightness(1)"
    opacity: 1
  button-disabled:
    target: button
    state: disabled
    opacity: 0.4
breakpoints:
  - width: 375
    containerWidth: 375
    gridColumns: 1
    navLinksVisible: 0
    menuToggleVisible: false
    headingPx: 38
    bodyPx: 12
    sectionPaddingX: 0
  - width: 768
    containerWidth: 768
    gridColumns: 3
    navLinksVisible: 4
    menuToggleVisible: false
    headingPx: 27
    bodyPx: 7
    sectionPaddingX: 0
  - width: 1024
    containerWidth: 1024
    gridColumns: 3
    navLinksVisible: 4
    menuToggleVisible: false
    headingPx: 36
    bodyPx: 10
    sectionPaddingX: 0
  - width: 1280
    containerWidth: 1280
    gridColumns: 3
    navLinksVisible: 4
    menuToggleVisible: false
    headingPx: 45
    bodyPx: 12
    sectionPaddingX: 0
  - width: 1440
    containerWidth: 1440
    gridColumns: 3
    navLinksVisible: 4
    menuToggleVisible: false
    headingPx: 51
    bodyPx: 14
    sectionPaddingX: 0
coverage:
  statesFound: 8
  gradientsFound: 0
  rolesUnassigned: 1
  archetypesUnnamed: 0
  archetypesDetected: 0
  responsiveMeasured: true
  stylesheetsBlocked: false
  semanticRampDeclared: false

Design System Inspired by ORYZO

1. Visual Theme & Atmosphere

ORYZO embodies a refined, material-driven aesthetic that merges craftsmanship with technological innovation. The design system is rooted in natural, earthy warmth—terracotta and warm browns dominate the palette—set against a deep, near-black canvas that provides dramatic contrast and draws focus to content and product imagery. The typography is deliberately uppercase and geometric, signalling precision and forward-thinking design. This is a brand that respects minimalism and functional elegance: every element serves a purpose, whitespace is generous, and the overall impression is one of understated luxury paired with cutting-edge thinking. The visual language suggests a physical product reimagined through an AI lens—grounded, tactile, yet intellectually ambitious.

Key Characteristics

Deep, near-black (#100904) canvas with warm, organic accent colors
Uppercase, geometric typography in a variable display font
Terracotta and warm brown as primary brand anchors
Minimal ornamentation; color-blocking creates depth
High contrast between dark backgrounds and cream/beige text
Circular, pill-shaped interactive elements (buttons, badges)
Generous whitespace and measured spacing
Elevation through surface color change, not shadow layering

2. Color Palette & Roles

Primary

Brand Primary ({colors.primary} — #382416): Primary CTA backgrounds, active states, and brand accent elements. Used for filled buttons and key interactive touchpoints.

Interactive

Link ({colors.link} — #DC5000): Inline link color; a warm orange-red that stands out against dark backgrounds for clear affordance.

Neutral Scale

Canvas ({colors.canvas} — #100904): Default page background; a near-black that anchors the entire visual hierarchy.
On Primary ({colors.on-primary} — #FFEDD7): Primary text, headings, and labels; a warm cream used on brand surfaces and as body text for maximum legibility.

Accent & Decorative

Accent ({colors.accent-1} — #BBAC97): Decorative accent without a defined semantic role; a warm, muted taupe used for subtle visual variety.

3. Typography Rules

Font Family

Primary: Halyard Display Variable, fallback to sans-serif
Secondary: Arial, fallback to sans-serif

Hierarchy

Role	Font	Size	Weight	Line Height	Letter Spacing	Notes
Display Large	Halyard Display Variable	51px	500	0.9	0px	Uppercase; hero and major headings
Display Medium	Halyard Display Variable	40.8px	500	0.9	0px	Uppercase; large section headers
Heading	Halyard Display Variable	24px	500	1.09	0px	Uppercase; subsection titles
Body Large	Halyard Display Variable	18px	400	1.33	0px	Standard body text; regular weight
Body Large Strong	Halyard Display Variable	18px	500	1	0px	Uppercase; emphasis text
Body Medium	Halyard Display Variable	15px	500	4	0px	Uppercase; body highlights
Body Small	Halyard Display Variable	13.5px	500	1.2	0px	Uppercase; link text
Label XS	Halyard Display Variable	12px	500	1.09	0px	Uppercase; form labels
Label XS (Arial)	Arial	12px	500	1.1	0px	Uppercase; form inputs
Body XS	Halyard Display Variable	12px	500	1	0px	Uppercase; list items
Caption	Halyard Display Variable	9.6px	500	1.2	0px	Uppercase; fine print
Button	Arial	7.5px	500	not measured	0px	Uppercase; outline button text

Principles

All text is uppercase, reinforcing a bold, geometric aesthetic
Halyard Display Variable is the primary typeface for hierarchy and expression
Line height ratios are tightly controlled (0.9 for display, 1.0–1.33 for body), creating dense, precise layouts
Weight is consistently 500 (medium) across most scales, with body large as the exception at 400 (regular)
Legibility on dark backgrounds is ensured through high-contrast cream text
Letter spacing is uniform at 0px; the tight tracking enhances the geometric, engineered feel

4. Component Stylings

Buttons

Primary Button

Background: {colors.primary} (#382416)
Text Color: {colors.on-primary} (#FFEDD7)
Font: Halyard Display Variable, 12px, weight 500, uppercase
Padding: 14.4px 24px
Border Radius: {rounded.full} (36px pill shape)
Border: 2px solid rgba(220, 80, 0, 0) (transparent border)
Width: 153px
Height: 45.9688px
Box Shadow: none
Hover State: Background darkens via --btn-active-color; text color updates via --btn-active-text-color

Outline Button

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.on-primary} (#FFEDD7)
Font: Arial, 7.5px, weight 500, uppercase
Padding: 7.5px 0px
Border Radius: {rounded.full} (22.5px pill shape)
Border: 1px dashed #FFEDD7
Width: 67.5px
Height: 27px
Box Shadow: none
Hover State: Background becomes rgba(0, 0, 0, 0.7); opacity may shift to 0.7

Icon Button

Background: rgba(0, 0, 0, 0) (transparent)
Text Color: {colors.on-primary} (#FFEDD7)
Font: Arial, 13.3333px, weight 400
Padding: 0px (no padding)
Border Radius: {rounded.none} (0px; sharp corners)
Border: none
Width: 33.3281px
Height: 33.3281px
Box Shadow: none
Hover State: filter: saturate(1) brightness(1); opacity: 1; may scale to 1.2

Navigation

Font: Halyard Display Variable, 12px, weight 500, uppercase
Text Color: {colors.on-primary} (#FFEDD7)
Background: rgba(0, 0, 0, 0) (transparent)
Border Radius: {rounded.none} (0px)
Border: none
Padding: 0px
Hover State: Opacity toggles between 1 and 0.5 depending on context

5. Layout Principles

Spacing System

Base unit: 4px (derived from measured scale)

{spacing.xxs} = 8px: Tight micro-spacing for related elements
{spacing.xs} = 12px: Small gaps between labels and inputs; fine spacing
{spacing.sm} = 20px: Standard spacing between small components
{spacing.md} = 24px: Medium section spacing; between related content blocks
{spacing.lg} = 44px: Large breathing room; between major sections

Grid & Container

Single-column layout on mobile (375px viewport)
Three-column grid on tablet and above (768px+)
No maximum container width enforced; content spans full viewport width
Section padding is 0px horizontally across all breakpoints (full-bleed layout)
Vertical rhythm governed by semantic spacing scale

Whitespace Philosophy

Whitespace is generous and intentional. The design favors open space around focal points (product imagery, headings) rather than compressed layouts. This reinforces the premium, unhurried aesthetic and ensures legibility on dark backgrounds. Vertical rhythm is controlled through the spacing scale, creating visual breathing room between sections.

Border Radius Scale

{rounded.none} = 0px: Used on input fields, images, and icon buttons; creates sharp, geometric lines
{rounded.full} = 9999px: Used on primary and outline buttons (pill-shaped), creating soft, circular affordances

Border Widths

Thin = 1px: Applied to outline buttons for delicate borders
Medium = 2px: Applied to primary button borders (though typically transparent)

6. Depth & Elevation

The ORYZO design system uses color-blocking rather than shadow layering to create depth. Elevation is achieved through surface color changes—the near-black canvas ({colors.canvas}) recedes, while elements in brand colors ({colors.primary}) advance. Interactive elements (buttons) rise through opacity changes, scale transforms, and background color shifts rather than shadow growth.

Elevation Strategy: Color-Blocking

No multi-tiered shadow system exists
Depth is implied through contrast and color hierarchy
Interactive hover states employ opacity shifts and scale transforms to indicate lift

Opacity Levels

20% (0.20): Subtle transparency for secondary elements or disabled text
34% (0.34): Light overlay or muted layer
40% (0.40): Moderate transparency for disabled buttons or inactive states
46% (0.46): Reserved opacity for specific hover or active states
50% (0.50): Mid-tone transparency for navigation hover states
60% (0.60): Heavier transparency for secondary content
70% (0.70): Disabled button opacity; near-opaque but visually diminished
100% (1.0): Full opacity for primary, active elements

Z-index / Layering

Base = 1, 9: Standard document flow and minor overlay elements
Dropdown = 10, 11, 20, 99: Contextual menus and popovers, with 99 reserved for top-most overlays
Sticky = 100: Fixed/sticky positioned elements (e.g., navigation, headers)

7. Do's and Don'ts

Do

Use uppercase typography consistently across all text roles to reinforce the geometric, engineered aesthetic
Pair dark canvas backgrounds ({colors.canvas}) with cream text ({colors.on-primary}) for maximum legibility and contrast
Apply pill-shaped border radii ({rounded.full}) to interactive buttons to signal affordance and softness
Build spacing and rhythm using the semantic scale ({spacing.xxs} through {spacing.lg}) to maintain visual coherence
Leverage color-blocking (background color changes) to create depth instead of layering shadows
Respect full-bleed, edge-to-edge layouts on mobile; reserve padding for internal content hierarchy
Test buttons and interactive elements with hover states (opacity, scale, background color shifts) to signal interactivity

Don't

Introduce decorative shadows or complex elevation systems; the brand intentionally avoids layered depth
Mix uppercase and lowercase typography arbitrarily; all UI text should be uppercase unless explicitly overridden
Use gray or secondary neutrals in place of {colors.primary} or {colors.link} for key interactions; the warm, high-contrast palette is a defining trait
Apply sharp corners ({rounded.none}) to primary buttons; reserve 0px radius for inputs and icon buttons only
Reduce whitespace in pursuit of density; the generous spacing is integral to the premium feel
Introduce semantic colors (red, green, yellow) for status states; the brand has not declared these roles

8. Responsive Behavior

Breakpoints

Viewport	Content Width	Grid Columns	Nav Links Visible	Largest Heading Size	Body Text Size	Section Padding-X
375px (mobile)	375px	1	0	38px	12px	0px
768px (tablet)	768px	3	4	27px	7px	0px
1024px (desktop)	1024px	3	4	36px	10px	0px
1280px (wide)	1280px	3	4	45px	12px	0px
1440px (ultra-wide)	1440px	3	4	51px	14px	0px

Touch Targets

Primary buttons: minimum 45.9688px height (exceeds 44px recommended minimum)
Outline buttons: 27px height; smaller secondary touch target
Icon buttons: 33.3281px × 33.3281px; compact but accessible
Navigation links: 12px font with line-height 1; tap area should be padded to 44px minimum on touch devices

Collapsing Strategy

Mobile (375px): Single-column layout; all multi-column grids collapse to full-width stacks; heading and body text shrink slightly for mobile viewport
Tablet (768px+): Three-column grid activates; all 4 navigation links become visible; headings and body text scale up moderately
Desktop (1024px+): Full three-column layout sustained; heading size continues to scale with viewport; whitespace increases proportionally
Typography scaling: Heading size is viewport-responsive, scaling from 38px on mobile to 51px on ultra-wide; body text scales from 12px to 14px

9. Agent Prompt Guide

Quick Color Reference

Primary CTA & Brand Accent: Brand Primary ({colors.primary} — #382416)
Background: Canvas ({colors.canvas} — #100904)
Heading & Primary Text: On Primary ({colors.on-primary} — #FFEDD7)
Link Color: Link ({colors.link} — #DC5000)
Decorative Accent: Accent ({colors.accent-1} — #BBAC97)

Iteration Guide

All text is uppercase. Every label, button, heading, and body copy uses uppercase typography. Apply text-transform: uppercase globally or use uppercase font variants.
Dark canvas with cream text. Page background is #100904; primary text and labels are #FFEDD7. This high-contrast pair is non-negotiable for legibility and brand recognition.
Buttons are pill-shaped. Primary and outline buttons use border-radius: 9999px (or 36px / 22.5px for proportional pill shapes). Icon buttons and inputs remain sharp (border-radius: 0px).
Spacing follows the semantic scale. Use 8px, 12px, 20px, 24px, and 44px for all margins, paddings, and gaps. Do not invent intermediate values.
Depth via color, not shadow. Avoid box-shadows; instead, change background colors, opacity, or scale transforms on hover/active states. Color-blocking is the elevation method.
Typography is Halyard Display Variable. Use this variable font for all primary UI text. Arial is reserved for small buttons and form inputs only.
Full-bleed, zero-padding layouts. Content spans edge-to-edge on all viewports. Do not add fixed horizontal padding to the page wrapper; padding exists only within content components.
Responsive typography. Heading sizes are viewport-dependent: scale from ~38px on mobile to ~51px on ultra-wide. Use CSS clamp() or viewport-based calc for smooth scaling.
Hover states are subtle but present. Buttons respond to :hover with opacity shifts (0.7), background color changes via CSS variables (--btn-active-color), or scale transforms (1.2). Always include hover feedback.
Three-column grid on tablet and up. Mobile is single-column; all other breakpoints use 3-column layouts. Navigation visibility increases at 768px (4 links appear).

10. Known Gaps

No semantic color ramp: The site does not expose error, success, warning, or info states. Do not invent status colors; only the five measured colors exist.
No gradients or decorative meshes: The extraction found no gradients. All depth is achieved through color-blocking and opacity shifts.
Accent color role undefined: {colors.accent-1} (#BBAC97) has no documented semantic role and appears to be decorative. Assign it only if explicit design guidance emerges.
Interaction state coverage incomplete: Only button, navigation, and link hover states were extracted. Focus, active, disabled, and loading states may exist but were not captured; implement disabled state via opacity 0.4 as observed, but other states require design review.
No shadow elevation data: The system uses color-blocking exclusively; no shadows, blur, or layering systems were measured.
Single-page extraction: Only the ORYZO homepage was analyzed. Interior pages, product details, and authenticated surfaces were not visited and may use different patterns.
No animation or transition timing: CSS transitions, durations, and easing functions were not extracted. Specify timing explicitly in component implementations.
Grid and breakpoint inferred from content: The three-column grid structure was measured from responsive content observation; no explicit CSS Grid or Flexbox configuration was extracted.

Want a DESIGN.md like this for your own website?

Remixes of oryzo.ai

Latest remixes

No public remixes yet. Be the first to make one.

Remix it