# Actualicese Design System

> High-contrast professional utility defined by a tri-color hierarchy of electric blue, lime green, and cadmium yellow against a structured white canvas.

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

## TL;DR
Actualicese employs a high-energy "utility-first" aesthetic designed for information density and clear action hierarchy. The system is anchored by a primary electric blue `#4666ff` (Azul Act), supported by a high-visibility lime green `#beff5e` (Verde Act) for secondary highlights and a functional cadmium yellow `#f7c500` for primary conversion buttons. Typography relies exclusively on **Open Sans**, utilizing weight shifts (400 to 700) and a strict 16px body baseline to maintain legibility across complex tax and legal content. The layout is strictly modular, using sharp 0px or soft 5-7px radii to distinguish between content containers and interactive UI elements.

## Signature DNA
1. **The High-Contrast Action Pair** (The juxtaposition of `#4666ff` text on `#beff5e` backgrounds, specifically in rounded pill components, creates a vibrating "active" state unique to the brand's utility tools. Observed on Homepage and Pricing.)
2. **Modular Information Density** (Strict adherence to 16px padding and 0px radius "Surface" containers for data-heavy sections, creating a "ledger" feel appropriate for accounting professionals. Observed across all analyzed pages.)
3. **Chromatic Wayfinding** (Yellow `#f7c500` is reserved strictly for "Adquiérela" or "Inscribirme" conversion actions, while Blue `#4666ff` handles navigation and secondary interaction. Observed on Homepage and About.)

## Colors
### Foundation
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.white}` | `#ffffff` | Page background, primary surface, button text | 192 | 1.0 | `--wp--preset--color--white` |
| `{colors.dark}` | `#212529` | Primary body text, dark section backgrounds | 168 | 1.0 | `--bs-dark` |
| `{colors.black}` | `#000000` | Headings, high-contrast text, borders | 115 | 1.0 | `--wp--preset--color--black` |
| `{colors.neutral-50}` | `#f7f7f7` | Subtle section backgrounds, alternating rows | 15 | 1.0 | `--color-neutral-50` |
| `{colors.gray-medium}` | `#666666` | Muted text, secondary button backgrounds | 16 | 1.0 | `--ep-c-medium-gray` |

### Accent
| Token | Hex | Role | Occurrences | Confidence | Source |
|------|-------|------|-------------|------------|--------|
| `{colors.azul-act}` | `#4666ff` | Primary brand color, links, primary UI accents | 110 | 1.0 | `--color-azul-act` |
| `{colors.verde-act}` | `#beff5e` | Secondary brand color, highlight surfaces, badges | 7 | 1.0 | `--color-verde-act` |
| `{colors.yellow-act}` | `#f7c500` | Primary CTA background (Conversion) | 3 | 0.6 | `computed_style` |
| `{colors.whatsapp}` | `#25d366` | Social integration (decorative_only) | 3 | 0.6 | `computed_style` |

## Typography
### Fonts
| Family | Weights observed | Role | Open-source substitute | License |
|--------|------------------|------|------------------------|---------|
| **Open Sans** | 400, 500, 600, 700 | All UI, Headings, and Body | N/A (Google Font) | Apache 2.0 |
| **Material Symbols Rounded** | 400 | UI Icons | N/A | Apache 2.0 |

### Scale
| Token | Size | Line height | Letter spacing | Weight | Use | Evidence selector |
|-------|------|-------------|----------------|--------|-----|-------------------|
| `{type.display}` | 32px | 38.4px | normal | 500 | Admin/Container Titles | `h2.dt-container-admin-title` |
| `{type.h2}` | 32px | 20px | normal | 500 | Public Section Titles | `h2.dt-container-public-title` |
| `{type.h4}` | 24px | 28.8px | normal | 500 | Column Headings | `h4.wp-block-heading` |
| `{type.h5}` | 20px | 24px | normal | 500 | Small Headings | `h5.wp-block-heading` |
| `{type.body-lg}` | 18px | 27px | normal | 400 | Centered Intro Text | `p.has-text-align-center` |
| `{type.body}` | 16px | 24px | normal | 400 | Default Body Copy | `header#main-header` |
| `{type.body-strong}` | 16px | 24px | normal | 700 | Emphasized Links | `a` |
| `{type.body-sm}` | 15px | 22.5px | normal | 400 | Footer/Muted Text | `p.has-black-color` |
| `{type.button}` | 14px | 21.6px | normal | 600 | Button Labels | `button.wp-block-button__link` |

### Principles
1. **Weight-Based Hierarchy**: Use weight 500 for all headings regardless of size to maintain a professional, non-aggressive tone.
2. **Tight Heading Leading**: Large titles (32px) use a compressed 20px line-height in public views to anchor them closely to content.
3. **Standardized Body**: 16px is the non-negotiable baseline for all readable content to ensure accessibility for legal/tax documentation.

## Spacing
**Base unit:** 8px (inferred from common multiples)
| Token | Value | Occurrences |
|-------|-------|-------------|
| `{space.xxs}` | 2px | 12 |
| `{space.xs}` | 8px | 30 |
| `{space.sm}` | 12px | 22 |
| `{space.md}` | 16px | 64 |
| `{space.lg}` | 24px | 10 |
| `{space.xl}` | 32px | 10 |

## Border radius
| Token | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{radius.sharp}` | 0px | Content cards, Inputs, Primary Buttons | 582 occurrences |
| `{radius.input}` | 5px | Text inputs, small surfaces | 12 occurrences |
| `{radius.control}` | 7px | Interactive cards, outline buttons | 6 occurrences |
| `{radius.pill}` | 26px | High-visibility rounded buttons | 3 occurrences |
| `{radius.circle}` | 50% | Icon plates, notification badges | 14 occurrences |

## Elevation
| Level | Value | Use | Evidence |
|-------|-------|-----|----------|
| `{shadow.card}` | `rgba(0, 0, 0, 0.2) 0px 4px 8px 0px` | Floating action buttons | Homepage |
| `{shadow.deep}` | `rgba(0, 0, 0, 0.176) 0px 16px 48px 0px` | Modals / Overlays | Homepage |

## Components

### Tier 1: Foundational

#### Rounded Button
**Role:** High-priority secondary actions (e.g., "Desde $836 diarios")
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{colors.verde-act}` (#beff5e) / Text `{colors.azul-act}` (#4666ff) / Radius `{radius.pill}` (26px) / Padding 2px 12px / Font `{type.body}` (16px)
**States observed:** Default | Hover: Not captured

#### Text Input
**Role:** Search and form entry
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `rgba(255, 255, 255, 0.6)` / Border `{colors.white}` (#ffffff) / Radius `{radius.sharp}` (0px) / Padding 1px 15px
**States observed:** Default | Focus: Not captured

### Tier 2: Patterns

#### Conversion Button
**Role:** Primary "Buy" or "Subscribe" actions
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{colors.yellow-act}` (#f7c500) / Text `{colors.black}` (#000000) / Radius `{radius.sharp}` (0px) / Padding 11px 0px / Font `{type.button}` (14.4px)
**States observed:** Default | Active: Not captured

#### Interactive Card
**Role:** Feature highlights and tool links
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{colors.verde-act}` (#beff5e) / Text `{colors.black}` (#000000) / Radius `{radius.control}` (7px) / Padding 10px 55px
**States observed:** Default | Hover: Not captured

### Tier 3: Surface-specific

#### Blue Surface Band
**Role:** Section headers and call-to-action bands
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `#5266fb` / Text `{colors.white}` (#ffffff) / Radius `{radius.sharp}` (0px) / Padding 11px 56px
**States observed:** Default

#### Floating Action Button
**Role:** Help or Chat triggers
**Pages observed:** Homepage, Pricing, About
**Spec:** Background `{colors.azul-act}` (#4666ff) / Text `{colors.white}` (#ffffff) / Radius `{radius.circle}` (50%) / Shadow `{shadow.card}`
**States observed:** Default

## Do's
- Use `#f7c500` (Yellow) exclusively for final conversion buttons like "Adquiérela".
- Maintain 16px (`{space.md}`) as the standard padding for all content containers.
- Pair `#4666ff` (Blue) text with `#beff5e` (Lime) backgrounds for high-visibility utility labels.
- Use `{radius.sharp}` (0px) for all primary content cards to maintain a professional grid.
- Ensure all body text is at least 16px for legal document legibility.

## Don'ts
- **Wrong:** Using `#4666ff` for a primary "Buy" button. **Right:** Use `#f7c500`. **Reason:** Yellow is the established conversion signal; blue is for navigation.
- **Wrong:** Applying `{radius.pill}` to content cards. **Right:** Use `{radius.sharp}`. **Reason:** Rounded corners are reserved for interactive controls, not layout containers.
- **Wrong:** Mixing font families. **Right:** Use Open Sans for all text. **Reason:** The brand relies on a single-family typographic system.
- Do not use `#25d366` (WhatsApp Green) for general UI highlights; it is reserved for social triggers.
- Do not drop below 14px for any UI label or button text.

## Similar brands
- **Legis** (Professional legal/accounting utility)
- **Thomson Reuters** (Information density and professional blue palettes)
- **DIAN** (Institutional wayfinding and high-contrast signaling)

## Quick start

### CSS Custom Properties
```css
:root {
  --color-azul-act: #4666ff;
  --color-verde-act: #beff5e;
  --color-yellow-act: #f7c500;
  --color-dark: #212529;
  --font-main: 'Open Sans', sans-serif;
  --radius-sharp: 0px;
  --radius-pill: 26px;
  --shadow-card: 0px 4px 8px 0px rgba(0, 0, 0, 0.2);
}
```

### Style Dictionary JSON
```json
{
  "color": {
    "brand": {
      "primary": { "value": "#4666ff" },
      "secondary": { "value": "#beff5e" },
      "action": { "value": "#f7c500" }
    }
  },
  "font": {
    "family": { "value": "Open Sans" }
  }
}
```

## Known gaps
- Hover and focus states for primary buttons were not captured in the static analysis.
- Mobile-specific navigation transitions were not fully documented.
- The specific hex value for the "Success" semantic state (beyond the WhatsApp green) was not explicitly found in a validation context.