# Ricoh-usa Design System

> A structured corporate canvas of high-contrast black and white, punctuated by a deep heritage red and disciplined geometric precision.

**Source:** https://ricoh-usa.com | **Captured:** 2026-06-06 | **Pages analyzed:** 2
**Brand layer:** parent | **Related brands:** None

## TL;DR
The Ricoh-usa visual identity is anchored in a "monochrome-plus-one" strategy. The interface relies on a stark white background (`#ffffff`) and a soft-black ink (`#120f0f`) to establish a professional, high-legibility foundation. Identity voltage is delivered through a specific deep red (`#931036`), used primarily for critical calls to action and brand-linked typography. Layouts are strictly modular, utilizing a 4px base unit and sharp or moderately rounded corners (`10px`) for content containers. Typography is dominated by **AkkuratLLWeb**, a geometric sans-serif that provides a technical, engineered feel across all hierarchy levels.

## Signature DNA
1. **The Heritage Red Anchor:** The use of `#931036` as the primary chromatic signal for interaction and brand presence against a neutral canvas.
2. **Geometric Technicality:** The pairing of AkkuratLLWeb with sharp-edged surfaces (`0px`) and specific `10px` radius cards creates a balance of industrial precision and modern software UI.
3. **High-Contrast Information Density:** Heavy reliance on `#120f0f` for text on white backgrounds, maintaining a contrast ratio of 16.5:1 for maximum accessibility.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.canvas}` | `#ffffff` | Page background, button backgrounds, card surfaces | 60 | 1.0 | Computed Style |
| `{color.ink}` | `#120f0f` | Primary text, footer backgrounds, button text | 203 | 0.8 | Computed Style |
| `{color.ink-pure}` | `#000000` | High-emphasis text | 25 | 0.8 | Computed Style |
| `{color.ink-muted}` | `#666666` | Secondary/de-emphasized text | 10 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{color.primary}` | `#931036` | Primary brand red, interactive text, primary CTAs | 26 | 0.8 | Computed Style |
| `{color.accent-bright}` | `#cf122e` | Secondary red for borders and surface accents | 11 | 0.8 | Computed Style |
| `{color.accent-blue}` | `#1282e9` | Decorative surface backgrounds (About page) | 10 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| AkkuratLLWeb-Regular | 400, 700 | Primary Display & UI | Roboto | Licensed |
| FrutigerLTPro-normal-400 | 450 | Secondary Body | Inter | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display}` | 44px | 52px | normal | 700 | Hero Headlines | `h1.text-black-soft` |
| `{type.h2}` | 36px | 42px | normal | 700 | Section Headers | `h2.text-h2` |
| `{type.h3}` | 30px | 40px | normal | 700 | Subsection Titles | `h3.mb-4` |
| `{type.h4}` | 24px | 32px | normal | 700 | Small Headings | `h4.text-2xl` |
| `{type.body-lg}` | 18px | 24px | normal | 700 | Active Tabs/Links | `a.tabs_nav-btn-active` |
| `{type.body}` | 16px | 24px | normal | 400 | Default Paragraphs | `div.relative` |
| `{type.body-bold}` | 16px | 28px | normal | 700 | Emphasized Links | `a` |
| `{type.body-sm}` | 14px | 20px | normal | 400 | Muted Metadata | `p.text-grey-primary` |

### Principles
1. **Geometric Weight:** Headings are consistently weight 700, providing a "heavy" architectural feel to the page structure.
2. **Line-Height Generosity:** Body text uses a 1.5x to 1.75x line-height ratio (e.g., 16px/28px) to maintain readability in technical descriptions.
3. **Red Interaction:** Links and active navigation states frequently toggle to `{color.primary}` (#931036).

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 57 |
| `{space.sm}` | 16px | 37 |
| `{space.md}` | 24px | 22 |
| `{space.lg}` | 32px | 18 |
| `{space.xl}` | 56px | 3 |
| `{space.section}` | 100px | 10 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.sharp}` | 0px | Section containers, primary surfaces | 226 occurrences |
| `{radius.md}` | 10px | Feature cards, interactive modules | Card component |
| `{radius.lg}` | 50px | Large circular buttons/controls | Rounded Button component |
| `{radius.pill}` | 9999px | Badges and pill CTAs | Pill / Badge component |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.card}` | `rgba(0, 0, 0, 0.3) 0px 4px 6px -1px` | Floating feature cards | Card component |

## Components

### Tier 1: Foundational

#### Card
**Role:** Primary content grouping for features and news.
**Pages observed:** https://ricoh-usa.com, https://ricoh-usa.com/about
**Spec:** Background: `#ffffff` | Text: `#120f0f` | Radius: `10px` | Padding: `32px` | Shadow: `{shadow.card}`
**States observed:** Default: captured | Hover: not captured

#### Rounded Button
**Role:** Secondary navigation and icon-based triggers.
**Pages observed:** https://ricoh-usa.com, https://ricoh-usa.com/about
**Spec:** Background: `transparent` or `#ffffff` | Text: `#120f0f` | Border: `2px solid #ffffff` or `#120f0f` | Radius: `50%`
**States observed:** Default: captured | Hover: not captured

### Tier 2: Patterns

#### Pill / Badge
**Role:** Status indicators or secondary category links.
**Pages observed:** https://ricoh-usa.com
**Spec:** Background: `transparent` | Text: `#cf122e` | Border: `1px solid #cf122e` | Radius: `9999px` | Padding: `12px 24px`
**States observed:** Default: captured

#### Surface Section
**Role:** Full-width content bands for alternating visual rhythm.
**Pages observed:** https://ricoh-usa.com, https://ricoh-usa.com/about
**Spec:** Background: `#120f0f` | Text: `#ffffff` | Radius: `0px` | Padding: `56px 0px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### News Slider Card
**Role:** Specific horizontal carousel item for global news.
**Pages observed:** https://ricoh-usa.com/about
**Spec:** Background: `#ffffff` | Radius: `10px` | Shadow: `{shadow.card}` | Padding: `0px` (internal content handles spacing)
**States observed:** Default: captured

#### Contact Surface
**Role:** Bottom-of-page conversion module.
**Pages observed:** https://ricoh-usa.com
**Spec:** Background: `#ffffff` | Border-top: `4px solid #931036` | Radius: `10px` | Shadow: `{shadow.card}`
**States observed:** Default: captured

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1280px (approx) |
| Section Vertical Gap | 100px |
| Card Grid Gap | 24px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | < 768px | Navigation collapses to hamburger; padding-x reduces to 16px |
| Desktop | 1024px+ | Multi-column card grids (3-up or 4-up) |

## Imagery & decoration
Ricoh utilizes high-quality photography of people in professional environments (offices, manufacturing). Decorative elements include "light trail" graphics and abstract colorful orbs (purple, green, yellow) used sparingly in hero backgrounds to suggest speed and data flow.

## Do's
- Use `#931036` for the primary "Discover" or "Learn More" buttons.
- Apply `10px` border radius to all floating cards.
- Maintain strict white space between sections using the `100px` token.
- Ensure all body text is set in AkkuratLLWeb for a consistent technical voice.
- Use `#120f0f` for dark backgrounds to avoid the harshness of pure black.

## Don'ts
- **Wrong:** Using `#cf122e` (Bright Red) for primary action buttons. **Right:** Use `#931036` (Heritage Red). **Reason:** `#931036` is the validated primary brand signal.
- **Wrong:** Applying shadows to the main page canvas. **Right:** Keep the canvas flat `#ffffff`. **Reason:** Elevation is reserved for interactive cards.
- **Wrong:** Mixing serif fonts into the UI. **Right:** Stick to the Akkurat and Frutiger sans-serif families. **Reason:** The brand identity is built on geometric sans-serif precision.

## Similar brands
- IBM (Engineered, monochrome focus)
- Canon (Heritage red, professional photography)
- Siemens (Technical typography, modular layout)

## Quick start

```css
/* CSS Variables */
:root {
  --ricoh-red: #931036;
  --ricoh-black: #120f0f;
  --ricoh-white: #ffffff;
  --ricoh-gray: #666666;
  --radius-md: 10px;
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}
```

## Agent prompt examples
- "Generate a feature card using a white background, a 10px border radius, and a subtle shadow. The title should be in AkkuratLLWeb bold, and the CTA should be a text link in #931036 with a right arrow."
- "Create a full-width section with a #120f0f background and white AkkuratLLWeb text. Include 56px of vertical padding."
- "Design a primary button with a #931036 background, white text, and a 4px border radius for form inputs."

## Known gaps
- Hover states for buttons were not explicitly captured in the computed style logs.
- Mobile-specific typography scaling for H1 was not fully sampled.
- Specific transition durations for card hover effects are missing from the source.

## Provenance
| Page sampled | URL | Viewport | Capture time |
| :--- | :--- | :--- | :--- |
| Homepage | https://ricoh-usa.com | 1440px | 2026-06-06 |
| About Page | https://ricoh-usa.com/about | 1440px | 2026-06-06 |