# Serole Design System

> High-contrast enterprise azure anchored by sharp geometric containers and Raleway-driven information density.

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

## TL;DR
Serole utilizes a high-energy corporate palette dominated by Serole Azure (#00a0dc) against a clean white (#ffffff) foundation. The system is characterized by sharp corners (0px radius) for most structural elements, contrasted by occasional circular iconography and pill-shaped inputs. Typography relies on a dual-font strategy: Raleway provides a modern, slightly geometric feel for headings and emphasis, while WeblySleek UI handles dense body copy and UI labels. Layouts are strictly modular, using light gray (#eeeeee) and off-white (#f7f7f7) section bands to organize complex service offerings.

## Signature DNA
1. **The Azure Anchor** (#00a0dc is used for primary CTAs, active navigation states, and full-width section headers, creating a high-frequency rhythmic pulse across the page).
2. **Sharp Modularism** (A dominant use of `{radii.sharp}` (0px) for containers, cards, and buttons creates a precise, architectural feeling typical of enterprise IT services).
3. **Raleway Display** (Heading weights are locked at 600-700, using Raleway to provide a professional yet accessible technical voice).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.white}` | `#ffffff` | Primary background, button text | 411 | 1 | Computed Style |
| `{colors.gray-light}` | `#eeeeee` | Section backgrounds, card borders | 89 | 1 | Computed Style |
| `{colors.gray-soft}` | `#f7f7f7` | Alternating bands, input backgrounds | 38 | 0.8 | Computed Style |
| `{colors.ink-deep}` | `#333333` | Primary headings, dark text | 147 | 0.8 | Computed Style |
| `{colors.ink-medium}` | `#424242` | Default body text | 342 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{colors.primary}` | `#00a0dc` | Primary CTA, active nav, icons | 111 | 1 | Brand Page |
| `{colors.primary-dark}` | `#0077b5` | Secondary accents, hover states | 94 | 1 | Brand Page |
| `{colors.gray-muted}` | `#999999` | Tertiary text, disabled states | 42 | 0.8 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Raleway | 300, 400, 500, 600, 700 | Headings, subheadings | Raleway (Google Fonts) | SIL Open Font |
| WeblySleek UI | 400, 600, 700 | Body, UI labels, buttons | Segoe UI | Proprietary |
| FontAwesome | 400 | Iconography | FontAwesome | Free/Pro |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{text.h2}` | 30px | 39px | normal | 600 | Section titles | `h2` |
| `{text.h3}` | 27px | 35.1px | normal | 600 | Sub-section titles | `h3.unline` |
| `{text.h4}` | 23px | 29.9px | normal | 700 | Card headers | `h4.white.bluebg` |
| `{text.subheading}` | 18px | 23.4px | normal | 600 | Small headers | `h5` |
| `{text.body-lg}` | 18px | 23px | normal | 700 | Emphasized body | `p` |
| `{text.body}` | 16px | 27px | normal | 400 | Standard prose | `p` |
| `{text.ui-label}` | 14px | 23px | normal | 400 | Navigation, UI | `div#main` |
| `{text.caption}` | 12px | 23px | normal | 400 | Small links, meta | `a.smlinks` |

### Principles
1. **Heading Weight Consistency:** Primary section headings (`h2`) always utilize weight 600 for a balanced professional presence.
2. **Dense Line Heights:** Body copy uses a relatively tight 1.4x-1.6x line height to accommodate high information density.
3. **Azure Emphasis:** Interactive text and active states frequently switch to `{colors.primary}` (#00a0dc).

## Spacing
**Base unit:** 5px (inferred from common multiples)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 61 |
| `{space.sm}` | 10px | 106 |
| `{space.md}` | 15px | 93 |
| `{space.lg}` | 25px | 25 |
| `{space.xl}` | 40px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sharp}` | 0px | Default for cards, buttons, sections | 908 occurrences |
| `{radius.sm}` | 3px | Form inputs, small buttons | 13 occurrences |
| `{radius.md}` | 4px | Accent cards | 24 occurrences |
| `{radius.pill}` | 25px | Search inputs | 3 occurrences |
| `{radius.circle}` | 100% | Icon backgrounds | 34 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default state for all cards | 48 occurrences |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0) 0px 0px 1px 0px` | Icon card definition | 16 occurrences |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global site header
**Pages observed:** All
**Spec:** Background `{colors.white}` (#ffffff) | Text `{colors.ink-medium}` (#424242) | Radius `{radius.sharp}` | Padding 10px 0px 0px | Typography `{text.ui-label}`
**States observed:** Default | Active: `{colors.primary}` (#00a0dc)

#### Primary Button
**Role:** Main call to action
**Pages observed:** All
**Spec:** Background `{colors.primary}` (#00a0dc) | Text `{colors.white}` (#ffffff) | Radius `{radius.sharp}` | Padding 14px | Typography `{text.ui-label}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Service Card
**Role:** Grouping service categories
**Pages observed:** https://serole.com, https://serole.com/pricing
**Spec:** Background `{colors.gray-light}` (#eeeeee) | Text `{colors.ink-deep}` (#333333) | Radius `{radius.circle}` (for icon container) | Padding 12px | Shadow `{shadow.subtle}`
**States observed:** Default

#### Content Band
**Role:** Alternating page sections
**Pages observed:** All
**Spec:** Background `{colors.gray-soft}` (#f7f7f7) | Text `{colors.ink-medium}` (#424242) | Border `{colors.gray-soft}` | Radius `{radius.sharp}` | Padding 30px 0px
**States observed:** Default

### Tier 3: Surface-specific

#### Search Input
**Role:** Global site search
**Pages observed:** All
**Spec:** Background transparent | Text `{colors.gray-muted}` (#727272) | Border 1px `{colors.primary}` (#00a0dc) | Radius `{radius.pill}` (25px) | Padding 3px 18px
**States observed:** Default

#### Industry Icon
**Role:** Decorative industry identifiers
**Pages observed:** https://serole.com, https://serole.com/pricing
**Spec:** Background `{colors.white}` (#ffffff) | Border 1px `{colors.primary}` (#00a0dc) | Radius `{radius.circle}` | Padding 10px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1170px (standard container) |
| Section Gap | 50px-80px |
| Grid | 4-column (Industries), 2-column (Services) |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger; 4-column grids stack to 1-column |
| Desktop | 1440px | Full horizontal navigation; multi-column service grids |

## Imagery & decoration
Serole uses flat, two-tone blue and orange line-art illustrations for service categories. Real-world photography is reserved for the hero carousel, often overlaid with Serole Azure gradients. The brand avoids soft shadows and organic shapes, preferring rigid grids.

## Do's
- Use `{colors.primary}` (#00a0dc) for all primary action buttons.
- Maintain `{radius.sharp}` (0px) for all structural containers and cards.
- Use Raleway at weight 600 for all `h2` section titles.
- Alternate background colors between `{colors.white}` and `{colors.gray-soft}` for distinct sections.
- Ensure all icons are contained within `{radius.circle}` borders or backgrounds.

## Don'ts
- **Wrong:** Using #007cba (WordPress Blue) for primary buttons. **Right:** Use #00a0dc. **Reason:** #007cba is a system token, not the brand primary.
- Do not apply rounded corners to primary CTA buttons.
- Do not use Raleway for long-form body copy; use WeblySleek UI.
- Avoid using drop shadows on service cards; use 1px borders or background shifts instead.

## Similar brands
- Infosys
- Wipro
- HCLTech
- Cognizant

## Quick start

### CSS Custom Properties
```css
:root {
  --serole-primary: #00a0dc;
  --serole-primary-dark: #0077b5;
  --serole-white: #ffffff;
  --serole-gray-light: #eeeeee;
  --serole-gray-soft: #f7f7f7;
  --serole-ink-deep: #333333;
  --serole-ink-medium: #424242;
  --serole-radius-sharp: 0px;
  --serole-font-heading: 'Raleway', sans-serif;
  --serole-font-body: 'WeblySleek UI', sans-serif;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #00a0dc;
  --color-primary-dark: #0077b5;
  --color-surface-soft: #f7f7f7;
  --font-heading: "Raleway";
  --font-body: "WeblySleek UI";
  --radius-sharp: 0px;
}
```

## Agent prompt examples
- "Generate a service card using a #eeeeee background, 0px border radius, and a 23px Raleway Bold heading in #333333."
- "Create a primary CTA button with #00a0dc background, white text, 0px radius, and 14px padding."
- "Design a section header with a 30px Raleway SemiBold title and a 2px thick #00a0dc underline."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed styles.
- Mobile-specific typography scale for headings was not fully sampled.
- Specific transition timings for the hero carousel were not captured.

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