# Kallik Design System

> Deep indigo foundations anchored by teal accents and structured white-space for enterprise labeling precision.

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

## TL;DR
Kallik utilizes a high-contrast "Deep Indigo" (#412871) as its primary brand anchor, appearing in headers, primary CTAs, and section backgrounds. This is balanced by a vibrant "Seafoam Teal" (#56b5b5) used for secondary surfaces and card accents. The system relies on Open Sans for all typographic needs, maintaining a clean, legible enterprise aesthetic. Layouts are structured with a generous 145px–193px vertical rhythm between major sections, while interactive elements use a consistent 5px–6px border radius.

## Signature DNA
1. **Indigo-Teal Duotone** (The interplay between primary indigo #412871 and accent teal #56b5b5 creates a distinct professional-yet-modern identity across all pages).
2. **Soft-Cornered Enterprise UI** (A consistent 5px–6px radius applied to buttons and inputs softens the technical nature of the labeling software).
3. **Structured Card Elevation** (Use of 15px rounded cards with subtle 1px–2px indigo borders or soft shadows to group complex data).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.primary}` | `#412871` | Primary brand color, headers, buttons | 127 | 0.8 | Computed Style |
| `{color.canvas}` | `#ffffff` | Page background and card surfaces | 295 | 1.0 | `--bs-body-bg` |
| `{color.text.main}` | `#555555` | Default body text | 35 | 0.8 | Computed Style |
| `{color.text.muted}` | `#696969` | Secondary text and navigation | 18 | 0.8 | Computed Style |
| `{color.footer.bg}` | `#1d1036` | Deepest indigo for footer background | 2 | 0.8 | Computed Style |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|---|---|---|---|---|---|
| `{color.accent.teal}` | `#56b5b5` | Secondary surfaces, card borders | 22 | 0.8 | Computed Style |
| `{color.accent.amber}` | `#f3b05b` | Tertiary button backgrounds, highlights | 14 | 0.8 | Computed Style |
| `{color.accent.blue}` | `#284ed9` | Decorative text links | 6 | 0.6 | Computed Style |

### Semantic
| Token | Hex | Role |
|---|---|---|
| `{color.success}` | `#198754` | Validated form states |
| `{color.error}` | `#dc3545` | Invalid form states |
| `{color.warning}` | `#ffc107` | Warning notifications |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|---|---|---|---|---|
| Open Sans | 400, 600, 700, 900 | Body, UI, Navigation | N/A (Google Font) | Apache 2.0 |
| Open Sans Bold | 300, 600, 700, 900 | Headings, Emphasis | N/A (Google Font) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|---|---|---|---|---|---|---|
| `{type.h1}` | 38px | 42px | normal | 600 | Page Hero | `h1.right-img-content-title` |
| `{type.h2}` | 30px | 42px | normal | 700 | Section Header | `h2.text-white` |
| `{type.h3}` | 26px | 32px | normal | 700 | Subsection Header | `h3.left-img-content-title` |
| `{type.h4}` | 22px | 32px | normal | 700 | Card Title | `h4.mb-3` |
| `{type.h5}` | 18px | 24px | normal | 700 | Small Header | `h5.mb-3` |
| `{type.body}` | 16px | 25.6px | normal | 400 | Standard Body | `header#navbar` |
| `{type.body.sm}` | 14px | 22.4px | normal | 400 | Card Content | `p.cardContent` |
| `{type.caption}` | 12px | 19.2px | normal | 600 | Metadata | `div.HeadContentPos` |

### Principles
1. **Heading Weight Consistency:** Primary headings consistently use 600 or 700 weights to maintain authority.
2. **Indigo for Emphasis:** High-level headings and strong tags often adopt the brand indigo (#412871).
3. **Generous Line Height:** Body text maintains a 1.6x ratio (25.6px on 16px) for high legibility in dense technical content.

## Spacing
**Base unit:** 4px (inferred)
| Token | Value | Occurrences |
|---|---|---|
| `{space.xs}` | 8px | 79 |
| `{space.sm}` | 12px | 14 |
| `{space.md}` | 16px | 59 |
| `{space.lg}` | 24px | 6 |
| `{space.section}` | 145px | 6 |

## Border radius
| Token | Value | Use | Evidence |
|---|---|---|---|
| `{radius.sm}` | 5px | Buttons, Inputs | `Rounded Button` component |
| `{radius.md}` | 6px | Cards, Pattern containers | `Card` component |
| `{radius.lg}` | 15px | Elevated Feature Cards | `Card` (observed_once) |
| `{radius.full}` | 9999px | Pill-style tags (inferred) | Not captured in source |

## Elevation
| Level | Value | Use | Evidence |
|---|---|---|---|
| `{shadow.card}` | `rgb(108, 117, 125) 1px 2px 5px 0px` | Feature cards on white canvas | `Card` component |

## Components
### Tier 1: Foundational
#### Rounded Button
**Role:** Primary and Secondary Actions
**Pages observed:** 2
**Spec:** Background: `{color.primary}` (#412871) | Text: `#ffffff` | Radius: 5px | Padding: 12px 25px | Typography: 14px/700
**States observed:** Default | Hover: Captured (lightens) | Active: Captured

#### Text Input
**Role:** Form fields and search
**Pages observed:** 2
**Spec:** Background: `#ffffff` | Text: `{color.primary}` (#412871) | Border: 1px solid `{color.primary}` | Radius: 10px | Padding: 8px 15px

### Tier 2: Patterns
#### Navigation
**Role:** Global site header
**Pages observed:** 2
**Spec:** Background: `#ffffff` | Text: `{color.text.muted}` (#696969) | Height: 100px | Typography: 16px/400

#### Footer
**Role:** Global site footer
**Pages observed:** 2
**Spec:** Background: `#1d1036` | Text: `#747a85` | Padding: 40px 0px 20px | Typography: 16px/400

### Tier 3: Surface-specific
#### Feature Card
**Role:** Product and service highlights
**Pages observed:** 2
**Spec:** Background: `#ffffff` | Border: 2px solid `{color.primary}` (#412871) | Radius: 15px | Padding: 20px | Shadow: none

#### Accent Surface
**Role:** Call-out sections
**Pages observed:** 2
**Spec:** Background: `{color.accent.teal}` (#56b5b5) | Text: `#ffffff` | Radius: 5px | Padding: 16px 0px

## Layout
| Property | Value |
|---|---|
| Max Content Width | 1200px (approx) |
| Section Vertical Gap | 145px |
| Grid Columns | 12-column Bootstrap-based |

## Do's
- Use `#412871` for all primary user actions (buttons).
- Apply a `5px` border radius to all interactive form elements.
- Maintain a `1.6x` line-height for all body copy to ensure legibility.
- Use `Open Sans Bold` (700) for all subheadings (h4, h5).
- Anchor large sections with the deep indigo footer `#1d1036`.

## Don'ts
- **Wrong:** Using `#0d6efd` (Bootstrap default) for buttons. **Right:** Use `#412871`. **Reason:** Brand identity requires the specific indigo primary.
- **Wrong:** Applying sharp `0px` corners to cards. **Right:** Use `6px` or `15px`. **Reason:** The brand uses soft geometry to appear approachable.
- **Wrong:** Using pure black `#000000` for body text. **Right:** Use `#555555`. **Reason:** Reduces visual strain on white canvas.

## Quick start

```css
/* CSS Custom Properties */
:root {
  --kallik-indigo: #412871;
  --kallik-teal: #56b5b5;
  --kallik-amber: #f3b05b;
  --kallik-bg-dark: #1d1036;
  --kallik-text: #555555;
  --kallik-radius-sm: 5px;
  --kallik-radius-lg: 15px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Kallik indigo #412871, white text, and a 5px border radius."
- "Create a feature card with a 2px indigo border, 15px corner radius, and Open Sans Bold heading at 22px."
- "Design a section background using the accent teal #56b5b5 with white body text at 16px."

## Provenance
| Page sampled | URL | Viewport | Capture time |
|---|---|---|---|
| Homepage | https://kallik.com | Desktop 1440 | 2026-06-06 |
| About | https://kallik.com/about | Desktop 1440 | 2026-06-06 |