# Kognitivinc Design System

> Professional blue-chip consulting aesthetic anchored by deep corporate blues and high-contrast orange action points.

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

## TL;DR
Kognitivinc utilizes a structured, enterprise-grade design system characterized by a dominant primary blue (#1b74bc) and a high-visibility amber-orange (#ff9900) for primary conversions. The typography is exclusively **Poppins**, leveraging a wide range of weights from 100 to 700 to establish clear information hierarchy. Layouts are strictly modular, using white (#ffffff) or blue (#1b74bc) section blocks with generous vertical padding (up to 113px). UI elements are generally sharp-edged (0px radius), with the exception of specific interactive components like primary buttons and cards which use a 5px or pill-shaped radius.

## Signature DNA
1. **The "Consultant Blue" Block** (Large full-bleed sections using #1b74bc as a surface background, often paired with white text for high-impact messaging. Observed on Homepage and About pages.)
2. **Amber-Orange Conversion** (#ff9900 is reserved strictly for the most critical user actions, providing a 4.9:1 contrast ratio against white and immediate visual priority.)
3. **Poppins Hierarchy** (The systematic use of Poppins 700 for all headings and Poppins 400 for body text creates a consistent, modern sans-serif voice across the entire domain.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.white}` | `#ffffff` | Page background, text on blue surfaces | 49 | 1.0 | `--wp--preset--color--white` |
| `{color.black}` | `#000000` | Primary text, shadows | 9 | 1.0 | `--wp--preset--color--black` |
| `{color.gray.800}` | `#222222` | Dark heading text | 47 | 0.8 | Computed Style |
| `{color.gray.600}` | `#666666` | Secondary body text | 11 | 0.8 | Computed Style |
| `{color.gray.400}` | `#888888` | Muted text, icons | 104 | 0.8 | Computed Style |
| `{color.gray.100}` | `#eeeeee` | Borders, subtle backgrounds | 5 | 0.6 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#1b74bc` | Brand identity, surface backgrounds, links | 18 | 1.0 | Brand Page |
| `{color.action}` | `#ff9900` | Primary CTA background, active borders | 4 | 0.6 | Computed Style |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Poppins | 100, 400, 700 | Primary Brand Typeface | Poppins (Google Fonts) | OFL |
| Font Awesome 5 Pro | 300, 400 | Iconography, Display Icons | Font Awesome Free | Commercial |
| Times New Roman | 400, 700 | System Fallback | N/A | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display}` | 40px | 40px | normal | 300 | Icon display | `span.fal.fa-life-ring` |
| `{type.h1}` | 36px | 51.12px | normal | 700 | Hero headings | `h1.heading` |
| `{type.h3}` | 36px | 44.28px | normal | 700 | Section headings | `h3.heading` |
| `{type.h4}` | 24px | 29.52px | normal | 700 | Sub-section heads | `h4` |
| `{type.nav}` | 20px | 0px | normal | 400 | Menu items | `li.item` |
| `{type.body.lg}` | 18px | 28.44px | normal | 400 | Lead paragraphs | `p` |
| `{type.body}` | 16px | 24px | normal | 400 | Default body | `section` |
| `{type.body.sm}` | 14px | 22.12px | normal | 400 | Header/Footer links | `header#page-header` |
| `{type.button}` | 14px | 55px | normal | 400 | CTA text | `a.tm-button` |

### Principles
1. **Heading Weight Consistency:** All major headings (H1-H4) must use Poppins 700.
2. **Iconography Weight:** Icons from Font Awesome 5 Pro are consistently used at weight 300 to maintain a "light" technical feel.
3. **Tight Display:** Large display icons (40px) use a 1:1 line-height to maintain block alignment.

## Spacing
**Base unit:** 4px (approximate)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 5px | 24 |
| `{space.sm}` | 12px | 16 |
| `{space.md}` | 20px | 12 |
| `{space.lg}` | 40px | 7 |
| `{space.section}` | 113px | 7 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Default surfaces, navigation | 282 occurrences |
| `{radius.sm}` | 5px | Form inputs, content cards | `select.gt_selector`, `Card` |
| `{radius.pill}` | 28px | Primary CTA buttons | `Rounded Button` |

## Elevation
Table: | Level | Value | Use | Evidence |
|---|---|---|---|---|
| Flat | none | Standard sections and cards | `Surface`, `Navigation` |
| Natural | `--wp--preset--shadow--natural` | Not captured in visual use | CSS Variable |

## Components

### Tier 1: Foundational

#### Navigation
**Role:** Global site header
**Pages observed:** Homepage, About
**Spec:** Background #ffffff | Text #999999 | Radius 0px | Font Poppins 14px
**States observed:** Default captured | Hover/Active not captured

#### Rounded Button
**Role:** Primary call to action
**Pages observed:** Homepage
**Spec:** Background #ff9900 | Text #ffffff | Border 1px #ff9900 | Radius 28px | Padding 14px 20px
**States observed:** Default captured

### Tier 2: Patterns

#### Surface Section
**Role:** Standard content block
**Pages observed:** Homepage, About
**Spec:** Background #ffffff | Text #888888 | Radius 0px | Padding 39px 112.5px 47px
**States observed:** Default captured

#### Blue Surface Section
**Role:** High-impact brand block
**Pages observed:** About
**Spec:** Background #1b74bc | Text #ffffff | Radius 0px | Padding 0px 112.5px
**States observed:** Default captured

### Tier 3: Surface-specific

#### Content Card
**Role:** Information grouping (About page)
**Pages observed:** About
**Spec:** Background #ffffff | Text #999999 | Radius 5px | Font Poppins 14px
**States observed:** Default captured

#### Load More Button
**Role:** Pagination control
**Pages observed:** Homepage
**Spec:** Background #eeeeee | Text #999999 | Radius 0px | Font Poppins 14px
**States observed:** Default captured

## Layout
| Property | Value |
|---|---|
| Max content width | ~1140px |
| Section Padding (Vertical) | 113px |
| Section Padding (Horizontal) | 112.5px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Navigation collapses to hamburger menu; horizontal padding reduced. |
| Desktop | 1440px | Full horizontal padding (112.5px) applied to sections. |

## Imagery & decoration
- **Technical Line Art:** Uses thin-stroke yellow/orange line art (e.g., lightbulb/globe) to represent "Strategic Partner" concepts.
- **Consultant Photography:** High-quality, professional imagery of teams in collaborative environments.
- **Avoids:** Heavy drop shadows, rounded corners on structural sections, and vibrant gradients.

## Do's
- Use `#ff9900` for the "Get Started" primary action button.
- Apply `Poppins 700` to all section headings for brand consistency.
- Maintain `113px` vertical spacing between major homepage sections.
- Use `#1b74bc` for full-width background sections to break up white space.
- Keep icon weights at `300` when using Font Awesome 5 Pro.

## Don'ts
- **Wrong:** Using `#0693e3` (Vivid Cyan Blue) for primary brand surfaces. **Right:** Use `#1b74bc`. **Reason:** `#0693e3` is a preset token, but `#1b74bc` is the validated brand primary.
- Do not use border-radii on main structural `Surface` components.
- Do not use `#ff9900` for body text; it is reserved for interactive accents.
- Do not mix Poppins with other sans-serif fonts in the same section.

## Similar brands
- Deloitte (Corporate blue/white structure)
- Workday (Ecosystem partner alignment)
- Accenture (Professional services modularity)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #1b74bc;
  --color-action: #ff9900;
  --color-white: #ffffff;
  --color-gray-text: #888888;
  --font-family-main: 'Poppins', sans-serif;
  --radius-button: 28px;
  --spacing-section: 113px;
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": { "primary": { "value": "#1b74bc" } },
    "action": { "primary": { "value": "#ff9900" } },
    "neutral": { "white": { "value": "#ffffff" } }
  },
  "font": {
    "family": { "main": { "value": "Poppins" } }
  }
}
```

## Agent prompt examples
- "Generate a hero section with a #1b74bc background, Poppins 700 white heading, and a #ff9900 rounded button with 28px radius."
- "Create a 3-column feature grid using Poppins 400 for body text (#888888) and Poppins 700 for titles (#222222)."
- "Design a navigation bar with a #ffffff background and 14px Poppins links in #999999."

## Known gaps
- Hover and Active states for buttons were not explicitly captured in the static evidence.
- Mobile-specific typography scale (fluid type) was not provided in the source tokens.
- Specific shadow values for the "natural" and "deep" presets were declared but not observed in use on the sampled pages.

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