# Alachisoft Design System

> High-contrast enterprise engineering aesthetic defined by electric blue foundations, stark white surfaces, and technical yellow accents.

**Source:** [https://alachisoft.com](https://alachisoft.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 3
**Brand layer:** parent | **Related brands:** NCache (product brand)

## TL;DR
Alachisoft employs a high-density, "monochrome-plus-one" system where a deep electric blue (`#0045ff`) serves as the primary structural anchor. The interface relies on a crisp white canvas (`#ffffff`) populated by cards with generous 12px radii and subtle blue-tinted shadows. Typography is strictly **Roboto**, utilizing a wide range of weights from 300 (light body) to 900 (ultra-bold display) to establish a clear technical hierarchy. Vibrant yellow (`#ffc107`) is used sparingly as a high-signal accent for warnings and specific primary actions, creating a professional yet energetic developer-tool atmosphere.

## Signature DNA
1. **Electric Blue Anchoring** (`#0045ff`): Used for primary buttons, navigation highlights, and card borders, providing a consistent "brand thread" across all technical documentation and marketing pages.
2. **Technical Radius & Shadow**: A standard 12px corner radius on cards combined with a unique blue-tinted shadow (`rgba(0, 69, 255, 0.15)`) or a hard-offset "sticker" shadow (`rgb(122, 158, 255) 4px 4px 0px 0px`).
3. **Roboto Weight Extremes**: The system jumps between Light (300) for descriptive body text and Black (900) for hero display copy, emphasizing the "Extreme Performance" brand message through typographic contrast.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.white}` | `#ffffff` | Page background, card surface, button text | 209 | 1.0 | Computed Style |
| `{colors.dark}` | `#212529` | Primary body text | 502 | 0.8 | Computed Style |
| `{colors.gray-dark}` | `#343a40` | Borders and secondary headings | 49 | 1.0 | CSS Variable |
| `{colors.light}` | `#f8f9fa` | Section backgrounds, secondary buttons | 54 | 1.0 | CSS Variable |
| `{colors.blue-soft}` | `#f4f7ff` | Subtle card backgrounds | 13 | 1.0 | Brand Page |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
| :--- | :--- | :--- | :--- | :--- | :--- |
| `{colors.primary}` | `#0045ff` | CTA background, primary borders, links | 196 | 0.8 | Computed Style |
| `{colors.warning}` | `#ffc107` | High-signal text, warning states | 8 | 1.0 | CSS Variable |
| `{colors.yellow-bright}` | `#ffff00` | Secondary primary CTA (Playground) | 6 | 0.6 | Computed Style |
| `{colors.navy}` | `#061d5d` | Footer and deep section backgrounds | 8 | 0.6 | Computed Style |
| `{colors.danger}` | `#dc3545` | Decorative/Error (decorative_only) | 2 | 1.0 | CSS Variable |

### Semantic
| Token | Hex | Role |
| :--- | :--- | :--- |
| `{colors.success}` | `#28a745` | Confirmation states (declared) |
| `{colors.warning}` | `#ffc107` | Alerts and highlighted technical notes |
| `{colors.error}` | `#dc3545` | Critical errors and danger zones |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
| :--- | :--- | :--- | :--- | :--- |
| **Roboto** | 300, 400, 600, 700, 900 | All UI, Headings, and Body | N/A (Google Font) | Apache 2.0 |
| **-apple-system** | 400, 600, 700 | System fallbacks, cookie banners | Inter | System |
| **Font Awesome 5** | 400, 900 | UI Icons | N/A | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
| :--- | :--- | :--- | :--- | :--- | :--- | :--- |
| `{type.display}` | 52px | 62.4px | normal | 900 | Hero Headlines | `span.font-weight-bolder` |
| `{type.h1}` | 34px | 40.9px | normal | 700 | Section Heroes | `h2.h2_slider_inner` |
| `{type.h2}` | 30px | 36px | normal | 700 | Primary Page Titles | `h1.my-2` |
| `{type.h3}` | 24px | 28.8px | normal | 700 | Section Headings | `h2.pb-4.mb-4` |
| `{type.h4}` | 20px | 24px | normal | 700 | Card/Sub-headers | `h2.h2_sizeh3.subheader` |
| `{type.body-lg}` | 18px | 28.1px | normal | 300 | Lead Paragraphs | `p.card-text.my-4` |
| `{type.body}` | 16px | 25.6px | normal | 400 | Default Text | `div.container-fluid` |
| `{type.body-sm}` | 14px | 23.0px | normal | 400 | Nav links, lists | `li:nth-of-type(1)` |
| `{type.caption}` | 12px | 19.6px | normal | 400 | Footer links | `a.nav-link.text-dark` |

### Principles
1. **Weight Contrast**: Pair weight 900 display text with weight 300 lead text for maximum visual impact in hero sections.
2. **Roboto Dominance**: Do not use serif fonts; all technical and marketing copy must remain in the Roboto family.
3. **Standardized Leading**: Maintain a 1.5x to 1.6x line-height for body text to ensure legibility in dense technical documentation.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
| :--- | :--- | :--- |
| `{space.xs}` | 8px | 242 |
| `{space.sm}` | 16px | 219 |
| `{space.md}` | 24px | 54 |
| `{space.lg}` | 48px | 39 |
| `{space.xl}` | 80px | 6 |

## Border radius
| Token | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{radius.none}` | 0px | Layout containers, sharp sections | 1076 occurrences |
| `{radius.sm}` | 6px | Primary Buttons | Rounded Button component |
| `{radius.md}` | 12px | Feature Cards | Card component |
| `{radius.lg}` | 24px | Modals / Large Panels | Radii scale evidence |

## Elevation
| Level | Value | Use | Evidence |
| :--- | :--- | :--- | :--- |
| `{shadow.soft}` | `rgba(0, 69, 255, 0.15) 0px 4px 20px 0px` | Primary Buttons, Hovered Cards | Rounded Button component |
| `{shadow.hard}` | `rgb(122, 158, 255) 4px 4px 0px 0px` | Featured Content Cards | Card component (12 occurrences) |
| `{shadow.inset}` | `rgba(0, 0, 0, 0.1) 0px 1px 2px 0px inset` | Form Inputs | Text Input component |

## Components
### Tier 1: Foundational
#### Rounded Button (Primary)
**Role:** Main call to action (Download, Buy, etc.)
**Pages observed:** All
**Spec:** Background: `#0045ff` | Text: `#ffffff` | Border: `1px solid #0045ff` | Radius: `6px` | Padding: `8px 16px` | Shadow: `{shadow.soft}`
**States observed:** Default | Active: Captured

#### Text Input
**Role:** Form fields for newsletter and contact
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#323232` | Border: `1px solid #b0b6bb` | Radius: `4px` | Padding: `12px 16px` | Shadow: `{shadow.inset}`
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying product features or use cases
**Pages observed:** Homepage, About
**Spec:** Background: `#ffffff` | Text: `#212529` | Border: `1px solid rgba(0, 69, 255, 0.125)` | Radius: `12px` | Padding: `24px 20px`
**States observed:** Default | Hover: Often triggers `{shadow.soft}`

#### Navigation Bar
**Role:** Global site header
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#212529` | Border: `none` | Radius: `0px` | Padding: `8px 48px` | Typography: `16px Roboto`
**States observed:** Default

### Tier 3: Surface-specific
#### Sticker Card
**Role:** High-emphasis case studies or benchmarks
**Pages observed:** Homepage
**Spec:** Background: `#ffffff` | Text: `#212529` | Border: `1px solid rgba(0, 0, 0, 0.125)` | Radius: `12px` | Shadow: `{shadow.hard}`
**States observed:** Default

#### Dark Surface Section
**Role:** Footer or high-contrast content bands
**Pages observed:** All
**Spec:** Background: `#061d5d` | Text: `#ffffff` | Border: `none` | Radius: `0px` | Padding: `54px 48px`
**States observed:** Default

## Layout
| Property | Value |
| :--- | :--- |
| Max Content Width | 1140px (standard Bootstrap container) |
| Section Padding (Vertical) | 80px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
| :--- | :--- | :--- |
| Mobile | < 768px | Navigation collapses to hamburger; padding-x reduces to 15px; font-size display scales down. |
| Desktop | 1200px+ | 12-column grid active; horizontal nav visible. |

## Do's
- Use `#0045ff` for all primary interactive elements.
- Apply a `12px` radius to all content cards.
- Use `Roboto` weight `900` for hero headlines to maintain brand "Extreme" energy.
- Ensure all cards on white backgrounds use the subtle blue border `rgba(0, 69, 255, 0.125)`.
- Use the yellow accent `#ffc107` strictly for high-signal technical warnings or specific "Playground" CTAs.

## Don'ts
- **Wrong:** Using `#007bff` (standard Bootstrap blue) instead of brand `#0045ff`.
- **Wrong:** Applying sharp `0px` corners to content cards.
- **Wrong:** Using serif fonts for any technical documentation.
- **Wrong:** Mislabeling the NCache product orange/red as the Alachisoft parent primary color.
- Do not use the hard sticker shadow `{shadow.hard}` on every card; reserve it for featured case studies.

## Similar brands
- Microsoft Azure (Technical blue/white palette)
- Redis (Developer-centric high-contrast UI)
- Datadog (High-density enterprise data visualization)

## Quick start
```css
/* CSS Custom Properties */
:root {
  --alachisoft-primary: #0045ff;
  --alachisoft-accent: #ffc107;
  --alachisoft-bg: #ffffff;
  --alachisoft-text: #212529;
  --alachisoft-radius-card: 12px;
  --alachisoft-shadow-soft: rgba(0, 69, 255, 0.15) 0px 4px 20px 0px;
}
```

## Known gaps
- Hover and Focus states for secondary buttons were not fully captured in the automated run.
- Mobile-specific typography scaling (fluid type) was not explicitly defined in the tokens.

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