# Rsystemsinc Design System

> High-performance computing identity anchored by a high-contrast red-on-gray palette and wide-tracked Raleway typography.

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

## TL;DR
Rsystemsinc utilizes a high-voltage "Industrial Red" (#ed1c24) against a foundation of neutral grays and stark whites. The system is characterized by sharp 0px corners on almost all containers, creating a rigid, technical atmosphere appropriate for HPC infrastructure. Typography relies exclusively on Raleway for headings and PT Sans for specific UI actions, with a heavy emphasis on 48px display type for section headers. Layouts are strictly modular, using 1px dividers (#e0dede) and solid color blocks to separate content without the use of drop shadows or soft gradients.

## Signature DNA
1. **The Red Header/Footer Block** (Solid #ed1c24 bands spanning the full viewport width, housing white navigation and legal text. Observed on Homepage and Pricing.)
2. **Sharp-Edge Modularity** (A strict 0px border-radius policy for cards, buttons, and section dividers, reinforcing a precise engineering aesthetic. Observed across all pages.)
3. **Achromatic Foundation** (Use of #747474 for body text and #e0dede for structural borders to ensure the red accent remains the sole focus of visual hierarchy.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.text-body}` | `#747474` | Primary body text, FAQ content | 163 | 1 | `--body-typography-color` |
| `{colors.canvas}` | `#ffffff` | Primary page background, form fields | 34 | 1 | `--bg_color` |
| `{colors.border-subtle}` | `#e0dede` | Dividers, grid separators, title borders | 38 | 1 | `--sep_color` |
| `{colors.text-heading}` | `#333333` | Secondary headings, inactive accordion labels | 2 | 1 | `--h2_typography-color` |
| `{colors.surface-neutral}` | `#f6f6f6` | Testimonial backgrounds, hover states | 3 | 1 | `--testimonial_bg_color` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.primary}` | `#ed1c24` | H1 titles, primary links, brand bars | 36 | 1 | `--h1_typography-color` |
| `{colors.primary-surface}` | `#e10707` | Pricing headers, progress bars, active states | 14 | 1 | `--primary_color` |
| `{colors.button-gradient}` | `#e80707` | Button background (decorative_only) | 1 | 1 | `--button_gradient_top_color` |

### Semantic
| Token | Hex | Role |
|------|-------|------|
| `{colors.success}` | `#dff0d8` | Success background |
| `{colors.error}` | `#f2dede` | Danger/Error background |
| `{colors.warning}` | `#fcf8e3` | Warning background |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Raleway | 400, 700 | Display, Headings, Body | Google Fonts Raleway | OFL |
| PT Sans | 400 | Buttons, specific UI | Google Fonts PT Sans | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 48px | 48px | normal | 400 | Hero H1 | `h1.fusion-responsive-typography-calculated` |
| `{type.heading-md}` | 21px | 31.92px | normal | 400 | Section H3 | `h3.fusion-responsive-typography-calculated` |
| `{type.body-lg}` | 19px | 34.01px | normal | 400 | Intro text | `span:nth-of-type(1)` |
| `{type.body-bold}` | 19px | 34.01px | normal | 700 | Emphasis | `strong` |
| `{type.body-md}` | 18px | 32px | normal | 400 | Standard prose | `span` |
| `{type.input}` | 16px | normal | normal | 400 | Form inputs | `input.wpcf7-form-control` |
| `{type.body-sm}` | 14px | 25.06px | normal | 400 | Footer, metadata | `section#content` |
| `{type.button}` | 14px | 17px | normal | 400 | CTA Labels | `a.fusion-button` |

### Principles
1. **Red for Impact:** H1 headings use #ed1c24 to immediately anchor the page.
2. **Gray for Readability:** Long-form content is strictly #747474 to reduce contrast strain against white backgrounds.
3. **Weight as Hierarchy:** Bold weights (700) are reserved for inline emphasis and specific body-sm labels.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 6px | 51 |
| `{space.md}` | 15px | 9 |
| `{space.lg}` | 20px | 36 |
| `{space.xl}` | 32px | 5 |
| `{space.section}` | 50px | 4 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Buttons, Cards, Headers | 230 occurrences |
| `{radius.sm}` | 6px | Form Inputs | 6 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{elev.flat}` | none | All surfaces | No box-shadows captured in source |

## Components

### Tier 1: Foundational

#### Brand Bar
**Role:** Global header and footer branding.
**Pages observed:** All
**Spec:** Background `#ed1c24` / Text `#ffffff` / Radius `0px` / Typography `{type.body-sm}`
**States observed:** Default: captured | Hover: not captured

#### Primary Divider
**Role:** Section separation.
**Pages observed:** All
**Spec:** Border-bottom `1px` solid `#e0dede` / Radius `0px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Pricing Table Header
**Role:** Data categorization.
**Pages observed:** Pricing
**Spec:** Background `#e10707` / Text `#ffffff` / Radius `0px` / Typography `{type.body-sm}` (700)
**States observed:** Default: captured

#### Feature Card (Inverted)
**Role:** Highlighting core services.
**Pages observed:** Homepage
**Spec:** Background `#000000` / Text `#747474` / Border `1px` solid `#747474` / Radius `0px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Text Input
**Role:** Lead generation forms.
**Pages observed:** Pricing
**Spec:** Background `#ffffff` / Border `1px` solid `#d2d2d2` / Radius `6px` / Padding `0px 15px` / Typography `{type.input}`
**States observed:** Default: captured | Focus: `#d2d2d2`

#### Primary Button
**Role:** Form submission.
**Pages observed:** Pricing
**Spec:** Background `#e10707` / Text `#ffffff` / Radius `0px` / Typography `{type.button}`
**States observed:** Default: captured | Hover: `#d60707` (gradient top)

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1200px (approx) |
| Grid Gutter | 20px |
| Section Padding | 50px (vertical) |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Navigation collapses to hamburger; 3-column feature grids stack vertically. |
| Desktop | 1440px | Full horizontal navigation; multi-column table layouts. |

## Imagery & decoration
The brand utilizes high-tech, abstract photography featuring fiber optics, data centers, and digital overlays. Decoration is limited to 1px lines and solid color blocks. It avoids rounded corners, soft shadows, and playful illustrations.

## Do's
- Use `#ed1c24` for the primary H1 heading on every page.
- Maintain `0px` border radius on all buttons and cards.
- Use `#747474` for all paragraph text to maintain the brand's technical tone.
- Separate major sections with a `1px` divider in `#e0dede`.
- Ensure all form inputs use the `6px` radius exception.

## Don'ts
- **Wrong:** Using a rounded button for a CTA. **Right:** Square corners. **Reason:** Brand consistency with engineering precision.
- **Wrong:** Applying a drop shadow to a card. **Right:** Flat surfaces. **Reason:** System is strictly 2D and modular.
- **Wrong:** Using a sub-brand color (like a blue accent) as the primary header background. **Right:** Always use `#ed1c24`.

## Similar brands
- Red Hat (Color palette and technical focus)
- IBM (Grid-based, modular technical aesthetic)
- Dell Technologies (HPC partnership and structural layout)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --rs-primary: #ed1c24;
  --rs-primary-surface: #e10707;
  --rs-text-body: #747474;
  --rs-border: #e0dede;
  --rs-canvas: #ffffff;
  --rs-radius-none: 0px;
  --rs-font-heading: 'Raleway', sans-serif;
}
```

## Agent prompt examples
- "Create a pricing card with a solid #e10707 header, 0px border radius, and #747474 body text."
- "Generate a hero section with a 48px Raleway H1 in #ed1c24 and a background image of a data center."
- "Design a contact form using 1px #d2d2d2 borders and 6px border radius for inputs."

## Known gaps
- Hover states for secondary navigation links were not explicitly captured in the token set.
- Detailed mobile breakpoint transitions for complex pricing tables are not fully documented.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://rsystemsinc.com | 1440px | 2026-06-06 |
| Pricing | https://rsystemsinc.com/pricing | 1440px | 2026-06-06 |
| Mobile Home | https://rsystemsinc.com | 390px | 2026-06-06 |