---
version: alpha
name: Oracle
description: Redwood Design System — enterprise authority anchored in Oracle Red, Oracle Sans variable font, generous whitespace, clean geometric forms, and a warm neutral canvas that frames cloud-product complexity.

colors:
  # Canvas + surfaces
  background: "#ffffff"
  surface: "#f7f7f7"          # light warm neutral for section alternates
  surface-dark: "#1a1a2e"     # deep navy for dark hero sections /* estimated */
  surface-muted: "#f0f0f0"    # subtle panel background

  # Ink / text
  ink: "#161616"               # near-black for headings and body
  ink-secondary: "#495057"     # mid-gray for supporting text /* estimated */
  ink-tertiary: "#737373"      # muted labels, placeholders /* estimated */
  on-primary: "#ffffff"        # white text on Oracle Red or navy

  # Brand accent — Oracle Red (Redwood brand color)
  primary: "#c74634"           # Oracle Red — CTAs, links, active states
  primary-dark: "#9e3728"      # darker red for hover on red bg /* estimated */
  primary-hover: "#a83a2c"     # button hover /* estimated */
  primary-active: "#8b2f22"    # pressed state /* estimated */
  primary-container: "#fdf0ee" # pale red tint for selected/hover rows /* estimated */

  # Neutral scale
  gray-90: "#212529"
  gray-70: "#495057"
  gray-50: "#737373"
  gray-30: "#adb5bd"
  gray-20: "#dee2e6"
  gray-10: "#f0f0f0"
  gray-05: "#f7f7f7"

  # Semantic
  success: "#1d7e4b"
  success-bg: "#d4edda"
  warning: "#856404"
  warning-bg: "#fff3cd"
  error: "#c74634"             # Oracle Red doubles as error color
  error-bg: "#fdf0ee"

  # Borders
  border: "#dee2e6"
  border-dark: "#adb5bd"

  # Focus / interaction
  focus-ring: "#c74634"        # Oracle Red focus ring
  focus-bg: "#fdf0ee"          # pale tint for focus backgrounds

  # Shadow (opaque approximations — Google format requires hex)
  shadow-soft: "#d0d0d0"       # was rgba(0,0,0,0.12) — Google format requires hex
  shadow-medium: "#bbbbbb"     # was rgba(0,0,0,0.20) — Google format requires hex

typography:
  display-hero:
    fontFamily: "Oracle Sans, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 56px
    fontWeight: 300
    lineHeight: 1.15
    letterSpacing: -0.5px
  display:
    fontFamily: "Oracle Sans, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 40px
    fontWeight: 300
    lineHeight: 1.2
    letterSpacing: -0.25px
  heading-section:
    fontFamily: "Oracle Sans, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 28px
    fontWeight: 400
    lineHeight: 1.25
    letterSpacing: 0px
  heading-sub:
    fontFamily: "Oracle Sans, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 20px
    fontWeight: 600
    lineHeight: 1.35
    letterSpacing: 0px
  body-large:
    fontFamily: "Oracle Sans, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body:
    fontFamily: "Oracle Sans, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px
  body-small:
    fontFamily: "Oracle Sans, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: 0px
  nav-link:
    fontFamily: "Oracle Sans, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 500
    lineHeight: 1.4
    letterSpacing: 0px
  button-ui:
    fontFamily: "Oracle Sans, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 14px
    fontWeight: 600
    lineHeight: 1.4
    letterSpacing: 0px
  caption:
    fontFamily: "Oracle Sans, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif"
    fontSize: 12px
    fontWeight: 400
    lineHeight: 1.4
    letterSpacing: 0.2px
  code:
    fontFamily: "Menlo, 'Courier New', Courier, monospace"
    fontSize: 13px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: 0px

spacing:
  xs: 4px
  sm: 8px
  md: 16px
  lg: 24px
  xl: 32px
  2xl: 48px
  3xl: 64px
  4xl: 96px
  5xl: 128px

rounded:
  none: 0px
  sm: 2px
  md: 4px
  lg: 8px
  xl: 16px
  pill: 9999px

components:
  # Primary button — Oracle Red fill
  button-primary:
    backgroundColor: "{colors.primary}"
    textColor: "{colors.on-primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-primary-hover:
    backgroundColor: "{colors.primary-hover}"
    textColor: "{colors.on-primary}"
  button-primary-active:
    backgroundColor: "{colors.primary-active}"
    textColor: "{colors.on-primary}"

  # Secondary button — outlined Oracle Red
  button-secondary:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
    borderColor: "{colors.primary}"
    borderWidth: 1px
  button-secondary-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-hover}"
    borderColor: "{colors.primary-hover}"

  # Ghost / text button
  button-ghost:
    backgroundColor: "{colors.background}"
    textColor: "{colors.primary}"
    typography: "{typography.button-ui}"
    rounded: "{rounded.md}"
    padding: 10px 20px
  button-ghost-hover:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary-hover}"

  # Card
  card:
    backgroundColor: "{colors.background}"
    rounded: "{rounded.lg}"
    padding: 24px
    borderColor: "{colors.border}"
    borderWidth: 1px
  card-hover:
    borderColor: "{colors.primary}"

  # Input
  input:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.body}"
    rounded: "{rounded.md}"
    padding: 10px 12px
    borderColor: "{colors.border}"
    borderWidth: 1px
  input-focus:
    borderColor: "{colors.focus-ring}"
    outlineWidth: 2px
    outlineColor: "{colors.focus-ring}"

  # Badge / tag
  badge:
    backgroundColor: "{colors.primary-container}"
    textColor: "{colors.primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  badge-success:
    backgroundColor: "{colors.success-bg}"
    textColor: "{colors.success}"
    typography: "{typography.caption}"
    rounded: "{rounded.pill}"
    padding: 4px 10px

  # Top navigation
  nav-bar:
    backgroundColor: "{colors.background}"
    textColor: "{colors.ink}"
    typography: "{typography.nav-link}"
    padding: 0px 24px
    borderColor: "{colors.border}"
    borderWidth: 1px

  nav-link-active:
    textColor: "{colors.primary}"

  # Data table header
  data-table-header:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.ink-secondary}"
    typography: "{typography.caption}"
    padding: 10px 12px
    borderColor: "{colors.border}"

  # Tooltip
  tooltip:
    backgroundColor: "{colors.gray-90}"
    textColor: "{colors.on-primary}"
    typography: "{typography.caption}"
    rounded: "{rounded.md}"
    padding: 6px 12px
---

# Oracle Design System

## Overview

Oracle's Redwood Design System is enterprise software design at scale — a visual language built to unify hundreds of cloud products under a single, recognizable identity. The canvas is white (`{colors.background}`) with generous section alternation on `{colors.surface}`, creating breathing room between the dense product information that defines enterprise marketing pages. At its core, the system balances approachability with authority: Oracle Red (`{colors.primary}`) punctuates a primarily neutral layout the way a signature stamps a contract, purposeful and unmistakable.

Oracle Sans is the typographic backbone — a custom variable font (confirmed self-hosted as `oraclesansvf.woff2`) that carries the full weight range from light 300 at display sizes to semibold 600 for interactive labels. At large hero sizes, weight 300 creates an unexpectedly refined, airy quality that softens Oracle's enterprise seriousness; at UI scale, 600 snaps to legibility without crossing into the heavy-handed. This variable font approach gives the system enormous flexibility without needing multiple discrete weights to be loaded separately.

The layout philosophy is open and grid-structured, with substantial vertical whitespace between sections and a clear 8px base spacing unit. Cards sit on white with `{colors.border}` 1px rules rather than shadows — a print-influenced restraint that reflects the Redwood system's enterprise precision. Subtle alternating gray sections (`{colors.surface}`) create visual rhythm without heavy chrome. The result is a system that feels contemporary and clean, yet serious enough to frame cloud infrastructure pricing and enterprise contract workflows.

**Key Characteristics:**
- Oracle Red (`{colors.primary}`) is the singular accent — every CTA, every active state, every link anchors to this one hue
- Oracle Sans variable font (`oraclesansvf.woff2`) covers the full display-to-caption range in a single file; weight 300 for display, 600 for interactive
- White `{colors.background}` primary canvas with `{colors.surface}` alternating sections for rhythm — depth via background shifts, not shadow
- Generous whitespace — section padding at `{spacing.3xl}` (64px) and above; designed for marketing and product pages, not data-dense UIs
- Border-based card treatment — 1px `{colors.border}` on `{rounded.lg}` (8px) cards; shadows reserved for floating elements
- 8px base spacing grid with an extended scale reaching `{spacing.5xl}` for hero sections
- Conservative 4px button radius — `{rounded.md}` balances modern friendliness with enterprise seriousness
- Full semantic color system — success, warning, error, each with text and background-tint variants for accessible feedback patterns
- Navigation is white with border-bottom separator; no dark masthead approach (unlike IBM or Salesforce)

## Colors

### Primary Canvas

- **White** (`{colors.background}`): The default page surface for all content sections.
- **Warm Neutral** (`{colors.surface}`): `#f7f7f7` — alternating section backgrounds that create page rhythm; slightly warmer than pure gray.
- **Ink** (`{colors.ink}`): `#161616` — near-black for headings and primary body text.

### Brand Accent

- **Oracle Red** (`{colors.primary}`): `#c74634` — the Redwood system's signature color. Applied to primary CTAs, active navigation states, focus rings, text links, and accent graphic elements. Every interactive element that demands attention gets this red.
- **Red Hover** (`{colors.primary-hover}`): Darkens for button hover states to signal response.
- **Red Container** (`{colors.primary-container}`): Pale `#fdf0ee` tint for selected rows, hover backgrounds, and input focus halos.

### Neutral Scale

Oracle's neutral gray family runs from near-black `{colors.gray-90}` to near-white `{colors.gray-05}`. Secondary body text uses `{colors.ink-secondary}` (`{colors.gray-70}`); placeholder and muted metadata use `{colors.ink-tertiary}` (`{colors.gray-50}`); borders live at `{colors.gray-20}`.

### Semantic

- **Success** (`{colors.success}` / `{colors.success-bg}`): Green pair — `#1d7e4b` on `#d4edda` — for validation and confirmation states.
- **Warning** (`{colors.warning}` / `{colors.warning-bg}`): Amber pair for cautionary notifications.
- **Error** (`{colors.error}` / `{colors.error-bg}`): Oracle Red functions as the error color as well; error backgrounds use `{colors.primary-container}` tint to maintain consistent brand-color association.

### Borders and Shadows

- **Border** (`{colors.border}`): `#dee2e6` — standard 1px rule on cards and inputs.
- **Shadow soft** (`{colors.shadow-soft}`): was `rgba(0,0,0,0.12)` — flattened to `#d0d0d0` for Google hex format. Applied to dropdown menus and popovers.

## Typography

### Font Family

- **Primary**: `Oracle Sans` — a custom variable font commissioned for the Redwood design system, served as `oraclesansvf.woff2`. A clean geometric sans with warm terminals, covering the full weight range from light to bold. Fallback stack: `-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif`.
- **Monospace**: `Menlo, 'Courier New', Courier, monospace` — for code examples, developer documentation, and technical content.

### Hierarchy

The complete type scale is in the `typography:` token block above. Use those tokens via reference rather than restating values.

| Token | Use |
|---|---|
| `display-hero` | Page-level hero titles; light weight 300 for elegance at scale |
| `display` | Section headings, feature titles; weight 300 preserved |
| `heading-section` | Sub-section labels, content groupings; weight 400 |
| `heading-sub` | Card titles, sidebar headers, panel labels; weight 600 |
| `body-large` | Lead paragraphs, feature descriptions; 18px with generous line-height |
| `body` | All primary content, form help text; 16px standard |
| `body-small` | Secondary labels, compact list items, table rows |
| `nav-link` | Navigation items, tab labels, menu entries; weight 500 |
| `button-ui` | All button labels; 14px weight 600 for legibility at small size |
| `caption` | Data table column headers, badge text, meta timestamps |
| `code` | Developer content, inline code, terminal snippets |

### Principles

- Oracle Sans at weight 300 for display sizes (28px+) — the lightness communicates confidence without corporate heaviness; trust through typographic restraint.
- Variable font architecture means precise weight control across the full range; the displayed weight always matches intent, not a discrete weight's nearest match.
- Line height 1.6 at body sizes reflects Redwood's investment in readability on long marketing pages with dense product information.
- No letter-spacing at display sizes; modest 0.2px tracking at 12px caption sizes only — matching the convention of increasing track as size decreases.
- Three effective weights in practice: 300 (display), 400 (body), 600 (UI labels and semibold headings).

## Layout

### Spacing System

The complete spacing scale lives in the `spacing:` token block above. Base unit: **8px** (`{spacing.sm}`).

Redwood's spacing scale extends to `{spacing.5xl}` (128px) for major hero sections — significantly more generous than typical enterprise systems, reflecting Oracle's shift toward spacious marketing layouts rather than dense application UIs.

### Grid and Container

- Max content width: 1280px for product/marketing pages; 1440px on wide breakpoints
- 12-column grid with 24px gutters
- Typical section padding: `{spacing.4xl}` (96px) vertical on desktop for major sections
- Nav height: 64px with border-bottom separator

### Whitespace Philosophy

- Spacious by design: Redwood's marketing pages breathe. Section padding is generous; content is never packed.
- Background-color alternation — white and `{colors.surface}` sections create visual rhythm without heavy rules.
- Cards use `{spacing.lg}` (24px) internal padding, allowing sufficient white space around content.

## Elevation & Depth

| Level | Treatment | Use |
|---|---|---|
| Flat (Level 0) | No shadow; `{colors.border}` 1px | Cards, panels, all page-level surfaces |
| Subtle (Level 1) | `0 2px 4px {colors.shadow-soft}` | Hover states on interactive cards |
| Dropdown (Level 2) | `0 4px 12px {colors.shadow-soft}` | Navigation mega-menus, select dropdowns |
| Elevated (Level 3) | `0 8px 24px {colors.shadow-medium}` | Modal dialogs, side drawers |
| Focus Ring | `0 0 0 2px {colors.focus-ring}` | Keyboard focus on all interactive elements |

**Shadow Philosophy**: Redwood uses shadows sparingly, consistent with enterprise design systems that favor crisp borders over soft elevation. Cards and panels receive no shadow — the 1px `{colors.border}` rule provides all necessary separation. Shadows emerge only when elements genuinely float (dropdowns, modals). The Oracle Red focus ring is the most expressive shadow-adjacent treatment, using the brand color rather than a generic blue.

## Shapes

The complete radius scale is in the `rounded:` token block above.

| Token | Value | Use |
|---|---|---|
| `none` | 0px | Data table rows, dividers, inline form fields |
| `sm` | 2px | Small supplementary elements |
| `md` | 4px | Buttons — the primary interactive radius |
| `lg` | 8px | Cards, modals, panels, input fields |
| `xl` | 16px | Larger promotional cards, hero containers |
| `pill` | 9999px | Badge and tag elements |

Redwood uses a pragmatic radius system: 4px on interactive elements (buttons) signals modern friendliness without feeling playful; 8px on cards and inputs adds softness to content containers. The pill shape is reserved for compact metadata tags and status indicators.

## Components

The complete component spec lives in the `components:` token block above. Reference component tokens directly.

### Button Variants

- **`button-primary`** — Oracle Red (`{colors.primary}`) fill, white text, `{rounded.md}` (4px) corners. The primary CTA on any page. Hover darkens to `{colors.primary-hover}`.
- **`button-secondary`** — white fill with `{colors.primary}` border and label text. Used for secondary actions alongside a red primary; hover fills with `{colors.primary-container}`.
- **`button-ghost`** — transparent fill, `{colors.primary}` label. For low-emphasis actions in already-branded contexts like card headers or navigation items.

### Cards

`{components.card}` uses `{colors.background}` white fill with `{colors.border}` 1px rule and `{rounded.lg}` (8px) corners. Hover state shifts border to `{colors.primary}` to signal interactivity. Product cards on Oracle's cloud pages follow this pattern consistently.

### Inputs

`{components.input}` uses `{colors.background}` fill with `{colors.border}` 1px border and `{rounded.md}` radius. Focus state applies a 2px `{colors.focus-ring}` Oracle Red outline. Error state replaces the border with `{colors.error}`.

### Badges and Tags

`{components.badge}` uses `{colors.primary-container}` pale red fill with `{colors.primary}` text — a quietly branded pill for product category labels and feature tags. Semantic variants pair the appropriate ink and tint tokens.

### Navigation

`{components.nav-bar}` sits on `{colors.background}` white with a `{colors.border}` 1px bottom rule, 64px height. Links use `{typography.nav-link}` at 14px. Oracle Red (`{colors.primary}`) marks active states and hover. The white navigation distinguishes Oracle from enterprise peers that default to dark mastheads.

## Do's and Don'ts

### Do

- Use Oracle Red (`{colors.primary}`) as the singular interactive accent — every CTA, every text link, every focus ring. Its restraint earns its visibility.
- Apply weight 300 for display text at 28px and above — the lightness is intentional and distinctive to the Redwood system.
- Use 4px corners (`{rounded.md}`) for buttons and 8px (`{rounded.lg}`) for cards; don't flatten to 0px, which reads as overly severe for Redwood's approachable register.
- Use background-color alternation (`{colors.background}` and `{colors.surface}`) for section rhythm; avoid stacking two white sections without visual differentiation.
- Apply `{spacing.3xl}` (64px) minimum vertical padding on major content sections — Redwood's spaciousness is a design statement, not wasted space.
- Reference `{colors.primary-container}` (`#fdf0ee`) for selected row states, active tab backgrounds, and input focus halos.
- Use Oracle Sans at the declared weights; the variable font supports precise rendering — rely on it rather than approximating with system fonts.

### Don't

- Don't introduce secondary accent colors alongside Oracle Red. The Redwood system is deliberately monochromatic-plus-red; competing hues dilute the accent's authority.
- Don't add box-shadows to card surfaces — `{colors.border}` 1px is the Redwood card language; shadow implies floating, which cards are not.
- Don't use Oracle Red for text below 14px — at small sizes the contrast on `{colors.background}` white is acceptable but strains legibility; use `{colors.ink}` for body copy.
- Don't close letter-spacing at display sizes to zero and then open it at small sizes — track only `{typography.caption}` (12px) with 0.2px; leave all other sizes at 0.
- Don't use a dark masthead; Oracle's navigation sits on white with a border-bottom. Introducing a dark nav bar contradicts the Redwood system's bright, open identity.
- Don't condense section padding below `{spacing.2xl}` (48px) on marketing pages — the system's authority comes partly from its willingness to use space.
- Don't use intermediate radius values (6px, 10px, 12px) — the system defines clear stops at 4px and 8px for interactive and container elements respectively.

---

## Responsive Behavior

### Breakpoints

| Name | Width | Key Changes |
|---|---|---|
| Mobile Small | <375px | Single column, hamburger nav, 16px page margins |
| Mobile | 375–767px | Single column layout, full-width cards, stacked CTAs |
| Tablet | 768–1023px | 2-column grids begin, navigation collapses to hamburger |
| Desktop | 1024–1279px | Full horizontal navigation, 3–4 column grids, side-by-side layouts |
| Large Desktop | >1280px | Max content width container centered; maximum product density |

### Touch Targets

- Buttons minimum 44px height on mobile
- Navigation tap targets: full row height (48px minimum)
- Input height: 44px on mobile for comfortable tapping
- Card tap areas span the full card with appropriate padding

### Collapsing Strategy

- Navigation collapses to hamburger menu at tablet; mega-menu dropdowns become full-screen overlays on mobile
- Hero sections shift from 2-column (text + visual) to stacked single column on mobile
- 3–4 column product grids reduce to 2-column on tablet, single column on mobile
- Section padding reduces: `{spacing.3xl}` desktop → `{spacing.2xl}` tablet → `{spacing.xl}` mobile
- Footer multi-column link groups stack vertically

### Image Behavior

- Product screenshots and diagrams scale with `max-width: 100%`; hero product visuals maintain aspect ratio
- Cloud infrastructure diagrams switch from multi-column to vertically scrollable single column on mobile
- Customer logos in logo bars reduce from 6–8 per row to 3–4 on tablet, 2–3 on mobile

---

## Agent Prompt Guide

### Quick Color Reference

- Background: `{colors.background}` (white)
- Alternate section: `{colors.surface}` (`#f7f7f7`)
- Headings: `{colors.ink}` (`#161616`)
- Secondary text: `{colors.ink-secondary}` (`#495057`)
- Brand accent: `{colors.primary}` (Oracle Red `#c74634`)
- Border: `{colors.border}` (`#dee2e6`)
- Focus ring: `{colors.focus-ring}` (Oracle Red)
- Link: `{colors.primary}`
- Error: `{colors.error}`

### Example Component Prompts

- "Create an Oracle Redwood–style hero section on `{colors.background}` white. Headline at 56px Oracle Sans weight 300, line-height 1.15, color `{colors.ink}`. Lead paragraph at 18px weight 400, line-height 1.6, color `{colors.ink-secondary}`, max-width 640px. Primary CTA button: `{colors.primary}` background, `{colors.on-primary}` text, `{typography.button-ui}` (14px weight 600), `{rounded.md}` (4px) corners, 10px 20px padding. Secondary CTA: outlined `{colors.primary}` border, `{colors.primary}` text, same size and radius."
- "Design an Oracle Redwood product card using `{colors.background}` white background, `{colors.border}` 1px border, `{rounded.lg}` (8px) corners, 24px padding (`{spacing.lg}`). Card title: `{colors.ink}` `{typography.heading-sub}` (20px weight 600). Body: `{colors.ink-secondary}` `{typography.body}` (16px weight 400, line-height 1.6). Hover state: border transitions to `{colors.primary}` Oracle Red."
- "Build an Oracle Redwood form input: `{colors.background}` fill, `{colors.border}` 1px border, `{rounded.lg}` (8px) corners, 10px 12px padding, `{typography.body}` text at `{colors.ink}`. Label above at `{typography.body-small}` `{colors.ink-secondary}`. Focus: 2px `{colors.focus-ring}` Oracle Red outline ring. Error: border and label text shift to `{colors.error}` with `{colors.error-bg}` below-field message background."
- "Create an Oracle navigation bar: `{colors.background}` white, 64px height, `{colors.border}` 1px bottom border. Oracle wordmark left-aligned. Nav links at `{typography.nav-link}` (14px weight 500) `{colors.ink}`. Active link and hover: `{colors.primary}` Oracle Red. Right side: 'Sign In' ghost button and 'Contact Sales' primary red button."
- "Build an Oracle Redwood badge system: `{components.badge}` for category labels using `{colors.primary-container}` pale red fill, `{colors.primary}` text, `{typography.caption}` (12px), `{rounded.pill}` shape, 4px 10px padding. Success variant: `{colors.success-bg}` fill with `{colors.success}` text same spec."

### Iteration Guide

1. Start with `{colors.background}` white and section-alternate using `{colors.surface}` (`#f7f7f7`). Depth comes from this background rhythm, not shadow.
2. `{colors.primary}` Oracle Red is the sole accent; if an element is actionable it earns this red, if it doesn't get this red it should not look interactive.
3. Typography weight is a three-stop scale: 300 for display (28px+), 400 for body reading, 600 for UI labels and headings. No intermediate weights required.
4. Apply `{rounded.md}` (4px) on buttons and `{rounded.lg}` (8px) on cards and inputs — never flatten to 0 or push beyond 16px for standard components.
5. Reserve box-shadow for floating elements only (dropdowns, modals); card separation is always 1px `{colors.border}`.
6. Oracle Red focus rings — `{colors.focus-ring}` at 2px solid — apply to all interactive elements for keyboard navigation consistency.
7. Section padding at `{spacing.3xl}` (64px) minimum on desktop; Redwood's spaciousness is a feature of its enterprise-modern positioning.

---

## Attribution

Independent design analysis from [Design Swatches](https://designmd.santiagoalonso.com) by [Santiago Alonso](https://santiagoalonso.com). Based on publicly observable interface patterns. Not affiliated with or endorsed by Oracle. Brand names and trademarks belong to their respective owners.
