# Logo.com.tr Design System

> High-contrast enterprise utility anchored by a signature crimson pulse and structured Inter-based hierarchy.

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

## TL;DR
Logo.com.tr utilizes a high-contrast monochrome foundation of pure black (#000000) and white (#ffffff) punctuated by a single, high-voltage primary crimson (#c70000). The system relies on a rigorous 4px spacing grid and a typographic hierarchy led by Inter, ranging from 60px display weights to 12px captions. Visual depth is minimal, favoring flat surfaces with 1px hairlines or subtle 3px blur shadows. Geometry is diverse, mixing sharp edges for structural containers with soft 16px radii for content cards and full pill shapes for interactive triggers.

## Signature DNA
1. **The Crimson Accent** (#c70000) (Used as the primary signal for high-priority CTAs, active states, and brand markers across all pages.)
2. **Inter Display Hierarchy** (Bold 60px headings with tight -1.5px letter spacing create a commanding enterprise presence.)
3. **Hybrid Geometry** (The system intentionally pairs sharp 0px structural containers with 9999px pill buttons and 16px content cards to balance utility with approachability.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `--color-black` | `#000000` | Primary text, button backgrounds, borders | 577 | 1.0 | Computed style |
| `--color-white` | `#ffffff` | Page background, button text, surface fills | 69 | 1.0 | CSS Variable |
| `--color-gray-60` | `#414141` | Secondary body text, neutral icons | 1 | 0.8 | CSS Variable |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| Primary Crimson | `#c70000` | Primary CTA background, active text, badges | 4 | 0.6 | Computed style |
| Crimson Soft | `#ffdada` | Decorative background, soft highlights | 3 | 0.6 | Computed style |
| `--color-badge-05` | `#fbecee` | Badge backgrounds, secondary highlights | 1 | 1.0 | CSS Variable |
| `--color-primary-dark` | `#58000e` | Hover states for primary crimson (decorative_only) | 1 | 0.8 | CSS Variable |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| Inter | 400, 500, 600, 700 | Heading, UI, Body | Inter (Google Fonts) | SIL Open Font |
| Open Sans | 400, 700 | Secondary body, legacy banners | Open Sans (Google Fonts) | SIL Open Font |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{text.6xl}` | 60px | 60px | -1.5px | 700 | Hero Display | `h1.text-6xl.font-bold` |
| `{text.5xl}` | 48px | 60px | -0.96px | 700 | Large Headings | `span.text-[48px].font-bold` |
| `{text.3xl}` | 36px | 40px | -0.9px | 700 | Section Headings | `h2.text-3xl.md:text-4xl` |
| `{text.2xl}` | 32px | 40px | -0.64px | 600 | Sub-headings | `h2.mb-4.text-[32px]` |
| `{text.xl}` | 24px | 32px | -0.6px | 600 | Card Titles | `h3.font-semibold.md:text-2xl` |
| `{text.lg}` | 20px | 28px | normal | 600 | UI Labels | `span.font-semibold.text-xl` |
| `{text.base}` | 16px | 24px | normal | 400 | Default Body | `section.hero.max-w-hero` |
| `{text.sm}` | 14px | 20px | normal | 400 | Footer/Small Text | `li.text-sm.font-normal` |
| `{text.xs}` | 12px | 16px | normal | 600 | Badges/Captions | `span.px-4.py-2` |

### Principles
1. **Negative tracking on display.** Headings above 32px use negative letter spacing (-0.6px to -1.5px) to maintain density.
2. **Weight-based emphasis.** Inter 600 is the standard for interactive labels, while 400 is reserved for long-form prose.
3. **Contrast-first body.** All primary body text targets pure black (#000000) on white for maximum legibility.

## Spacing
**Base unit:** 4px
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.1}` | 4px | 181 |
| `{space.2}` | 8px | 58 |
| `{space.3}` | 12px | 29 |
| `{space.4}` | 16px | 44 |
| `{space.6}` | 24px | 41 |
| `{space.8}` | 32px | 18 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.none}` | 0px | Structural containers, footers | Observed on main footer |
| `{radius.sm}` | 4px | Inputs, small cards | Pricing cards |
| `{radius.md}` | 8px | Controls, dropdowns | Navigation elements |
| `{radius.lg}` | 16px | Content cards | Main feature cards |
| `{radius.pill}` | 9999px | Primary CTAs, badges | Action buttons |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| Flat | 0px | Default state | Most containers |
| Subtle | `rgba(0, 0, 0, 0.1) 0px 1px 3px 0px` | Hovered cards | Feature card hover |

## Components

### Tier 1: Foundational

#### Primary Button
**Role:** Main action trigger
**Pages observed:** https://logo.com.tr, https://logo.com.tr/about
**Spec:** Background `#c70000` / Text `#ffffff` / Radius `9999px` / Padding `12px 24px` / Typography `Inter 16px 600`
**States observed:** Default: captured | Hover: not captured

#### Footer
**Role:** Global site navigation
**Pages observed:** https://logo.com.tr/pricing, https://logo.com.tr/about
**Spec:** Background `#ffffff` / Text `#000000` / Border `0px` / Radius `0px` / Padding `72px 0px 100px`
**States observed:** Default: captured

### Tier 2: Patterns

#### Feature Card
**Role:** Content grouping for services
**Pages observed:** https://logo.com.tr
**Spec:** Background `#ffffff` / Text `#000000` / Border `1px #e5e5e5` / Radius `16px` / Padding `24px` / Shadow `rgba(0,0,0,0.1) 0px 1px 3px`
**States observed:** Default: captured | Hover: captured

#### Pricing Card
**Role:** Plan comparison
**Pages observed:** https://logo.com.tr/pricing
**Spec:** Background `#ffffff` / Text `#c70000` / Border `1px #c70000` / Radius `4px` / Padding `8px 20px`
**States observed:** Default: captured

### Tier 3: Surface-specific

#### Crimson Surface
**Role:** High-impact section headers
**Pages observed:** https://logo.com.tr/about
**Spec:** Background `#c70000` / Text `#ffffff` / Radius `0px` / Padding `12px 48px`
**States observed:** Default: captured

#### Navigation Trigger
**Role:** Header menu items
**Pages observed:** https://logo.com.tr
**Spec:** Background `transparent` / Text `#000000` / Radius `45px` / Padding `8px 12px` / Typography `Inter 16px 600`
**States observed:** Default: captured

## Layout
| Property | Value |
|----------|-------|
| Max Content Width | 1280px |
| Section Gap | 70px - 73px |
| Grid | 12-column desktop |

## Imagery & decoration
The brand uses clean, technical iconography with 2px stroke weights. Photography is professional and corporate, often featuring individuals in bright, high-key environments. Decorative elements are restricted to soft crimson badges and subtle gray dividers.

## Do's
- Use `#c70000` for the primary action on any page.
- Apply negative letter spacing to Inter headings larger than 32px.
- Maintain a 16px border radius for content cards.
- Use pure black `#000000` for all primary body text.
- Ensure 72px of vertical padding between major sections.

## Don'ts
- Do not use crimson for body text; reserve it for CTAs and headings.
- Do not mix sharp and rounded corners within the same component.
- **Wrong:** Using `#58000e` as a primary background. **Right:** Use `#c70000`. **Reason:** Dark crimson is reserved for hover/active states only.
- Do not use shadows on flat structural containers like the footer.
- Do not exceed 16px padding on mobile viewports.

## Similar brands
- Oracle (enterprise red/white)
- SAP (structured utility)
- IBM (Inter-heavy hierarchy)

## Quick start

```css
/* CSS Custom Properties */
:root {
  --color-primary: #c70000;
  --color-black: #000000;
  --color-white: #ffffff;
  --radius-card: 16px;
  --radius-pill: 9999px;
  --font-main: 'Inter', sans-serif;
}
```

## Agent prompt examples
- "Create a primary CTA button using the Logo.com.tr crimson #c70000, white text, and a full pill radius."
- "Design a feature card with a white background, 1px gray border, 16px corner radius, and Inter 24px semibold title."
- "Generate a section header with a 60px Inter bold heading, -1.5px letter spacing, and 72px bottom margin."

## Known gaps
- Hover and active states for secondary buttons were not fully captured in the computed style evidence.
- Mobile-specific font scaling for display sizes was only partially observed.

## Provenance
| Page sampled | URL | Viewport | Capture time |
|--------------|-----|----------|--------------|
| Homepage | https://logo.com.tr | 1440px | 2026-06-06 |
| Pricing | https://logo.com.tr/pricing | 1440px | 2026-06-06 |
| About | https://logo.com.tr/about | 1440px | 2026-06-06 |