# ASAC Brand Guidelines for AI Design Agents

Source: `https://asac.com.sv/brandbook/`  
Reference: `REF · BRAND-2026-07`  
Date: Julio 2026  
Type: Refinamiento visual, no rediseño

Public resources:

- Brandbook: `https://asac.com.sv/brandbook/`
- AI manifest: `https://asac.com.sv/brandbook/ai-manifest.json`
- Tokens JSON: `https://asac.com.sv/brandbook/asac-brand-tokens.json`
- Tokens CSS: `https://asac.com.sv/brandbook/asac-tokens.css`
- Isotipo SVG: `https://asac.com.sv/brandbook/asac-isotipo.svg`
- Asset pack: `https://asac.com.sv/brandbook/asac-brand-assets.zip`

## Brand Essence

ASAC is an institutional, B2B logistics association brand. It should feel reliable, formal, technical, and connected to trade, freight forwarding, customs, transportation, and international commerce.

The brand update is a refinement, not a reinvention. Preserve the original logo essence while improving clarity, technical construction, spacing, proportion, and consistency.

## Official Assets

- Primary logo SVG: `https://asac.com.sv/images/asac-logo.svg`
- Isotipo SVG: `https://asac.com.sv/brandbook/asac-isotipo.svg`

Always use the official SVG when possible. Do not rebuild the ASAC logo with editable text, custom letters, or manually composed symbols.

## Logo Usage

Preferred versions:

1. Principal sobre azul
   Use on navy backgrounds, headers, covers, hero areas, and high-impact institutional material.

2. Secundaria sobre blanco
   Use on documents, admin surfaces, forms, directory pages, and light interfaces.

3. Isotipo independiente
   Use only when space is limited: favicon, avatar, seal, system icon, compact mark.

4. Versión compacta
   Use for narrow spaces: sidebars, mobile bars, institutional chips, digital signatures.

Rules:

- Do not reconstruct the logo with editable text or separate letters.
- Do not distort, condense, stretch, rotate, or change the isotype/text relationship.
- Do not use pixelated logo files when SVG/vector is available.
- Do not apply shadows, outlines, gradients, glows, or decorative effects to the logo.
- Maintain clear space around the logo: at least the height of the isotype.
- Use deep navy as the main institutional field and white as secondary surface.

## Color Tokens

Primary institutional color:

- Azul institucional: `#042264`

The primary institutional blue matches the official logo SVG fill.

Accent / CTA:

- Accent 500: `#fa8219`

Ink scale:

- Ink 50: `#f1f4f8`
- Ink 100: `#d9dfe8`
- Ink 300: `#8da0b8`
- Ink 500: `#41628a`
- Ink 700: `#1a3458`
- Ink 900: `#042264`

Accent scale:

- Accent 50: `#fff5eb`
- Accent 100: `#feebd7`
- Accent 300: `#fcc387`
- Accent 500: `#fa8219`
- Accent 700: `#b85c0d`
- Accent 900: `#683407`

State colors:

- Success: `#10b981`
- Warning: `#f59e0b`
- Danger: `#ef4444`
- Info: `#3b82f6`
- Expo Teal: `#1d5e6a`
- Expo Magenta: `#e91e63`

Surfaces:

- Page: `#f7f9fc`
- Raised: `#ffffff`
- Sunken: `#f1f4f8`
- Inverse: `#042264`

## Typography Roles

Use semantic type roles instead of arbitrary visual sizes:

- Hero: `home-hero-title`
- Page hero: `page-hero-title`
- H1: `fluid-h1`
- H2: `fluid-h2`
- H3: `fluid-h3`
- Intro paragraph: `lede`
- Section label: `eyebrow-accent`
- Metadata: `meta-caps`

Tone should be institutional, clear, and B2B. Avoid playful, consumer, or decorative typography.

## Radius And Spacing

Radius:

- XS: `4px`
- SM: `6px`
- MD: `10px`
- LG: `14px`
- XL: `20px`
- 2XL: `28px`

Spacing:

- 1: `4px`
- 2: `8px`
- 3: `12px`
- 4: `16px`
- 6: `24px`
- 8: `40px`
- 10: `64px`
- 12: `96px`

## Public Page Design Guidance

Public pages should feel institutional and high-trust. Use deep navy fields, white surfaces, restrained borders, and orange for clear calls to action. Prefer real ASAC event, logistics, member, or trade imagery over generic stock imagery.

Heroes should communicate ASAC, logistics, freight, trade, members, or institutional activity immediately. Avoid abstract decorative backgrounds when a real image can provide context.

## Admin And Tool Design Guidance

Admin tools and operational interfaces should be compact, scannable, and efficient. Prioritize tables, filters, status labels, search, predictable navigation, and clear actions. Avoid marketing-style hero sections inside tools.

## Component Guidance

- Primary buttons: use `#fa8219` with `#042264` text. Keep one primary action per block.
- Secondary buttons: use white surfaces, `#d9dfe8` borders, and `#042264` text.
- Badges: compact, high-contrast labels for membership, status, category, event, or publication state.
- Tables: preferred for directory, tenders, member lists, reports, and comparisons.
- Alerts: short copy, visible state, restrained color, no decorative effects.

## Voice Guidance

Use Spanish that is institutional, direct, useful, and sector-aware. Mention logistics, freight forwarding, cargo, customs, transport, members, training, regional commerce, and foreign trade when relevant.

Use consistent `tú` forms in user-facing copy. Avoid voseo if the surrounding experience uses `tú`.

Good example:

> Conecta tu empresa con una red logística institucional y representativa del sector carga.

Avoid:

> Subí tu negocio al siguiente nivel con una experiencia increíble y sin límites.

## Imagery Guidance

Prefer real ASAC, logistics, trade, event, training, member, and regional commerce imagery. When placing text over a photo, use a navy overlay that preserves legibility. Avoid dark, blurry, abstract, or generic stock imagery when the audience needs to understand the real activity.

## Do

- Use `#042264` as the main institutional color.
- Use `#fa8219` for CTAs and accents.
- Keep layouts sober, structured, and professional.
- Use official SVG logo assets.
- Use semantic typography roles and design tokens.
- Keep strong contrast and readable labels.
- Prefer real ASAC/logistics imagery over generic abstractions.
- Use tables and filters for operational surfaces.

## Do Not

- Do not recolor the brand into unrelated palettes.
- Do not use decorative gradients, glows, or logo effects.
- Do not rebuild the logo manually.
- Do not stretch or crop the logo incorrectly.
- Do not use overly playful consumer visuals.
- Do not make admin screens look like landing pages.
- Do not mix voseo with `tú` in the same experience.
- Do not hide key operational data inside decorative cards when a table is clearer.