# Anandsystems Design System

> A professional hospitality foundation built on deep navy anchors, light-blue accents, and airy Poppins typography.

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

## TL;DR
Anandsystems utilizes a high-contrast "monochrome-plus" palette where deep navy (#00124e) and charcoal (#101923) provide structural weight against a clean white canvas. The system is characterized by its use of **Poppins** at a signature light weight (300) for large display headings, creating an editorial feel for a technical product. Interactive elements are strictly defined by navy primary buttons with sharp 2px radii, while content is organized within cards featuring soft shadows and light blue borders (#b4d7e9). The layout relies on generous vertical spacing and a structured grid to manage complex hospitality data visualizations.

## Signature DNA
1. **Lightweight Display Typography** (Poppins at weight 300 is used for all major hero and section headers, providing a sophisticated contrast to the heavy navy backgrounds.)
2. **The Navy Anchor** (The use of #00124e for primary CTAs and major section backgrounds creates a "trust-first" corporate identity common in hospitality tech.)
3. **Soft-Bordered Containers** (Cards and feature blocks use a specific light blue border #b4d7e9 at 1px, often paired with a complex multi-layered shadow to create depth without heavy lines.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--theme-body-background-color` | `#ffffff` | Page background, card surfaces | 255 | 1 | Computed Style |
| `--theme-h1-font-color` | `#272727` | Primary heading text | 99 | 1 | CSS Variable |
| `--theme-text-color` | `#101923` | Body text, form labels, borders | 1004 | 1 | CSS Variable |
| `--theme-surface-color` | `#f7f8fc` | Secondary section backgrounds | 37 | 1 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `--theme-primary-color` | `#00124e` | Primary buttons, brand headers | 19 | 1 | CSS Variable |
| `accent-blue` | `#2b4a93` | Decorative surfaces, icons | 66 | 0.8 | Computed Style |
| `border-light` | `#b4d7e9` | Card outlines, subtle dividers | 33 | 0.8 | Computed Style |
| `--theme-link-color` | `#4678ee` | Inline links (decorative_only) | 2 | 1 | CSS Variable |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `error` | `#ff0000` | Validation errors, alerts |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 300, 400, 500, 600, 700, 900 | Display & Heading | Poppins (Google Fonts) | SIL Open Font |
| Gilroy | 300, 400, 500, 600, 700, 800 | Body & UI | Inter | Commercial |
| Urbanist | 400, 500, 600, 700, 900 | Secondary UI | Urbanist (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `display-mega` | 60px | 60px | normal | 300 | Hero headlines | `span` |
| `display-lg` | 46px | 58.42px | normal | 300 | Counter numbers | `h1.counters-card-number-suffix` |
| `heading-xl` | 42px | 53.34px | normal | 600 | Section titles | `span` |
| `heading-lg` | 36px | 45.72px | normal | 600 | Secondary headers | `h2` |
| `heading-md` | 28px | 35.56px | normal | 600 | Card titles | `h3` |
| `heading-sm` | 24px | 30.48px | normal | 600 | Feature labels | `h3` |
| `body-lg` | 18px | 31.5px | normal | 400 | Lead paragraphs | `p` |
| `body-md` | 16px | 24px | normal | 400 | Standard body | `li` |
| `body-sm` | 14px | 23.8px | normal | 600 | Testimonial roles | `h6` |

### Principles
1. **Display weight is always 300.** Large text (>40px) must use Poppins Light to maintain brand elegance.
2. **High-contrast UI labels.** Small UI text often uses weight 600 or 700 to ensure legibility against colored backgrounds.
3. **Generous line-height.** Body text maintains a 1.5x to 1.75x ratio (e.g., 18px/31.5px) for readability.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|---|---|---|
| `space-xs` | 4px | 18 |
| `space-sm` | 12px | 28 |
| `space-md` | 16px | 81 |
| `space-lg` | 24px | 24 |
| `space-xl` | 32px | 24 |
| `space-section` | 60px | 12 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-sharp` | 0px | Section containers | 1313 occurrences |
| `radius-button` | 2px | Primary CTAs, Inputs | Rounded Button spec |
| `radius-card` | 9px | Feature cards | Card spec |
| `radius-lg` | 12px | Testimonial cards | Surface spec |
| `radius-xl` | 20px | Large image containers | Surface spec |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `shadow-card` | `rgba(0, 0, 0, 0.11) 0px 0.7px 0.7px 0px...` | Standard feature cards | 36 occurrences |
| `shadow-subtle` | `rgba(0, 0, 0, 0.07) 0px 0.6px 0.6px 0px...` | Hover states | 5 occurrences |

## Components

### Tier 1: Foundational
#### Rounded Button
**Role:** Primary action trigger
**Pages observed:** All
**Spec:** Background: `#00124e` | Text: `#ffffff` | Border: `1px solid #00124e` | Radius: `2px` | Padding: `12px 20px` | Typography: `Poppins 18px/500`
**States observed:** Default | Hover: Captured (Background: `#00124e`) | Active: Not captured

#### Text Input
**Role:** Form entry
**Pages observed:** All
**Spec:** Background: `#ffffff` | Text: `#101923` | Border: `1px solid rgba(16, 25, 35, 0.65)` | Radius: `2px` | Padding: `12px 16px`
**States observed:** Default | Focus: Captured (Border: `#101923`)

### Tier 2: Patterns
#### Feature Card
**Role:** Displaying product benefits
**Pages observed:** Homepage, About
**Spec:** Background: `transparent` | Border: `1px solid #b4d7e9` | Radius: `12px` | Padding: `60px 25px 32px` | Shadow: `shadow-card`
**States observed:** Default

#### Pricing Card
**Role:** Plan selection
**Pages observed:** Pricing, About
**Spec:** Background: `transparent` | Border: `1px solid #b4d7e9` | Radius: `9px` | Padding: `32px 25px` | Shadow: `shadow-card`
**States observed:** Default

### Tier 3: Surface-specific
#### Testimonial Slider
**Role:** Social proof
**Pages observed:** Homepage, About
**Spec:** Background: `transparent` | Text: `#101923` | Radius: `12px` | Typography: `Poppins 22px/500`
**States observed:** Default

#### Dark Section Surface
**Role:** High-impact content blocks
**Pages observed:** Homepage, Pricing
**Spec:** Background: `#f7f8fc` | Text: `#101923` | Radius: `0px` | Padding: `0px 25px`
**States observed:** Default

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1440px |
| Section Padding (Vertical) | 60px |
| Card Grid Gap | 25px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked card layouts, font size reduction for display-mega to ~32px |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), full-width hero sections |

## Do's
- Use **Poppins 300** for all headlines exceeding 40px.
- Apply the **#b4d7e9** border to all white-background cards.
- Maintain a **2px border radius** on all interactive form elements and buttons.
- Use **#f7f8fc** as the primary background for alternating content sections.
- Ensure primary buttons use the deep navy **#00124e**.

## Don'ts
- **Wrong:** Using #4678ee for primary buttons. **Right:** Use #00124e. **Reason:** #4678ee is a decorative link color and lacks the necessary brand weight for CTAs.
- **Wrong:** Applying large border radii (>4px) to buttons. **Right:** Keep buttons at 2px. **Reason:** The brand identity relies on sharp, professional geometry for controls.
- **Wrong:** Using bold weights for display headings. **Right:** Use weight 300. **Reason:** Bold Poppins at large sizes breaks the editorial "Signature DNA" of the brand.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --as-navy: #00124e;
  --as-charcoal: #101923;
  --as-white: #ffffff;
  --as-surface: #f7f8fc;
  --as-border: #b4d7e9;
  --font-display: 'Poppins', sans-serif;
  --font-body: 'Gilroy', sans-serif;
  --radius-button: 2px;
  --radius-card: 9px;
}
```

## Agent prompt examples
- "Create a pricing tier component using a transparent background, a 1px border of #b4d7e9, and a 9px border radius. Use Poppins 300 for the price heading."
- "Generate a primary CTA button with a background of #00124e, white text in Poppins 18px weight 500, and a sharp 2px border radius."
- "Design a content section with a background of #f7f8fc and a centered heading using Poppins 300 at 42px."

## Known gaps
- Hover states for secondary buttons were not captured in the source evidence.
- The specific transition timing for the testimonial slider was not captured.
- Mobile-specific navigation menu behavior was not fully analyzed.

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