# Ndacorp Design System

> Corporate blue precision anchored by light-weight Open Sans typography and sharp-edged monochrome surfaces.

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

## TL;DR
Ndacorp utilizes a high-contrast corporate identity defined by a primary "Signal Blue" (#1473cc) accent against a strictly monochrome foundation of white (#ffffff) and various grays. The system relies on sharp geometry (0px radii) for buttons and inputs, creating a technical, utility-first aesthetic. Typography is dominated by Open Sans, specifically leveraging a signature light weight (300) for large display headings to maintain an airy, professional feel despite the heavy use of dark footer surfaces. Layouts are structured around a 1200px container with significant vertical rhythm provided by 40px spacing increments.

## Signature DNA
1. **Light-Weight Display:** Headings use Open Sans at weight 300 (31px), creating a sophisticated, thin-stroke contrast against bold body text and heavy blue accents.
2. **Sharp-Edge Utility:** Every interactive element, from primary CTAs to form inputs, uses a 0px border radius, signaling a rigid, corporate engineering focus.
3. **Achromatic Grounding:** The brand uses #000000 and #1473cc as anchor points, with #777777 serving as the primary bridge for secondary text and icons.

## Family Map
Not captured in source (no sub-brands identified in topology).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-white` | `#ffffff` | Page background, button text, card surfaces | 57 | 0.8 | computed_style |
| `color-gray-medium` | `#777777` | Secondary body text, footer links | 68 | 0.8 | computed_style |
| `color-black` | `#000000` | Primary text, dark section backgrounds | 6 | 0.6 | computed_style |
| `color-gray-light` | `#e6e6e6` | Tertiary text, disabled states | 11 | 0.8 | computed_style |
| `color-gray-border` | `#cccccc` | Input borders, dividers | 8 | 0.6 | computed_style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `color-primary` | `#1473cc` | Primary buttons, active nav, brand icons | 33 | 0.8 | computed_style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Open Sans | 100, 200, 300, 400, 600, 700 | Primary UI & Headings | N/A (Google Font) | Apache 2.0 |
| Georgia | 400 | Editorial body copy | N/A | System Serif |
| FontAwesome | 400 | UI Icons | N/A | SIL OFL 1.1 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `text-display` | 31px | 42px | -1px | 300 | Hero headings | `h2.mb-xl` |
| `text-heading-lg` | 31px | 42px | -1px | 700 | Emphasized headings | `strong` |
| `text-heading-md` | 23px | 27px | normal | 200 | Section sub-heads | `h4` |
| `text-body-serif` | 17px | 21.84px | normal | 400 | Narrative paragraphs | `p` |
| `text-body` | 15px | 24px | normal | 400 | List items | `li` |
| `text-ui-sm` | 14px | 22px | normal | 400 | General UI text | `div.body` |
| `text-label-bold` | 14px | 18px | normal | 600 | Small headings | `h5.heading-primary` |
| `text-button` | 14px | 20px | normal | 400 | CTA labels | `button.btn` |
| `text-caption` | 12px | 24px | normal | 400 | Metadata | `span` |

### Principles
1. **Heading Contrast:** Large headings alternate between weight 300 for a "light" feel and 700 for "strong" emphasis at the same 31px size.
2. **Serif for Prose:** Long-form paragraph text switches to Georgia (17px) to improve readability against the sans-serif UI.
3. **Tight Display Tracking:** Large headings (31px) use -1px letter spacing to maintain visual density.

## Spacing
**Base unit:** 5px
| Token | Value | Occurrences |
|---|---|---|
| `space-xs` | 5px | 15 |
| `space-sm` | 10px | 34 |
| `space-md` | 20px | 14 |
| `space-lg` | 40px | 11 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `radius-none` | 0px | Buttons, Inputs, Panels | `button.btn`, `input#q` |
| `radius-full` | 30px | Decorative panels (rare) | `radii` evidence |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `inner-shadow` | `rgba(0, 0, 0, 0.075) 0px 1px 1px 0px inset` | Form inputs | `input#q` |

## Components
### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Request a Demo")
**Pages observed:** 1
**Spec:** Background: `#1473cc` | Text: `#ffffff` | Border: `1px solid #1473cc` | Radius: `0px` | Padding: `6px 12px` | Typography: `Open Sans 14px`
**States observed:** Default: Captured | Hover: Not captured | Focus: Not captured

#### Text Input
**Role:** Search and form fields
**Pages observed:** 1
**Spec:** Background: `#ffffff` | Text: `#555555` | Border: `1px solid #cccccc` | Radius: `0px` | Padding: `6px 12px` | Shadow: `rgba(0, 0, 0, 0.075) inset`
**States observed:** Default: Captured | Hover: Not captured

### Tier 2: Patterns

#### News Card
**Role:** Content grouping for latest updates
**Pages observed:** 1
**Spec:** Background: `#f4f7f9` (inferred from screenshot) | Text: `#1473cc` (links) | Border: `none` | Radius: `0px` | Padding: `20px`
**States observed:** Default: Captured

#### Navigation Item
**Role:** Top-level site navigation
**Pages observed:** 1
**Spec:** Background: `transparent` | Text: `#1473cc` | Typography: `Open Sans 13px 700` | Padding: `10px 15px`
**States observed:** Default: Captured | Active: `#1473cc` background with `#ffffff` text.

### Tier 3: Surface-specific

#### Footer
**Role:** Global site footer
**Pages observed:** 1
**Spec:** Background: `#000000` | Text: `#777777` | Border-top: `5px solid #1473cc` (inferred from screenshot)
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Max-width | 1200px |
| Section Padding | 40px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | < 768px | Navigation collapses to hamburger menu; buttons stack to full width. |

## Imagery & decoration
Ndacorp uses high-tech architectural photography (blue-tinted glass buildings) and stylized globe graphics with network nodes. Visuals are often overlaid with semi-transparent dark washes (`rgba(0,0,0,0.5)`) to ensure white text legibility.

## Do's
- Use **Open Sans 300** for all primary page headings.
- Maintain **0px border radius** on all interactive components.
- Use **#1473cc** for all primary actions and text links.
- Apply **Georgia** for long-form paragraph content to distinguish from UI labels.
- Ensure footer backgrounds remain **#000000** for high-contrast grounding.

## Don'ts
- **Wrong:** Using rounded corners on buttons. **Right:** 0px radius. **Reason:** The brand identity is built on rigid, corporate geometry.
- **Wrong:** Using #1473cc for body text. **Right:** #000000 or #777777. **Reason:** Blue is reserved for interactive signals and branding.
- **Wrong:** Mislabeling a sub-brand color as the parent primary. **Right:** Stick to #1473cc. **Reason:** Parent brand consistency is monochrome + Signal Blue.

## Similar brands
- IBM (Blue/Gray corporate precision)
- Cisco (Network-centric imagery and blue accents)
- Intel (Technical typography and clean white surfaces)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #1473cc;
  --color-black: #000000;
  --color-gray: #777777;
  --color-white: #ffffff;
  --font-display: 'Open Sans', sans-serif;
  --font-body: 'Georgia', serif;
  --radius-none: 0px;
  --space-md: 20px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #1473cc;
  --color-neutral-700: #777777;
  --font-sans: "Open Sans";
  --font-serif: "Georgia";
  --radius-none: 0px;
}
```

## Agent prompt examples
- "Create a primary CTA button using #1473cc background, white text, 0px border radius, and 14px Open Sans."
- "Generate a hero section with a 31px heading in Open Sans weight 300 and -1px letter spacing."
- "Design a footer component with #000000 background and #777777 text links."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the computed style evidence.
- Mobile-specific typography scale was not fully sampled.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://ndacorp.com | 1440px | 2026-06-06 05:14 |