# Tekizma Design System

> High-contrast monochrome foundation punctuated by vibrant teal surfaces and ultra-lightweight typography.

**Source:** [https://tekizma.com](https://tekizma.com) | **Captured:** 2026-06-06 | **Pages analyzed:** 1
**Brand layer:** parent | **Related brands:** None

## TL;DR
Tekizma utilizes a "monochrome plus one" strategy, where a stark white and near-black (#232323) foundation is interrupted by large blocks of teal (#37beb8). The system is characterized by a signature typography weight of 200 (Extra Light) for primary headlines, creating an airy, technical aesthetic. Layouts are strictly sharp-edged with 0px border radii across all components, including buttons and cards. Interactive elements rely on a specific teal accent (#0cc7c7) for text-based links and primary button backgrounds.

## Signature DNA
1. **The 200-Weight Headline** (Open Sans at weight 200 is used for all major section titles and sub-titles, creating a delicate, high-end engineering feel.)
2. **Total Angularity** (A universal 0px border radius policy applied to every button, card, and surface container.)
3. **Teal Flood Sections** (Large-scale background floods using #37beb8 to categorize product information, contrasting against the white foundation.)

## Family Map
*No sub-brands captured in source.*

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|------|------|-------------|------------|--------|
| `{color.foundation.white}` | `#ffffff` | Page background, button text, card surfaces | 24 | 0.8 | Computed |
| `{color.foundation.charcoal}` | `#232323` | Primary body text, section borders | 24 | 0.8 | Computed |
| `{color.foundation.dark-gray}` | `#333333` | Secondary text emphasis | 4 | 0.6 | Computed |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|------|------|-------------|------------|--------|
| `{color.accent.teal}` | `#37beb8` | Primary button background, product section floods | 7 | 0.6 | Computed |
| `{color.accent.teal-bright}` | `#0cc7c7` | Interactive text, bright accents | 5 | 1.0 | `--teal-bright` |
| `{color.accent.teal-primary}` | `#0dc1c1` | Decorative text, button text (decorative) | 2 | 1.0 | `--teal-primary` |

### Semantic
Not captured in source.

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|------|------|------|------|------|
| Open sans | 200, 300, 400, 600, 700 | Heading, Body, UI | N/A (Google Font) | Apache 2.0 |
| et-line | 400 | Iconography, specific labels | Linear Icons | Licensed |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 36px | 39.6px | normal | 200 | Section Titles | `h1.section-title` |
| `{type.title-sm}` | 20px | 22.4px | normal | 400 | Icon labels | `span.icon-phone` |
| `{type.body-lg-bold}` | 18px | 22.4px | normal | 700 | Strong emphasis | `b` |
| `{type.body-lg-light}` | 18px | 22.4px | normal | 200 | Sub-titles | `p.sub-title` |
| `{type.body-md}` | 16px | 22.4px | normal | 300 | Footer info | `div.info-footer` |
| `{type.body-sm}` | 14px | 22.4px | normal | 200 | General wrapper text | `div.wrapper` |
| `{type.nav-link}` | 14px | 20px | 1px | 300 | Navigation items | `a` |
| `{type.label-caps}` | 14px | 22.4px | 2px | 600 | Card headers | `div.card-header` |
| `{type.button}` | 12px | 17.1px | 1px | 400 | Button labels | `button.btn-info` |

### Principles
1. **Lightweight Dominance:** Use weight 200 for all text above 18px to maintain the brand's technical "blueprint" feel.
2. **Wide Tracking for Labels:** Navigation and card headers must use 1px to 2px letter spacing.
3. **High Contrast:** Text is strictly #232323 on white or white on #37beb8; no mid-tone grays are used for primary reading.

## Spacing
**Base unit:** 5px (derived from common multiples)
| Token | Value | Occurrences |
|------|------|-------------|
| `{space.xs}` | 10px | 5 |
| `{space.sm}` | 15px | 7 |
| `{space.md}` | 20px | 8 |
| `{space.lg}` | 30px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|------|------|-----|----------|
| `{radius.none}` | 0px | Universal (Buttons, Cards, Inputs) | 55 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|------|------|-----|----------|
| `{elev.flat}` | none | Standard sections and cards | Surface component |
| `{elev.button}` | `rgba(0,0,0,0.075) 0px 1px 1px 0px` | Primary CTAs | Button component |

## Components

### Tier 1: Foundational
#### Button
**Role:** Primary action for demos and "Read More" links.
**Pages observed:** [https://tekizma.com](https://tekizma.com)
**Spec:** Background `{color.accent.teal}` (#37beb8) / Text `{color.foundation.white}` (#ffffff) / Radius 0px / Padding 7px 20px / Typography `{type.button}` (12px)
**States observed:** Default | Hover: Not captured | Active: Captured

#### Surface
**Role:** Main content containers and section wrappers.
**Pages observed:** [https://tekizma.com](https://tekizma.com)
**Spec:** Background `{color.foundation.white}` (#ffffff) / Text `{color.foundation.charcoal}` (#232323) / Border 0px / Radius 0px / Padding 25px

### Tier 2: Patterns
#### Product Card
**Role:** Highlighting specific software offerings (Datanyx, MaskBits).
**Pages observed:** [https://tekizma.com](https://tekizma.com)
**Spec:** Background #ffffff / Border-top 5px solid #37beb8 / Radius 0px / Shadow: none.
**States observed:** Default

#### Section Header
**Role:** Standardized page section titling.
**Pages observed:** [https://tekizma.com](https://tekizma.com)
**Spec:** Typography `{type.display}` (36px/200) / Text-align center / Margin-bottom `{space.lg}` (30px).

### Tier 3: Surface-specific
#### Teal Flood Section
**Role:** High-impact product overview area.
**Pages observed:** [https://tekizma.com](https://tekizma.com)
**Spec:** Background `{color.accent.teal}` (#37beb8) / Text #ffffff / Padding-top 60px / Padding-bottom 60px.

#### Footer Band
**Role:** Site-wide contact and social anchor.
**Pages observed:** [https://tekizma.com](https://tekizma.com)
**Spec:** Background #232323 / Text #ffffff / Icon color #ffffff / Typography 16px.

## Layout
| Property | Value |
|------|------|
| Max-width | 1170px (standard container) |
| Section Gap | 60px - 80px |
| Column Gap | 30px |

## Responsive
| Breakpoint | Width | Key changes |
|------|------|-------------|
| Mobile | 390px | Product cards stack vertically; Section titles reduce to 28px. |
| Desktop | 1440px | 2-column or 3-column grid for product cards. |

## Imagery & decoration
- **Technical Illustration:** Uses hand-drawn whiteboard style sketches (lightbulbs, gears, data charts) to represent AI and Engineering.
- **Logo Grids:** Grayscale partner logos with uniform height (~40px-60px).
- **Avoids:** Rounded corners, drop shadows on text, and photographic busy backgrounds.

## Do's
- Use **Open Sans 200** for all primary headings.
- Maintain **0px border radius** on all interactive elements.
- Use **#37beb8** as the primary background for product call-out sections.
- Apply **1px letter spacing** to all uppercase labels.
- Ensure partner logos are presented in a clean, spaced grid.

## Don'ts
- **Wrong:** Using a rounded button (`border-radius: 4px`). **Right:** `border-radius: 0px`. **Reason:** The brand identity is strictly geometric and sharp.
- **Wrong:** Setting headlines to Bold (700). **Right:** Extra Light (200). **Reason:** Weight 200 is the signature typographic move.
- **Wrong:** Using a sub-brand teal (like #0cc7c7) for a full section background. **Right:** Use #37beb8. **Reason:** #0cc7c7 is reserved for text-level accents.
- Do not use drop shadows to create depth; use borders or background color shifts.
- Do not use serif fonts for body copy.

## Similar brands
- IBM (Technical precision, monochrome focus)
- Siemens (Industrial, clean typography)
- Palantir (Data-centric, austere UI)

## Quick start

```css
/* CSS Variables */
:root {
  --color-teal-primary: #37beb8;
  --color-teal-bright: #0cc7c7;
  --color-charcoal: #232323;
  --font-main: 'Open Sans', sans-serif;
  --weight-signature: 200;
  --radius-none: 0px;
}
```

```json
/* Style Dictionary */
{
  "color": {
    "primary": { "value": "#37beb8" },
    "text": { "value": "#232323" },
    "background": { "value": "#ffffff" }
  },
  "border": {
    "radius": { "value": "0px" }
  }
}
```

## Agent prompt examples
- "Create a hero section with a centered H1 in Open Sans weight 200, size 36px, and a primary button with #37beb8 background and 0px border radius."
- "Generate a product card with a 5px top border in #37beb8, white background, and no box shadow."
- "Design a footer with a #232323 background and white text using Open Sans weight 300 at 16px."

## Known gaps
- Hover and focus states for buttons were not explicitly captured in the static evidence.
- Form input field styles (borders/focus) were not present on the analyzed pages.
- Success/Error semantic colors were not observed in the UI flow.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|------|------|------|-------------|
| Main Homepage | https://tekizma.com | Desktop 1440px | 2026-06-06 |
| Mobile Homepage | https://tekizma.com | Mobile 390px | 2026-06-06 |