# Centurysoftware.com.my Design System

> Corporate stability meets digital transformation through deep purple foundations and high-contrast typography.

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

## TL;DR
Century Software utilizes a high-contrast, professional palette dominated by a deep primary purple (#491189) and a vibrant accent blue (#2ea3f2). The system relies on a clean white foundation (#ffffff) with structured achromatic text layers ranging from deep black (#0a0a0a) to soft grays (#666666). Typography is defined by the pairing of the geometric sans-serif Raleway for headings and Open Sans for functional body text, often utilizing heavy weights (700-900) for display moments. Components are characterized by sharp edges or very subtle rounding (8px), maintaining a formal, enterprise-grade aesthetic.

## Signature DNA
1. **Deep Purple Anchoring:** The use of #491189 as a primary surface and button background provides a heavy, authoritative base for the brand (observed on Homepage and About pages).
2. **High-Weight Raleway Display:** Headlines frequently use Raleway at weight 900 or 700, creating a bold, "stamped" typographic hierarchy that signals confidence.
3. **Dotted Brand Accents:** A recurring decorative motif of purple and blue dot grids provides texture to hero sections and transitions without breaking the professional grid.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, button text | 60 | 1.0 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Primary text, shadow definitions | 30 | 1.0 | `--wp--preset--color--black` |
| `{color.ink}` | `#0a0a0a` | Primary body and heading text | 60 | 0.8 | computed_style |
| `{color.gray.dark}` | `#434343` | Secondary text | 32 | 0.8 | computed_style |
| `{color.gray.medium}` | `#666666` | Muted body text, navigation links | 119 | 0.8 | computed_style |
| `{color.border.light}` | `#d9d9d9` | Canvas borders, dividers | 6 | 1.0 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#491189` | Primary CTAs, section backgrounds | 10 | 0.6 | computed_style |
| `{color.accent.blue}` | `#2ea3f2` | Links, icons, decorative accents | 35 | 0.8 | computed_style |
| `{color.accent.purple}` | `#8300e9` | Decorative text moments | 5 | 0.6 | computed_style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.error}` | `#cf2e2e` | Validation (from `--wp--preset--color--vivid-red`) |
| `{color.success}` | `#00d084` | Success (from `--wp--preset--color--vivid-green-cyan`) |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Raleway | 400, 500, 600, 700, 900 | Headings, Display | Raleway (Google Fonts) | OFL |
| Open Sans | 400, 500, 600, 700 | Body, UI Labels | Open Sans (Google Fonts) | OFL |
| Verdana | 600 | Navigation (legacy) | System Sans | Proprietary |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.lg}` | 45px | 51.2px | normal | 700 | Main Hero H1 | `h1` |
| `{type.display.md}` | 45px | 23.8px | normal | 900 | Hero Sub-text | `p.txt-w-n` |
| `{type.heading.lg}` | 38px | 42.24px | normal | 400 | Section Headers | `p.skh2` |
| `{type.heading.md}` | 32px | 40px | normal | 400 | Subsection Headers | `p#hshedwbg` |
| `{type.heading.sm}` | 26px | 28.8px | normal | 500 | Card Titles | `p#h2subhead` |
| `{type.body.lg}` | 18px | 23.8px | normal | 600 | Strong Body / Subheads | `h2.entry-title` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Default Body | `p:nth-of-type(2)` |
| `{type.body.sm}` | 14px | 23.8px | normal | 500 | Footer / Small Text | `article#post-11` |

### Principles
1. **Heading Weight Contrast:** Use Raleway at 900 for high-impact display moments and 400-500 for standard section headers.
2. **Tight Line Heights on Display:** Large display type (45px) uses a compressed line-height (approx 0.5x size) when used for short, punchy phrases.
3. **Open Sans for Utility:** All interactive UI elements and long-form body copy must use Open Sans for legibility.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 4px | 4 |
| `{space.sm}` | 10px | 17 |
| `{space.md}` | 20px | 46 |
| `{space.lg}` | 30px | 13 |
| `{space.xl}` | 54px | 8 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Sections, standard containers | 334 occurrences |
| `{radius.md}` | 8px | Primary buttons | Rounded Button component |
| `{radius.lg}` | 10px | Cards, specific UI controls | Card component |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.flat}` | none | Default state | 334 occurrences |
| `{shadow.nav}` | `rgba(0, 0, 0, 0.1) 0px 1px 0px 0px` | Header sticky state | Navigation component |
| `{shadow.card}` | `rgb(239, 239, 239) 0px 0px 15px 0px` | Hover/Active cards | Card component |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary Call to Action (e.g., "Schedule A Demo")
**Pages observed:** Homepage, About
**Spec:** Background: `{color.primary}` (#491189) / Text: `{color.white}` (#ffffff) / Radius: 8px / Padding: 1px 22px / Typography: Raleway 18px
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Surface (Standard)
**Role:** Content sections and containers
**Pages observed:** Homepage, About
**Spec:** Background: `{color.white}` (#ffffff) / Text: `{color.ink}` (#0a0a0a) / Radius: 0px / Padding: 36px 80px
**States observed:** Default

### Tier 2: Patterns

#### Navigation (Main)
**Role:** Site-wide header navigation
**Pages observed:** Homepage, About
**Spec:** Background: `{color.white}` (#ffffff) / Text: `{color.gray.medium}` (#666666) / Border-bottom: 1px `{color.border.light}` (#d9d9d9) / Shadow: `{shadow.nav}`
**States observed:** Default

#### Card (Interactive)
**Role:** Feature highlights and industry insights
**Pages observed:** Homepage
**Spec:** Background: transparent / Radius: 10px / Shadow: `{shadow.card}` / Typography: Open Sans 14px
**States observed:** Default

### Tier 3: Surface-specific

#### Hero Surface
**Role:** High-impact brand sections
**Pages observed:** Homepage, About
**Spec:** Background: `{color.primary}` (#491189) / Text: `{color.white}` (#ffffff) / Radius: 0px
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max content width | 1200px (estimated from desktop screenshots) |
| Section Padding | 80px (horizontal) |
| Grid | 3-column (Industry Insights), 2-column (Hero splits) |

## Do's
- Use Raleway 900 for primary hero headlines to maintain brand authority.
- Apply `{color.primary}` (#491189) for all high-priority conversion buttons.
- Maintain sharp 0px corners for all structural section containers.
- Use `{color.accent.blue}` (#2ea3f2) for text links and iconography within white surfaces.
- Ensure 80px horizontal padding on main content surfaces.

## Don'ts
- Do not use Raleway for long-form body text; use Open Sans.
- Do not apply heavy shadows to standard buttons; keep them flat or use subtle 1px borders.
- Avoid using `{color.accent.blue}` as a background for primary buttons; this is reserved for the purple primary.
- Do not mix border radii; use 8px for buttons and 10px for cards exclusively.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #491189;
  --color-accent-blue: #2ea3f2;
  --color-white: #ffffff;
  --color-ink: #0a0a0a;
  --font-heading: 'Raleway', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --radius-button: 8px;
  --shadow-card: 0px 0px 15px 0px rgb(239, 239, 239);
}
```

## Known gaps
- Hover and Active states for primary buttons were not captured in the static evidence.
- Mobile navigation menu expansion behavior was not fully documented.
- Specific form input validation styles (error/success) were not present on the analyzed pages.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://centurysoftware.com.my | Desktop 1440px | 2026-06-06 |
| About Us | https://centurysoftware.com.my/about | Desktop 1440px | 2026-06-06 |
| Homepage (Mobile) | https://centurysoftware.com.my | Mobile 390px | 2026-06-06 |