# Kata-software Design System

> High-contrast financial SaaS architecture defined by geometric isometric patterns, bold Raleway headlines, and a spectrum of product-specific vibrant gradients.

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

## TL;DR
Kata-software utilizes a clean, white-canvas foundation (`#ffffff`) punctuated by a high-contrast primary coral-red (`#eb5d60`) for global actions. The system is architected around a multi-product strategy where each sub-module (Kata Mobile, Mastermind, Engine) is assigned a unique vibrant gradient or solid accent color, creating a "rainbow" ecosystem within a professional financial framework. Typography is strictly hierarchical: bold Raleway (`700`) for display and Lato for functional body text. Visual interest is driven by isometric geometric illustrations and cards with generous 28px-30px corner radii and subtle, colored shadows.

## Signature DNA
1. **Geometric Isometric Motifs** (Isometric cube patterns used as background decorations and section transitions across all pages).
2. **Product Color Coding** (Distinctive color assignments for product modules: Green `#22be67`, Magenta `#da088e`, Blue `#08a0da`, Orange `#ff7a0b`).
3. **The "Soft-Hard" Contrast** (Sharp 0px containers for large sections paired with ultra-rounded 28px-30px buttons and cards).

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.white}` | `#ffffff` | Backgrounds, button text, borders | 435 | 1.0 | Computed |
| `{color.black}` | `#000000` | Footer background, primary headings | 63 | 1.0 | Computed |
| `{color.gray.dark}` | `#333333` | Primary body text | 174 | 0.8 | Computed |
| `{color.gray.light}` | `#f5f6f7` | Secondary section backgrounds | 6 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|-------|-----|------|-------------|------------|--------|
| `{color.primary}` | `#eb5d60` | Primary CTA buttons | 27 | 0.8 | Computed |
| `{color.accent.green}` | `#22be67` | Kata Mobile branding | 3 | 1.0 | Brand Page |
| `{color.accent.magenta}` | `#da088e` | Kata Mastermind branding | 3 | 1.0 | Brand Page |
| `{color.accent.blue}` | `#08a0da` | Kata Engine branding | 3 | 1.0 | Brand Page |
| `{color.accent.teal}` | `#145367` | Deep teal surfaces/cards | 18 | 0.8 | Computed |
| `{color.accent.orange}` | `#ff7a0b` | Cartera Digital branding | 3 | 1.0 | Brand Page |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Raleway | 700 | Display & Headings | Raleway (Google Fonts) | SIL OFL |
| Lato | 400, 700 | Body & UI Labels | Lato (Google Fonts) | SIL OFL |
| Roboto | 400 | Secondary Body | Roboto (Google Fonts) | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display.xl}` | 70px | 98px | normal | 700 | Hero Headlines | `h2.elementor-heading-title` |
| `{type.display.lg}` | 40px | 56px | normal | 700 | Section Titles | `h1.elementor-heading-title` |
| `{type.heading.md}` | 35px | 35px | normal | 700 | Slide Headings | `div.elementor-slide-heading` |
| `{type.heading.sm}` | 25px | 35px | normal | 700 | Card Titles | `h3.elementor-flip-box__layer__title` |
| `{type.body.lg}` | 19px | 27.2px | normal | 700 | Toggle Titles | `a.elementor-toggle-title` |
| `{type.body.md}` | 18px | 25.2px | normal | 400 | Standard Links | `a` |
| `{type.body.sm}` | 14px | 19.6px | normal | 700 | Nav Items | `a.elementor-item` |
| `{type.caption}` | 13px | 13px | normal | 400 | Small Labels | `span.elementor-heading-title` |

### Principles
1. **Bold Display Only**: Raleway is reserved for weight 700; it is never used for body copy.
2. **Tight Heading Leading**: Large display type uses a 1.4x line-height ratio, while smaller titles (`35px`) use a 1.0x ratio for impact.
3. **Functional Sans**: Lato handles all interactive states and long-form descriptions to maintain legibility against vibrant backgrounds.

## Spacing
**Base unit:** Custom (Variable)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xs}` | 9px | 87 |
| `{space.sm}` | 14px | 69 |
| `{space.md}` | 20px | 51 |
| `{space.lg}` | 30px | 54 |
| `{space.xl}` | 50px | 27 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Main section containers | 498 occurrences |
| `{radius.button}` | 28px | Primary and Outline CTAs | 69 occurrences |
| `{radius.card}` | 30px | Product feature cards | 6 occurrences |
| `{radius.full}` | 50% | Icon badges and avatars | 18 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.primary}` | `rgba(251, 114, 76, 0.25) 2px 4px 10px 0px` | Primary Buttons | 69 occurrences |
| `{shadow.soft}` | `rgba(0, 0, 0, 0.06) 3px 10px 30px 0px` | Floating Surfaces | 9 occurrences |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main call to action (e.g., "Agendar demo")
**Pages observed:** All
**Spec:** Background `{color.primary}` (#eb5d60) / Text `{color.white}` (#ffffff) / Radius 28px / Padding 9px 14px / Shadow `{shadow.primary}`
**States observed:** Default | Hover: captured

#### Outline Button
**Role:** Secondary actions on dark or colored backgrounds
**Pages observed:** All
**Spec:** Background transparent / Text `{color.white}` (#ffffff) / Border 2px `{color.white}` / Radius 28px / Padding 9px 14px
**States observed:** Default | Hover: captured

### Tier 2: Patterns

#### Product Card
**Role:** Highlighting specific software modules
**Pages observed:** Home, Pricing
**Spec:** Background (Variable Gradient) / Text `{color.white}` (#ffffff) / Radius 30px / Typography `{type.heading.sm}`
**States observed:** Default | Hover: captured

#### FAQ Accordion
**Role:** Information disclosure
**Pages observed:** Pricing, About
**Spec:** Background `{color.gray.light}` (#f5f6f7) / Text `{color.gray.dark}` (#333333) / Radius 0px / Border-bottom 1px (implied)
**States observed:** Default | Active: captured

### Tier 3: Surface-specific

#### Dark Footer
**Role:** Global site navigation and corporate info
**Pages observed:** All
**Spec:** Background `{color.black}` (#000000) / Text `{color.white}` (#ffffff) / Typography `{type.body.sm}` (14px)
**States observed:** Default | Hover: captured

#### Hero Section
**Role:** Page entry point
**Pages observed:** All
**Spec:** Background (Image/Gradient) / Radius 0px 0px 100px 0px (Asymmetric bottom-right curve) / Typography `{type.display.xl}`

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1140px |
| Section Padding | 50px (vertical) |
| Grid Gutter | 20px |

## Do's
- Use Raleway 700 for all headlines above 20px.
- Apply the 28px border radius to all interactive button elements.
- Use the specific product accent color (e.g., Green `#22be67` for Kata Mobile) when referencing that module.
- Maintain a white background (`#ffffff`) for content-heavy sections.
- Use isometric cube patterns as subtle background decorations.

## Don'ts
- **Wrong:** Using `#22be67` (Kata Mobile Green) as the primary global CTA color. **Right:** Use `#eb5d60` (Coral Red). **Reason:** Green is a sub-brand module color, not the parent brand's action color.
- Do not use Raleway for body text; use Lato 400.
- Do not use soft shadows on the 0px sharp section containers.
- Do not mix different product accent colors within a single component unless it is a product grid.

## Similar brands
- Mambu (Financial SaaS, clean typography)
- Temenos (Enterprise banking, high-contrast)
- Stripe (Gradient-driven product modules)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --kata-primary: #eb5d60;
  --kata-black: #000000;
  --kata-white: #ffffff;
  --kata-text: #333333;
  --kata-accent-green: #22be67;
  --kata-radius-button: 28px;
  --kata-shadow-primary: 2px 4px 10px 0px rgba(251, 114, 76, 0.25);
  --font-display: 'Raleway', sans-serif;
  --font-body: 'Lato', sans-serif;
}
```

## Agent prompt examples
- "Generate a hero section for Kata-software using a white background, a Raleway 700 headline at 70px in black, and a primary button with hex #eb5d60 and 28px border radius."
- "Create a product card for 'Kata Engine' using a blue gradient background, white Raleway 700 text, and a 30px corner radius."
- "Build a footer component with a pure black background, 14px Lato text in white, and 3 columns for navigation."

## Known gaps
- Hover and active states for secondary navigation items were not explicitly captured in the computed style data.
- Mobile-specific breakpoint transitions for the asymmetric hero curve were not fully detailed in the source.
- Exact gradient stop values for product cards were not provided in the token evidence, though visual presence is confirmed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Home | https://kata-software.com | Desktop 1440 | 2026-06-06 |
| Pricing | https://kata-software.com/pricing | Desktop 1440 | 2026-06-06 |
| About | https://kata-software.com/about | Mobile 390 | 2026-06-06 |