# Decusoft Design System

> Corporate precision meets high-contrast utility through bold Montserrat headlines, deep navy anchors, and energetic cyan-to-orange interaction points.

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

## TL;DR
Decusoft utilizes a high-contrast palette of deep navy `#00467f` and white `#ffffff`, punctuated by a primary interaction color of vibrant cyan `#10d1d1`. Typography is anchored by **Montserrat**, used at heavy weights (700-800) for display and subheadings to convey authority. The system relies on sharp, 0px border radii for most structural elements, creating a rigid, professional grid, while using subtle 2px to 10px radii exclusively for interactive controls. Section pacing is generous, often utilizing light gray `#f5f5f5` floods to separate dense content blocks.

## Signature DNA
1. **The "Cyan-to-Orange" Pivot** (Primary actions use cyan `#10d1d1` for global CTAs, while secondary content links and "Read More" triggers pivot to high-visibility orange `#ef5d2e` to maintain hierarchy across dense pages.)
2. **Heavyweight Montserrat Display** (Headlines are consistently rendered in Montserrat at weights 700 or 800, often with tight or negative letter spacing on larger displays to create a "locked" editorial feel.)
3. **Sharp-Edge Containment** (Structural surfaces and cards maintain a 0px radius, signaling a "no-fluff" enterprise software aesthetic, contrasted only by the 100px pill-shaped secondary elements.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.canvas}` | `#ffffff` | Primary page background | 58 | 1.0 | Computed |
| `{color.ink}` | `#201727` | Primary body text and borders | 312 | 0.8 | Computed |
| `{color.surface.soft}` | `#f5f5f5` | Section alternating background | 16 | 1.0 | Computed |
| `{color.surface.neutral}` | `#eaeaea` | Decorative background elements | 6 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#10d1d1` | Primary CTA background, icons | 21 | 0.8 | Computed |
| `{color.secondary}` | `#00467f` | Deep navy headings, footer bg | 95 | 0.8 | Computed |
| `{color.action}` | `#ef5d2e` | Text links, secondary buttons | 192 | 0.8 | Computed |
| `{color.accent.orange}` | `#ff6600` | Decorative only (announcement bar) | 1 | 1.0 | WP Preset |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------------------|------|-----------------------|---------|
| Montserrat | 300, 400, 500, 600, 700, 800 | Display, Headings, UI | Montserrat (Google) | OFL |
| Roboto | 400, 600, 700 | Body, Tabs | Roboto (Google) | OFL |
| Raleway | 700 | Testimonial Names | Raleway (Google) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 55px | 55px | normal | 700 | Hero H1 | `h1.elementor-heading-title` |
| `{type.display.lg}` | 50px | 50px | -2px | 500 | Section H2 | `h2.elementor-heading-title` |
| `{type.heading.md}` | 29px | 37.44px | -0.28px | 400 | Testimonial Text | `div.elementor-testimonial__text` |
| `{type.heading.sm}` | 24px | 31px | normal | 300 | Sub-hero lead | `p` |
| `{type.subheading}` | 18px | 18px | 1px | 800 | Icon box titles | `h3.elementor-icon-box-title` |
| `{type.body.lg}` | 19px | 36.1px | normal | 500 | Navigation links | `a` |
| `{type.body}` | 16px | 25.6px | normal | 300 | Default body | `a#btn-close-mobile-menu` |
| `{type.button}` | 14px | 14px | 1.2px | 700 | Primary CTA text | `a.elementor-button-link` |

### Principles
1. **Display weight is 700+** for all primary value propositions.
2. **Negative tracking on display** (-2px) is used for H2 headers to increase visual density.
3. **Body copy uses weight 300** to provide maximum contrast against heavy headers.

## Spacing
**Base unit:** 4px (Inferred from 16px/24px/48px clusters)
Table: | Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 5px | 84 |
| `{space.md}` | 16px | 64 |
| `{space.lg}` | 25px | 25 |
| `{space.section}` | 90px | 2 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Structural cards, primary buttons | 737 occurrences |
| `{radius.sm}` | 2px | Small UI controls | Rounded Button component |
| `{radius.md}` | 10px | Form inputs | Control role |
| `{radius.pill}` | 100px | Badges, secondary accents | Panel role |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.modal}` | `rgba(0, 0, 0, 0.5) 0px 0px 10px 0px` | Floating popups | Surface (f5f5f5) |
| `{shadow.card}` | `rgba(0, 0, 0, 0.5) 5px 5px 10px 0px` | Hover states / Feature cards | Button (f1f2f3) |
| `{shadow.subtle}` | `rgba(0, 0, 0, 0.2) 0px 1px 2px 0px` | Inline buttons | Rounded Button |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main conversion action (Get Started)
**Pages observed:** https://decusoft.com, https://decusoft.com/about
**Spec:** Background `#10d1d1` | Text `#ffffff` | Radius `0px` | Padding `18px 15px` | Typography `Montserrat 700 14px`
**States observed:** Default | Hover: Not captured

#### Ghost Surface
**Role:** Secondary content containers
**Pages observed:** https://decusoft.com, https://decusoft.com/about
**Spec:** Background `transparent` | Border `1px solid #00467f` | Radius `0px` | Padding `20px 0px 0px`

### Tier 2: Patterns

#### Feature Card
**Role:** Benefit highlights
**Pages observed:** https://decusoft.com, https://decusoft.com/about
**Spec:** Background `#10d1d1` | Text `#ef5d2e` | Radius `0px` (Note: Evidence shows 10% variant but 0px dominates) | Shadow `none`

#### Testimonial Block
**Role:** Social proof
**Pages observed:** https://decusoft.com, https://decusoft.com/about
**Spec:** Background `#ffffff` | Text `#201727` | Typography `{type.heading.md}` | Padding `90px`

### Tier 3: Surface-specific

#### Floating Announcement
**Role:** High-priority alerts/resources
**Pages observed:** https://decusoft.com, https://decusoft.com/about
**Spec:** Background `#f5f5f5` | Shadow `rgba(0, 0, 0, 0.5) 0px 0px 10px 0px` | Radius `0px` | Padding `10px`

#### Footer Band
**Role:** Global site map
**Pages observed:** https://decusoft.com, https://decusoft.com/about
**Spec:** Background `#ffffff` | Text `#201727` | Border-top `1px solid #eaeaea`

## Layout
| Property | Value |
|----------|-------|
| Max-width | 1140px |
| Section Padding | 90px |
| Column Gap | 25px |

## Do's
- Use Montserrat 800 for all subheadings (`#18px`) with 1px letter spacing.
- Apply `#10d1d1` cyan exclusively for conversion-path buttons.
- Use `#f5f5f5` light gray for full-width section backgrounds to break up white space.
- Maintain sharp `0px` corners on all primary content cards.
- Use `#ef5d2e` orange for "Read More" text links to ensure visibility against white.

## Don'ts
- Do not use `#ff6600` (Vivid Orange) for UI components; it is reserved for the global announcement bar.
- Do not apply border-radius to primary conversion buttons.
- Do not use Roboto for headings; it is strictly for body and tab labels.
- Avoid using navy `#00467f` as a button background unless it is a tertiary action.

## Quick start

```css
:root {
  --decusoft-cyan: #10d1d1;
  --decusoft-navy: #00467f;
  --decusoft-orange: #ef5d2e;
  --decusoft-ink: #201727;
  --decusoft-canvas: #ffffff;
  --decusoft-surface-soft: #f5f5f5;
  
  --font-display: 'Montserrat', sans-serif;
  --font-body: 'Roboto', sans-serif;
}
```

## Known gaps
- Hover and Active states for the primary cyan buttons were not captured in the static evidence.
- Mobile-specific padding for the 90px section gaps was not explicitly defined in the viewport samples.
- The specific transition timing for the "elementor-animation" classes was not captured.