# Kpoint Design System

> High-contrast enterprise utility anchored by electric blue accents and a rigorous InterTight typographic hierarchy.

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

## TL;DR
Kpoint utilizes a high-contrast "monochrome plus one" strategy, where a stark white canvas (#ffffff) and deep charcoal footer (#343434) are punctuated by a singular electric blue primary color (#009bff). The system relies on the InterTight font family to bridge the gap between technical utility and modern enterprise aesthetics, using semi-bold weights for display and medium weights for interactive elements. Component geometry is distinctively rounded, favoring 16px radii for content containers and 44px to 50px pill shapes for buttons and panels, creating a softened professional interface.

## Signature DNA
1. **The Electric Primary** (#009bff is the exclusive chromatic driver for CTAs and active states, creating high-visibility focal points against neutral backgrounds).
2. **InterTight Hierarchy** (The system uses InterTight across all tiers, specifically leveraging the 600 weight for 64px display headers and 500 weight for 48px sub-headers to establish authority).
3. **Pill-Form UI** (A consistent application of 44px-50px border radii on buttons and panels creates a "friendly utility" aesthetic that softens the high-contrast layout).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.canvas}` | `#ffffff` | Primary background, button text | 201 | 1 | `css_variable:--font-color-white` |
| `{color.ink}` | `#000000` | Primary text, button text | 453 | 1 | `css_variable:--font-color-default` |
| `{color.footer}` | `#343434` | Footer background | 1 | 1 | `css_variable:--footerBg` |
| `{color.surface.muted}` | `#f7f7f7` | Secondary section backgrounds | 56 | 0.8 | `computed_style` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#009bff` | Primary CTA background, active states | 23 | 1 | `css_variable:--gradient-color-default` |
| `{color.accent.green}` | `#2dc582` | Decorative surface background | 6 | 0.6 | `computed_style` |
| `{color.accent.berry}` | `#981848` | Decorative surface background | 3 | 0.6 | `computed_style` |
| `{color.accent.navy}` | `#283898` | Decorative surface background | 3 | 0.6 | `computed_style` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| InterTight | 300, 400, 500, 600, 700 | Primary Heading & UI | Inter Tight (Google Fonts) | SIL Open Font |
| Segoe UI | 400, 500, 700 | Secondary Heading | Sans-serif fallback | System |
| Arial | 400 | Body fallback | Sans-serif fallback | System |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.display.xl}` | 64px | 64px | normal | 600 | Hero headers | `p.slider-module--text--10928` |
| `{type.display.lg}` | 48px | 48px | -0.72px | 500 | Section headers | `h2.heading-quaternary-lg` |
| `{type.heading.sm}` | 21px | 31.2px | normal | 600 | Card descriptions | `p.cards-module--caseStudyCardDesc` |
| `{type.body.lg}` | 18px | 27px | normal | 400 | Standard body text | `p` |
| `{type.body.md}` | 16px | 24px | normal | 400 | Embedded UI text | `div.kpoint-embedded-video` |
| `{type.body.sm}` | 14px | 21px | normal | 400 | Small card titles | `p.cards-module--caseStudyCardTitle` |
| `{type.caption.bold}` | 12px | 18px | 0.5px | 600 | Product labels | `p.products-module--logoName` |
| `{type.caption.tiny}` | 10px | 15px | normal | 400 | Person designations | `p.managementGrid-module--personDesignation` |

### Principles
1. **Tight Display Tracking:** Larger display sizes (48px) utilize negative letter spacing (-0.72px) to maintain visual density.
2. **Medium Weight Interaction:** All interactive labels (links, read times) default to weight 500.
3. **Uppercase Utility:** Caption-level labels (12px) use 0.5px tracking for improved legibility in small footprints.

## Spacing
**Base unit:** custom
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 4 |
| `{space.sm}` | 10px | 35 |
| `{space.md}` | 16px | 31 |
| `{space.lg}` | 32px | 7 |
| `{space.xl}` | 48px | 20 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.none}` | 0px | Section containers, footer | `occurrences: 379` |
| `{radius.sm}` | 10px | Small surface containers | `occurrences: 4` |
| `{radius.md}` | 16px | Content cards | `occurrences: 55` |
| `{radius.lg}` | 44px | Primary Buttons | `occurrences: 20` |
| `{radius.pill}` | 50px | Interaction panels | `occurrences: 95` |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{elev.flat}` | none | All cards and surfaces | `shadow: none` across all components |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** Primary and secondary site actions.
**Pages observed:** https://kpoint.com, https://kpoint.com/about
**Spec:** Background: `{color.primary}` (#009bff) / Text: `{color.canvas}` (#ffffff) / Border: none / Radius: `{radius.lg}` (44px) / Typography: `{type.caption.bold}` (12px/600)
**States observed:** Default | Hover: Not captured | Active: Captured

### Tier 2: Patterns

#### Content Card
**Role:** Product and case study display.
**Pages observed:** https://kpoint.com, https://kpoint.com/about
**Spec:** Background: `{color.canvas}` (#ffffff) / Text: `{color.ink}` (#000000) / Border: none / Radius: `{radius.md}` (16px) / Padding: `{space.md}` (16px)
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Footer
**Role:** Global site navigation and legal.
**Pages observed:** https://kpoint.com, https://kpoint.com/about
**Spec:** Background: `{color.footer}` (#343434) / Text: `{color.canvas}` (#ffffff) / Radius: `{radius.none}` / Typography: `{type.body.sm}` (14px)
**States observed:** Default: Captured

## Layout
| Property | Value |
|---|---|
| Page Max-Width | 1440px |
| Section Padding | 48px |
| Card Grid Gap | 16px |

## Responsive
| Breakpoint | Width | Key changes |
|---|---|---|
| Mobile | 390px | Stacked card layouts, centered hero typography |
| Desktop | 1440px | Multi-column grids (3-up or 4-up), horizontal navigation |

## Imagery & decoration
Kpoint uses abstract, high-level iconography (e.g., briefcases, circles) and solid-color circular avatars. The brand avoids complex photography in favor of clean, vector-based illustrations and flat color blocks.

## Do's
- Use `#009bff` for all primary call-to-action buttons.
- Apply `InterTight` weight 600 for display headers above 60px.
- Maintain a `16px` border radius on all content cards.
- Use negative letter spacing (-0.72px) for 48px headlines.
- Ensure all buttons use the pill-shaped `44px` or `50px` radius.

## Don'ts
- **Wrong:** Using `#7026b9` (Primary Purple) as the main site CTA. **Right:** Use `#009bff`. **Reason:** Purple is a declared token but not the primary brand driver observed in the parent UI.
- Do not use drop shadows on cards; the system is strictly flat.
- Do not use serif fonts for body or display copy.
- Do not use `#009bff` for body text; it is reserved for interactive elements.

## Similar brands
- Salesforce (Enterprise blue utility)
- Zoom (Clean, rounded high-contrast UI)
- Microsoft Azure (Technical blue-on-white hierarchy)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #009bff;
  --color-ink: #000000;
  --color-canvas: #ffffff;
  --color-footer: #343434;
  --font-main: 'Inter Tight', sans-serif;
  --radius-card: 16px;
  --radius-pill: 50px;
}
```

## Agent prompt examples
- "Create a primary CTA button using Kpoint's electric blue #009bff, white text, and a 44px border radius."
- "Design a product card with a white background, 16px border radius, and InterTight 21px semi-bold header."
- "Generate a section header using InterTight at 48px, weight 500, with -0.72px letter spacing."

## Known gaps
- Hover and focus states for buttons were not captured in the automated crawl.
- Mobile-specific navigation transitions (hamburger menu behavior) were not fully sampled.
- Success and error semantic colors were not present in the analyzed pages.

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