# Kymerasystems Design System

> Industrial precision anchored by deep maritime blues, high-contrast white canvases, and structured technical grids.

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

## TL;DR
Kymerasystems utilizes a high-contrast monochrome foundation of white (#ffffff) and dark slate (#333333) punctuated by a singular, authoritative primary blue (#00548a). The system feels industrial and technical, leaning on heavy section dividers (#e0dede) and a rigid 12-column logic. Typography is dominated by sans-serif hierarchies where headers often adopt the primary blue to signal structure. Interactive elements are strictly defined by gradient-filled buttons and icon circles that transition from slate to blue on hover, maintaining a disciplined, professional aesthetic suitable for IIoT and automation sectors.

## Signature DNA
1. **The Primary Blue Anchor:** Use of `#00548a` for H1 titles, primary CTAs, and active UI states to provide a focal point against the neutral canvas.
2. **Technical Dividers:** Pervasive use of `#e0dede` for FAQ accordions, checklist separators, and grid borders to enforce a "blueprint" feel.
3. **Achromatic Hover States:** Interactive icons and secondary elements shift from `#333333` to `#00548a` or lighter grays, ensuring color is reserved for intent.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--awb-color1` | `#ffffff` | Primary Page Canvas | High | High | Declared Token |
| `--body_typography-color` | `#333333` | Primary Text / Dark UI Elements | High | High | Declared Token |
| `--bg_color` | `#f5f5f5` | Secondary Section Backgrounds | Medium | High | Declared Token |
| `--awb-color6` | `#747474` | Muted Body / Testimonial Text | Medium | High | Declared Token |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--primary_color` | `#00548a` | Primary Brand Blue (Headers, CTAs) | High | High | Declared Token |
| `--awb-color5` | `#a0ce4e` | Secondary Accent (Badges/Success) | Low | Medium | Declared Token |
| `--button_bevel_color` | `#00314c` | Deep Blue Shadow/Bevel for CTAs | Medium | High | Declared Token |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `--success_bg_color` | `#dff0d8` | Success notifications |
| `--warning_bg_color` | `#fcf8e3` | Warning alerts |
| `--danger_bg_color` | `#f2dede` | Error/Danger alerts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Sans-Serif (System) | 400, 700 | All headers and body | Inter or Roboto | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{h1}` | 36px | 1.2 | 0 | 700 | Main Hero Titles | `--h1_typography-color` |
| `{h2}` | 30px | 1.3 | 0 | 700 | Section Headers | `--h2_typography-color` |
| `{h3}` | 24px | 1.4 | 0 | 700 | Sub-section Headers | `--h3_typography-color` |
| `{h5}` | 18px | 1.4 | 0 | 700 | Small Headers | `--h5_typography-color` |
| `{body}` | 16px | 1.6 | 0 | 400 | Standard Prose | `--body_typography-color` |
| `{nav}` | 14px | 1.0 | 0.5px | 700 | Top Navigation | `--nav_typography-color` |
| `{footer-head}` | 16px | 1.5 | 1px | 700 | Footer Column Titles | `--footer_headings_typography-color` |
| `{caption}` | 13px | 1.4 | 0 | 400 | Form labels / Muted text | `--form_text_color` |

### Principles
1. **Blue for Priority:** H1 and H5 headers use the brand blue `#00548a`, while H2-H4 remain neutral `#333333`.
2. **Generous Leading:** Body text maintains a 1.6 line-height to ensure legibility in technical descriptions.
3. **Uppercase Navigation:** Top-level menu items use bold, high-contrast text for clear information architecture.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | Element internal padding |
| `{space.md}` | 24px | Card internal padding |
| `{space.xl}` | 60px | Section vertical padding |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, standard inputs | Observed on site |
| `{radius.sm}` | 4px | Primary CTA Buttons | Observed on site |
| `{radius.full}` | 9999px | Social media icon circles | `--icon_circle_color` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| Flat | 0px | Standard sections | Default |
| Sunken | Inner shadow | Form inputs | `--form_focus_border_color` |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Get a Quote")
**Pages observed:** Home, About
**Spec:** Background: gradient (`#00548a` to `#00548a`) / Text: `#ffffff` / Radius: 4px / Bevel: `#00314c`
**States observed:** Default | Hover: `#003e68` | Focus: Not captured

#### Social Icon Circle
**Role:** Footer and Header social links
**Pages observed:** Home, About
**Spec:** Background: `#333333` / Icon: `#ffffff` / Radius: 9999px
**States observed:** Default | Hover: `#00548a` (Primary Blue)

### Tier 2: Patterns

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** Home
**Spec:** Title Text: `#00548a` / Divider: 1px solid `#e0dede` / Content Text: `#333333`
**States observed:** Default | Active: Title remains blue

#### Checklist
**Role:** Feature lists
**Pages observed:** Home, About
**Spec:** Icon: `#00548a` / Divider: 1px solid `#e0dede` / Text: `#333333`
**States observed:** Default

### Tier 3: Surface-specific

#### Team Card
**Role:** Employee profiles
**Pages observed:** About
**Spec:** Border: 1px solid `#ebeaea` / Background: `#ffffff` / Title: `#333333` / Subtitle: `#00548a`
**States observed:** Default

#### Hero Banner
**Role:** Page introduction
**Pages observed:** Home, About
**Spec:** Overlay: Dark semi-transparent / Text: `#ffffff` / Alignment: Center
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px |
| Section Padding | 60px (Vertical) |
| Grid Gutter | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Navigation collapses to hamburger; 3-column grids stack to 1-column. |
| Desktop | > 1024px | Full horizontal menu; 12-column grid active. |

## Imagery & decoration
- **Technical Overlays:** Use of circuit-board or network-node patterns as low-opacity backgrounds behind hero text.
- **Industrial Photography:** High-quality imagery of automation hardware and engineering teams.
- **Avoids:** Rounded "bubbly" shapes, pastel colors, or playful illustrations.

## Do's
- Use `#00548a` for the most important action on any page.
- Apply `#e0dede` for all horizontal rules and list separators.
- Ensure all body text uses `#333333` for maximum contrast on white.
- Maintain a 1.6 line-height for prose blocks.
- Use uppercase for navigation and section labels.

## Don'ts
- **Wrong:** Using `#a0ce4e` (Green) for primary headers. **Right:** Use `#00548a`. **Reason:** Green is a secondary accent/success token, not a brand anchor.
- **Wrong:** Applying large border-radii to cards. **Right:** Keep corners sharp (0px) or minimal (4px). **Reason:** The brand identity is industrial and rigid.
- **Wrong:** Using sub-brand colors (if they existed) for parent navigation. **Right:** Navigation must remain achromatic or primary blue.

## Quick start

```css
/* CSS Variables */
:root {
  --kymera-blue: #00548a;
  --kymera-slate: #333333;
  --kymera-divider: #e0dede;
  --kymera-canvas: #ffffff;
  --kymera-muted: #747474;
}
```

## Agent prompt examples
- "Generate a pricing table using `#ffffff` background, `#e0dede` borders, and a primary button with `#00548a` background and a `#00314c` bevel."
- "Create a contact form with 0px border-radius, `#d2d2d2` borders, and `#333333` label text."
- "Design a hero section with a dark image overlay, white H1 text at 36px, and a centered blue CTA button."

## Known gaps
- Specific font family names were not declared in the token set (defaulted to system sans-serif).
- Animation durations for hover states were not captured in the source evidence.
- Mobile-specific spacing tokens (e.g., `--mobile-padding`) were not explicitly defined in the CSS variables.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Home | https://kymerasystems.com | 1440px | 2026-06-06 |
| About | https://kymerasystems.com/about | 1440px | 2026-06-06 |
| Mobile Home | https://kymerasystems.com | 390px | 2026-06-06 |