# Kartaca Design System

> High-contrast enterprise blue meets geometric sans-serif clarity on a pure white canvas.

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

## TL;DR
Kartaca utilizes a high-contrast "monochrome-plus-one" system where a vibrant Electric Indigo (`#5348fe`) acts as the sole driver for primary actions and brand emphasis. The interface is anchored by a deep Navy (`#16235f`) for headings and a neutral Slate Gray (`#585b62`) for long-form body copy, all set against a stark white (`#ffffff`) background. Typography is exclusively **Manrope**, moving from bold 700-weight display sizes (42px) to highly legible 400-weight body text (18px). The system relies on generous vertical rhythm and a distinctive 50px border radius for large panels, creating a modern, tech-forward enterprise aesthetic.

## Signature DNA
1. **Electric Indigo Accents** (`#5348fe`): Used as a flood color for primary buttons and active product icons, providing high-voltage contrast against white surfaces.
2. **Manrope Geometric Stack**: A singular font family approach using **Manrope-Semibold** for structural hierarchy and **Manrope-Regular** for utility, maintaining a unified geometric voice.
3. **Soft-Pill Panels**: Large layout containers and primary buttons utilize a significant 50px or 6px radius, softening the high-contrast color palette.

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Page background, button text | 151 | 1.0 | `:root`, Computed |
| `{color.black}` | `#000000` | Footer background, deep shadows | 45 | 1.0 | `:root`, Computed |
| `{color.slate}` | `#585b62` | Primary body text | 209 | 0.8 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#5348fe` | Primary CTAs, active icons, brand text | 6 | 0.6 | Computed |
| `{color.navy-deep}` | `#16235f` | Primary headings | 25 | 0.8 | Computed |
| `{color.navy-alt}` | `#1b2258` | Secondary page headings | 21 | 0.8 | Computed |
| `{color.azure}` | `#007aff` | Swiper theme accent (decorative_only) | 1 | 1.0 | `--swiper-theme-color` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Manrope-Semibold | 400, 700 | Headings, Display | Manrope (Google Fonts) | OFL |
| Manrope-Regular | 400, 700 | Body, Buttons | Manrope (Google Fonts) | OFL |
| Manrope-Medium | 400, 500 | UI Labels, Navigation | Manrope (Google Fonts) | OFL |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 42px | 50px | 0.1px | 700 | Hero H1 | `h1` |
| `{type.h2}` | 36px | 44px | 0.1px | 700 | Section Headings | `h2` |
| `{type.h3}` | 26px | 36px | 0.1px | 700 | Sub-section Headings | `h3` |
| `{type.body-lg}` | 18px | 36px | 0.1px | 400 | Featured Content | `div.swiper-slide` |
| `{type.body}` | 17px | 48px | 0.1px | 400 | Standard Body | `span` |
| `{type.button}` | 16px | 16px | 0.1px | 400 | CTA Labels | `a.a-button` |
| `{type.body-sm}` | 14px | 28px | 0.1px | 400 | Meta text, Descriptions | `video`, `p.desc` |
| `{type.caption}` | 12px | normal | 1.7px | 500 | Overlines, Labels | `div.title` |

### Principles
1. **Generous Leading**: Body text uses a line-height ratio of ~2x (18px size / 36px height) to ensure readability in technical contexts.
2. **Tight Tracking on Display**: Large headings maintain a tight 0.1px letter spacing to preserve the geometric impact of Manrope.
3. **High Contrast Hierarchy**: Headings use Navy (`#16235f`) while body text drops to Slate (`#585b62`) to create a clear visual read-order.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 4px | 44 |
| `{space.sm}` | 12px | 5 |
| `{space.md}` | 20px | 11 |
| `{space.lg}` | 24px | 9 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Default containers | 226 occurrences |
| `{radius.sm}` | 4px | UI Elements | 8 occurrences |
| `{radius.md}` | 6px | Buttons | 3 occurrences |
| `{radius.pill}` | 50px | Large Panels/Active States | 44 occurrences |

## Elevation
Not captured in source (System is predominantly flat with 0px radius sharp containers).

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action
**Pages observed:** `https://kartaca.com/about`
**Spec:** Background `{color.primary}` (#5348fe) | Text `{color.white}` (#ffffff) | Radius 6px | Padding 15px 25px | Typography `{type.button}`
**States observed:** Default | Hover: Not captured | Active: Not captured

#### Ghost Button
**Role:** Secondary action / "Learn More"
**Pages observed:** `https://kartaca.com`
**Spec:** Background transparent | Text `{color.primary}` (#5348fe) | Border 1px `{color.primary}` | Radius 4px | Typography `{type.button}`
**States observed:** Default | Hover: Not captured

### Tier 2: Patterns

#### Product Icon Card
**Role:** Navigation/Selection for product categories
**Pages observed:** `https://kartaca.com`
**Spec:** Background `{color.primary}` (#5348fe) (Active) | Text `{color.white}` (#ffffff) | Radius 4px | Typography `{type.body-sm}`
**States observed:** Active: `#5348fe` | Inactive: Transparent with Navy text.

#### Customer Logo Grid
**Role:** Social proof
**Pages observed:** `https://kartaca.com`, `https://kartaca.com/about`
**Spec:** Background `{color.white}` | Grayscale filter applied to logos | Layout: 4-column (desktop) / 2-column (mobile).

### Tier 3: Surface-specific

#### Footer
**Role:** Global site navigation
**Pages observed:** `https://kartaca.com`, `https://kartaca.com/about`
**Spec:** Background `{color.black}` (#000000) | Text `{color.white}` (#ffffff) | Typography 14px Manrope.

#### Newsletter Signup (Footer)
**Role:** Lead generation
**Pages observed:** `https://kartaca.com`
**Spec:** Border 1px `{color.white}` | Text `{color.white}` | Radius 4px | Padding 10px 20px.

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1440px |
| Section Padding | 80px - 100px (Vertical) |
| Grid Gutter | 24px |

## Responsive
| Breakpoint | Width | Key changes |
|------------|-------|-------------|
| Mobile | 390px | Logo grid shifts to 2-up; Navigation collapses to hamburger; Hero text aligns center. |
| Desktop | 1440px | Standard 12-column alignment; Horizontal top-nav. |

## Imagery & decoration
Kartaca uses **isometric 3D illustrations** featuring human characters in tech-related scenarios (blue/indigo palette). It avoids photography in feature sections, preferring clean vector-based storytelling.

## Do's
- Use `#5348fe` for all primary interactive elements.
- Set body text to `#585b62` for long-form readability.
- Maintain a 2x line-height ratio for body copy.
- Use Manrope-Semibold (700) for all headings.
- Apply 50px radius to large decorative panels.

## Don'ts
- **Wrong:** Using `#007aff` (Swiper Blue) for buttons. **Right:** Use `#5348fe`. **Reason:** `#007aff` is a third-party library default, not a brand primary.
- **Wrong:** Setting headings in `#585b62`. **Right:** Use `#16235f`. **Reason:** Headings require the deeper navy for proper hierarchy.
- **Wrong:** Mixing font families. **Right:** Use Manrope exclusively.
- Do not use shadows on primary buttons; the system is flat.
- Do not use border-radius on main section containers (keep at 0px).

## Similar brands
- DigitalOcean (Indigo/White/Geometric)
- Stripe (High-contrast blue/Typography focus)
- Vercel (Monochrome foundation with singular accent)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-primary: #5348fe;
  --color-navy: #16235f;
  --color-slate: #585b62;
  --color-white: #ffffff;
  --font-main: 'Manrope', sans-serif;
  --radius-pill: 50px;
  --radius-button: 6px;
}
```

### Tailwind v4
```javascript
@theme {
  --color-primary: #5348fe;
  --color-navy: #16235f;
  --color-slate: #585b62;
  --font-manrope: "Manrope";
  --radius-pill: 50px;
}
```

## Agent prompt examples
- "Generate a primary CTA button using Kartaca's Electric Indigo (#5348fe) with white text and a 6px border radius."
- "Create a hero section with a Manrope-Semibold H1 in Navy (#16235f) and body text in Slate (#585b62) with 2x line-height."
- "Design a feature card with a 50px border radius and a background of #5348fe."

## Known gaps
- Hover and Active states for buttons were not captured in the static CSS analysis.
- Success/Error semantic colors were not present on the analyzed marketing pages.
- Mobile-specific spacing tokens were not explicitly declared in the source.

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