# Nicus Design System

> High-contrast corporate clarity anchored by deep navy ink and vibrant mint-green accents.

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

## TL;DR
Nicus utilizes a high-contrast palette of Dark Purple (#150b47) and White (#ffffff) to establish a professional, data-driven atmosphere. The system is punctuated by a high-energy Green (#47ea94) used for primary calls to action and section highlights. Typography is a structured pairing of **Roboto Slab** for authoritative headlines and **Nunito** for approachable, legible body and UI text. Layouts favor generous vertical rhythm with section padding ranging from 40px to 70px, often alternating between white and light grey (#f4f5f6) backgrounds to maintain content separation.

## Signature DNA
1. **The Slab-to-Sans Handover:** Headlines use heavy-weight Roboto Slab (700) to signal financial authority, while all interactive and descriptive elements transition to Nunito for a modern SaaS feel.
2. **Chromatic Punctuation:** The system uses "Green" (#47ea94) as a high-voltage signal for progress and action, often paired with "Dark Purple" (#150b47) text for maximum legibility.
3. **Alternating Surface Bands:** Content is organized into full-width horizontal bands that alternate between White (#ffffff), Light Grey (#f4f5f6), and high-saturation Purple (#684def) or Green (#47ea94) floods.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.dark-purple}` | `#150b47` | Primary text, button backgrounds, branding | 89 | 1.0 | `--dark-purple` |
| `{colors.white}` | `#ffffff` | Page background, button text, card surfaces | 57 | 1.0 | `--white` |
| `{colors.black}` | `#000000` | Secondary buttons, deep shadows, footer text | 32 | 1.0 | `--black` |
| `{colors.grey}` | `#f4f5f6` | Section backgrounds, subtle surfaces | 4 | 1.0 | `--grey` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.green}` | `#47ea94` | Primary CTA background, section highlights | 31 | 1.0 | `--green` |
| `{colors.purple}` | `#684def` | Secondary CTA borders, feature section floods | 17 | 1.0 | `--purple` |
| `{colors.light-green}` | `#e1ffe1` | Decorative background floods | 13 | 1.0 | `--light-green` |
| `{colors.light-purple}` | `#716d8e` | Decorative only | 1 | 0.6 | `--light-purple` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| Roboto Slab | 700 | Display, Headlines | Google Fonts | Apache 2.0 |
| Nunito | 400, 500, 600, 700 | Body, UI, Buttons | Google Fonts | SIL OFL |
| Helvetica | 400 | Form elements | Arial | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display}` | 72px | 79.2px | -1.44px | 700 | Hero H1 | `h1` |
| `{type.h2}` | 34px | 44.2px | 0.34px | 700 | Section Head | `h2` |
| `{type.h3}` | 28px | 36.4px | -0.56px | 700 | Sub-section Head | `h3` |
| `{type.h4}` | 26px | 33.8px | -0.52px | 700 | Card Titles | `h4` |
| `{type.cta}` | 20px | 24px | normal | 700 | Primary Buttons | `a.cta.green` |
| `{type.body-lg}` | 19px | 26.6px | -0.1px | 400 | Lead Paragraphs | `p` |
| `{type.body}` | 16px | 22.4px | -0.1px | 400 | Standard Body | `p` |
| `{type.caption}` | 10px | 15px | -0.1px | 400 | Overlines/Small | `section.mast-slider` |

### Principles
1. **Serif for Authority:** Roboto Slab is strictly reserved for static headings to ground the brand in "Financial Management" aesthetics.
2. **Sans for Action:** All interactive elements (buttons, nav, forms) use Nunito to maintain a modern software feel.
3. **Tight Display Tracking:** Larger headlines (72px) use aggressive negative letter-spacing (-1.44px) to maintain visual tension.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 10px | 12 |
| `{space.sm}` | 20px | 25 |
| `{space.md}` | 30px | 42 |
| `{space.lg}` | 40px | 17 |
| `{space.xl}` | 60px | 19 |
| `{space.section}` | 70px | 6 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Section containers | 220 occurrences |
| `{radius.sm}` | 3px | Buttons, Form inputs | `a.cta`, `input` |
| `{radius.md}` | 5px | Content surfaces | `Surface` component |
| `{radius.full}` | 50px | Decorative panels | 11 occurrences |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.card}` | `rgba(0, 0, 0, 0.4) 0px 2px 6px 0px` | Floating UI elements | 3 occurrences |

## Components
### Tier 1: Foundational
#### Primary Green Button
**Role:** Main call to action
**Pages observed:** Home, About
**Spec:** Background: `#47ea94` / Text: `#150b47` / Radius: `3px` / Padding: `12px 30px` / Typography: `Nunito 700 20px`
**States observed:** Default | Hover: Not captured

#### Primary Dark Button
**Role:** Secondary high-contrast action
**Pages observed:** Home, About
**Spec:** Background: `#150b47` / Text: `#ffffff` / Radius: `3px` / Padding: `12px 30px` / Typography: `Nunito 700 20px`

### Tier 2: Patterns
#### Resource Card
**Role:** Content grouping for blog/news
**Pages observed:** Home, About
**Spec:** Background: `#ffffff` / Border: `1px solid #b1b5c3` / Radius: `5px` / Padding: `0px 0px 70px`

#### Section Flood (Purple)
**Role:** High-impact content break
**Pages observed:** Home, About
**Spec:** Background: `#684def` / Text: `#ffffff` / Padding: `60px 0px`

### Tier 3: Surface-specific
#### Footer
**Role:** Site-wide navigation
**Pages observed:** Home, About
**Spec:** Background: `#f4f5f6` / Text: `#150b47` / Padding: `30px 0px`

#### Newsletter Bar
**Role:** Conversion surface
**Pages observed:** Home, About
**Spec:** Background: `#47ea94` / Text: `#150b47` / Padding: `40px 0px`

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1200px (estimated from screenshots) |
| Section Gap | 60px - 70px |
| Column Grid | 12-column desktop |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | 390px | Navigation collapses to hamburger; Section padding reduces to 30px; H1 scales down. |

## Imagery & decoration
Nicus uses photography of professional office environments and technology interfaces, often overlaid with a Dark Purple (#150b47) tint. Decorative elements include small geometric "dot" patterns and multi-colored horizontal line accents (Green, Purple, Orange) to signal connectivity.

## Do's
- Use **Roboto Slab 700** for all primary page headings.
- Apply **#47ea94 (Green)** for the most important action on any given screen.
- Maintain **#150b47 (Dark Purple)** as the primary text color on light backgrounds for 17.9:1 contrast.
- Alternate section backgrounds between White and **#f4f5f6 (Grey)** to define content boundaries.
- Use a **3px border radius** for all interactive components like buttons and inputs.

## Don'ts
- **Wrong:** Using #684def (Purple) for primary buttons. **Right:** Use #47ea94 (Green). **Reason:** Green is the designated "Action" color; Purple is a secondary branding/flood color.
- **Wrong:** Setting body copy in Roboto Slab. **Right:** Use Nunito. **Reason:** Serif fonts are reserved for display authority; sans-serif ensures UI legibility.
- **Wrong:** Using pure black (#000000) for primary headings. **Right:** Use #150b47. **Reason:** The brand identity is built on the deep navy "Dark Purple" ink.

## Similar brands
- ServiceNow (Platform depth, green accents)
- Apptio (TBM focus, corporate blue/purple)
- Workday (Clean typography, high-contrast UI)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --nicus-dark-purple: #150b47;
  --nicus-green: #47ea94;
  --nicus-purple: #684def;
  --nicus-grey: #f4f5f6;
  --nicus-white: #ffffff;
  --font-display: 'Roboto Slab', serif;
  --font-body: 'Nunito', sans-serif;
}
```

## Agent prompt examples
- "Generate a hero section with a #150b47 background tint, a white Roboto Slab 700 headline at 72px, and a #47ea94 primary button."
- "Create a 3-column feature grid using cards with 1px #b1b5c3 borders and 5px border radius."
- "Design a newsletter signup bar with a #47ea94 background and #150b47 Nunito 700 text."

## Known gaps
Hover and active states for buttons were not explicitly captured in the static evidence. The exact 12-column gutter width is inferred but not tokenized in the source.

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