CABA GROUP

<!-- Generated by ExtractVibe — https://extractvibe.com/brand/cabasupplies.com -->
<!-- Extracted: 2026-10-09T15:54:26.222Z | Schema: v1 | Quality: 65/100 -->
---
version: alpha
name: "CABA GROUP"
description: "Caba Group: Distribución de Productos de Alta Calidad | CABA GROUP presents a professional web presence."
colors:
  primary: "#21272e"
  tertiary: "#2f1c6a"
  neutral: "#56585e"
  surface: "#ffffff"
  on-surface: "#1d1e20"
  on-surface-secondary: "#56585e"
  border: "#dadce0"
  link: "#1d1e20"
  error: "#fc5185"
  warning: "#ffcd35"
  success: "#00b090"
  primary-dark: "#5025d1"
typography:
  display-lg:
    fontFamily: "Playfair Display"
    fontSize: "48px"
    fontWeight: "400"
    lineHeight: "62.4px"
  headline-md:
    fontFamily: "Playfair Display"
    fontSize: "64px"
    fontWeight: "400"
    lineHeight: "80px"
  body-md:
    fontFamily: "DM Sans"
    fontSize: "16px"
    fontWeight: "400"
rounded:
  sm: "10px"
  lg: "50px"
  full: "9999px"
spacing:
  base: "2px"
  xs: "1px"
  sm: "2px"
  md: "4px"
  lg: "6px"
  xl: "8px"
components:
  button-secondary:
    backgroundColor: "#21272e"
    textColor: "#ffffff"
    rounded: "50px"
    padding: "16px 40px"
    fontSize: "14px"
    fontWeight: "400"
    borderColor: "#0d141a"
    boxShadow: "rgba(0, 0, 0, 0) 0px 0px 0px 0px"
---

# CABA GROUP — Design System

## Overview

Caba Group: Distribución de Productos de Alta Calidad | CABA GROUP presents a professional web presence.

Key characteristics: professional.

**Key characteristics:**

- Vibe — professional
- Design era — contemporary
- Emotional tone — professional
- Target audience — general audience
- Visual energy — 5/10 (moderate)

## Colors

The palette draws on 33 distinct colors observed across the site, organized into semantic roles below.

### Light mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#21272e` | Charcoal |
| accent / tertiary | `#2f1c6a` | Midnight Blue |
| background | `#ffffff` | White |
| text | `#1d1e20` | Near-Black |
| secondary text | `#56585e` | Dark Gray |
| border | `#dadce0` | Gainsboro |
| link | `#1d1e20` | Near-Black |
| muted | `#56585e` | Dark Gray |

### Dark mode

| Role | Hex | Name |
|------|-----|------|
| primary | `#5025d1` | Blue Violet |

### Semantic

| Role | Hex | Use |
|------|-----|-----|
| success | `#00b090` | Confirmations, positive states |
| warning | `#ffcd35` | Caution, intermediate states |
| error | `#fc5185` | Failures, destructive actions |

## Typography

Type is set in DM Sans, Playfair Display, Montserrat, with hierarchy expressed through size and weight contrast rather than family-switching.

### Font families

| Family | Role | Source | Weights |
|--------|------|--------|---------|
| DM Sans | body | self-hosted | 400 |
| Playfair Display | heading | self-hosted | 400 |
| Montserrat | body | self-hosted | 400 |

### Type scale

| Role | Family | Size | Weight | Line height | Letter spacing |
|------|--------|------|--------|-------------|----------------|
| Display | Playfair Display | 48px | 400 | 62.4px | — |
| Heading 3 | Playfair Display | 64px | 400 | 80px | — |
| Body | DM Sans | 16px | 400 | — | — |

### Conventions

- Heading case — title-case

## Layout

- Base spacing unit — `2px`

## Elevation & Depth

### Shadows

| Context | Value |
|---------|-------|
| dropdown | `rgba(0, 0, 0, 0.1) 0px 2px 14px 0px` |
| element | `rgba(100, 100, 100, 0.15) 0px 0px 0px 1px inset` |
| button | `rgba(0, 0, 0, 0) 0px 0px 0px 0px` |

## Shapes

Border-radius scale:

- `sm` — 10px
- `lg` — 50px
- `full` — 9999px (pill / circular)

## Components

### Buttons

**Secondary**

- Background — `#21272e`
- Text — `#ffffff`
- Radius — `50px`
- Padding — `16px 40px`
- Font size — `14px`
- Font weight — `400`
- Border — ` solid #0d141a`
- Shadow — `rgba(0, 0, 0, 0) 0px 0px 0px 0px`
- Sample copy — "Enviar consulta ahora"

## Voice

### Tone (1–10 scale)

| Axis | Score | Lean |
|------|-------|------|
| Formal ↔ Casual | 5/10 | balanced |
| Playful ↔ Serious | 5/10 | balanced |
| Enthusiastic ↔ Matter-of-fact | 5/10 | balanced |
| Respectful ↔ Irreverent | 3/10 | respectful |
| Technical ↔ Accessible | 5/10 | balanced |

### Copywriting style

- Avg. sentence length — 12 words
- Vocabulary — moderate
- Jargon — some
- CTA style — direct

## Logos

| Type | Variant | Format | URL | Confidence |
|------|---------|--------|-----|------------|
| primary | — | svg | [link](https://img.loadlogo.com/cabasupplies.com) | 100% |
| favicon | — | — | [link](#) | 95% |
| favicon | — | — | [link](#) | 95% |
| favicon | — | — | [link](#) | 95% |
| favicon | — | — | [link](#) | 95% |
| primary | color | png | [link](brands/cabasupplies.com/logo-4.png) | 85% |
| primary | color | svg | [link](brands/cabasupplies.com/logo-5.svg) | 85% |

## Sources

- Official brand guidelines — https://www.pinterest.com/ideas/brand-kit-templates/929751878143/
- Live brand page — https://extractvibe.com/brand/cabasupplies.com
- Raw JSON — https://extractvibe.com/api/brand/cabasupplies.com
- DESIGN.md (this file) — https://extractvibe.com/api/brand/cabasupplies.com/design.md
- Extracted — 2026-10-09T15:54:26.222Z
- Generator — ExtractVibe vv1
- Quality score — 65/100

npx @google/design.md lint DESIGN.md
npx @google/design.md export --format tailwind DESIGN.md