@grupo-elo-editorial/design-tokens

v3.1.0

Published

12 hours ago

Grupo ELO Editorial — multibrand design tokens (colors, typography, spacing, motion, breakpoints, container, grid) for ELO Editora and PeraBook. Framework-agnostic CSS, tokens-only.

0High
0Medium
0Low

vander-loto

design-system design-tokens css multi-brand wcag elo-editora perabook grupo-elo-editorial

`@grupo-elo-editorial/design-tokens`

Multi-brand design tokens for Grupo ELO Editorial — the canonical CSS foundation for the ELO Editora (institutional) and PeraBook (children's) brands. Framework-agnostic. Tokens-only.

Install

pnpm add @grupo-elo-editorial/design-tokens

Use

/* Full entry — fonts + multibrand tokens (both Elo Editora and PeraBook) */
@import "@grupo-elo-editorial/design-tokens";

Or pick just the slice you need:

/* Just the tokens, bring your own font loader */
@import "@grupo-elo-editorial/design-tokens/tokens.css";

/* Single-brand apps */
@import "@grupo-elo-editorial/design-tokens/theme-elo.css";
@import "@grupo-elo-editorial/design-tokens/theme-perabook.css";

/* Just the Lato @import */
@import "@grupo-elo-editorial/design-tokens/fonts.css";

Then activate brand + theme on the root element:

<html data-brand="elo-editora" data-theme="light">
  <!-- or data-brand="perabook" / data-theme="dark" -->
</html>

All --brand-* tokens (primary, secondary, accent, surface, text, border, semantic) flip automatically when data-brand or data-theme changes — no rebuild required.

What's in the box

2 brands × 2 themes = 4 modes
- Elo Editora: azul #003c70 primary (light) · #4A8FD6 (dark)
- PeraBook: teal #006D77 primary (light) · #2DD4BF (dark)
Shared tokens: spacing ladder (4 → 96 px), radius (sm → 2xl + full), shadow (sm → xl), motion (fast/normal/slow + ease tokens), typography scale (display → label), mobile-first responsive type at ≤767 px.
Base layer: box-sizing reset, body type, h1–h4 headings, focus-visible global ring, prefers-reduced-motion respect.
Typography utilities: .text-display, .text-body-lg, .text-body, .text-caption, .text-label.
Brand assets: official logos (light + dark) at ./assets/elo-editora/ and ./assets/perabook/.
Style Dictionary export at ./brand-tokens.json for tooling automation (Figma Tokens, Zeroheight, etc).

What's NOT in the box

This package is tokens-only (architectural decision 2026-05-13). Component primitives (Button, Input, Modal, Form, Card, etc.), composed components (BookCard, ShelfRow), and UI hooks live in packages/shared-ui/ and are consumed by app teams from there.

The ./components.css export still resolves (so v2 consumers don't fail to import during migration) but is an empty deprecation stub.

Tokens you'll reach for most

/* Color */
var(--brand-primary)      var(--brand-secondary)    var(--brand-accent)
var(--brand-primary-light) var(--brand-primary-dark)
var(--brand-surface)      var(--brand-surface-raised) var(--brand-bg)
var(--brand-text-primary) var(--brand-text-secondary) var(--brand-border)
var(--brand-success)      var(--brand-warning)      var(--brand-error)

/* Spacing */
var(--space-1) ... var(--space-24)

/* Radius */
var(--radius-sm)  var(--radius-md)  var(--radius-lg)
var(--radius-xl)  var(--radius-2xl) var(--radius-full)

/* Shadow */
var(--shadow-sm)  var(--shadow-md)  var(--shadow-lg)  var(--shadow-xl)

/* Motion */
var(--duration-fast)   var(--duration-normal)  var(--duration-slow)
var(--ease-default)    var(--ease-spring)

/* Breakpoints — v3.1.0 (mirrors Tailwind sm:/md:/lg:/xl:/2xl:) */
var(--bp-sm)   /* 640px */   var(--bp-md)   /* 768px */
var(--bp-lg)   /* 1024px */  var(--bp-xl)   /* 1280px */
var(--bp-2xl)  /* 1536px */

/* Container — v3.1.0 (page-level wrapper) */
var(--container-max)         /* 1280px */
var(--container-px)          /* 1.5rem */

/* Grid — v3.1.0 (responsive column progression) */
var(--grid-cols-default)     /* 1 */
var(--grid-cols-sm)          /* 2 */
var(--grid-cols-md)          /* 3 */
var(--grid-cols-lg)          /* 4 */
var(--grid-cols-xl)          /* 6 */
var(--grid-gutter)           /* 1.5rem */

/* Typography */
var(--font-family-brand)
var(--font-size-display)  var(--font-size-h2)   ... var(--font-size-label)
var(--line-height-display) ... var(--line-height-label)
var(--font-weight-regular) var(--font-weight-semibold) var(--font-weight-bold)

Migration from v2.x

v3.0.0 is a breaking change — the entire palette and component layer changed:

| Surface | v2.x (mustard / verde-folha) | v3.0.0 (azul / teal) | |---|---|---| | Elo primary | #F0AA48 mustard | #003c70 azul institucional | | PeraBook primary | #4CA64C verde-folha | #006D77 teal | | Token format | OKLCH | sRGB hex | | Components | components.css shipped 27 component classes | empty stub — components moved to shared-ui | | Type scale | fluid xs–6xl | fixed display → label, mobile-first responsive |

Migration path:

Re-import @grupo-elo-editorial/design-tokens (no change to import path).
Replace any hardcoded references to v2 colors (#F0AA48, #4CA64C, …) with the new tokens.
Replace any @import "@grupo-elo-editorial/design-tokens/components.css" with imports from @grupo-elo-editorial/shared-ui (Vue) or your framework-specific UI library.
If you used the OKLCH scale (oklch(...)), the v3 sRGB hex values produce equivalent rendering — no manual conversion needed in 99% of cases.

The v2 source (colors_and_type.css + components.css) is archived at design-system/_archive/v2-mustard-navy/ for reference.

License

UNLICENSED — proprietary to Grupo ELO Editorial.

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme