---
version: "alpha"
name: "Brillix"
description: "Sistema de identidad premium observado en screenshot, con navy profundo, naranja intenso, crema, azul hielo y un emblema geométrico circular aplicado a pattern, stationery, producto y señalética."
mode: dark
source: "C:\\Users\\USER\\claude-skill-library-v2\\utilidades\\DESIGN Style guides 2\\screens 2\\Brillix-Brand-Guidelines-2026-06-21-12_34_03.png"
sourceType: image
sourceAccuracy: "Colores medidos desde la imagen. La marca visible es Brillix. En la pagina de tipografia se observan Top Luxury y Poppins; la primera se documenta como observada y se aproxima en HTML."
atmosphere:
  - luxury
  - geometric
  - premium
  - corporate
  - bold
colors:
  primary:
    name: Brillix Navy
    hex: "#1A1F63"
    usage: Fondo principal, paneles de capitulo, UI base y contraste mayor
  secondary:
    name: Signal Orange
    hex: "#F68B1F"
    usage: CTA, paneles energicos, acento principal y aplicaciones destacadas
  tertiary:
    name: Ice Blue
    hex: "#B8C8F0"
    usage: Fondos suaves, variantes secundarias y soporte tipografico
  quaternary:
    name: Paper Cream
    hex: "#F3E6D7"
    usage: Fondo claro, stationery y zonas de lectura
  background:
    name: Deep Indigo
    hex: "#151A52"
    usage: Canvas dominante del sistema
  surface:
    name: Midnight Panel
    hex: "#232A73"
    usage: Superficies elevadas y modulos internos
  text-primary:
    name: Soft Ivory
    hex: "#FFF5EA"
    usage: Texto principal sobre navy y naranja
  text-secondary:
    name: Powder Blue
    hex: "#C8D2F5"
    usage: Texto secundario, labels y notas de apoyo
  border:
    name: Indigo Line
    hex: "#38428B"
    usage: Bordes finos y estructura de paneles
typography:
  display:
    family: "Top Luxury"
    role: Headings, brand lockups, premium statements
    weight: "700 aprox"
    size: "72px aprox"
    lineHeight: 0.92
    letterSpacing: "-0.03em"
    htmlFamily: "Cormorant Garamond"
    htmlNote: "Original observado en el screenshot. Sustituto HTML aproximado para el tono serif de lujo."
  body:
    family: "Poppins"
    role: Body copy, rules, product labels and UI support
    weight: "400 a 600 aprox"
    size: "16px"
    lineHeight: 1.58
    letterSpacing: "0"
    htmlFamily: "Poppins"
    htmlNote: "Visible en la pagina de tipografia del screenshot."
  logo:
    family: "Top Luxury / custom lockup observado"
    role: Wordmark, logo applications and display lockups
    weight: "(no detectado)"
    htmlFamily: "Cormorant Garamond"
    htmlNote: "Aproximacion HTML para el lockup serif del logotipo."
rounded:
  sm: "4px"
  md: "10px"
  lg: "16px"
  xl: "22px"
spacing:
  base: "8px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  xxl: "40px"
components:
  button-primary:
    backgroundColor: "#F68B1F"
    textColor: "#151A52"
    border: "1px solid rgba(246, 139, 31, 0.32)"
    rounded: "16px"
    padding: "12px 20px"
  button-secondary:
    backgroundColor: "transparent"
    textColor: "#FFF5EA"
    border: "1px solid rgba(255, 245, 234, 0.22)"
    rounded: "16px"
    padding: "12px 20px"
  card:
    backgroundColor: "#232A73"
    border: "1px solid #38428B"
    rounded: "18px"
    padding: "22px"
  badge:
    backgroundColor: "rgba(246, 139, 31, 0.16)"
    textColor: "#F68B1F"
    border: "1px solid rgba(246, 139, 31, 0.24)"
motion:
  level: restrained
  durations: "180ms, 280ms"
  easing: "cubic-bezier(0.22, 1, 0.36, 1)"
  pattern: Polished fades, premium hover lifts and controlled chapter reveals
---

## Overview

- **Composition cues:**
  - Layout: Grid
  - Content Width: Full Bleed
  - Framing: Premium boards
  - Grid: Strong

## Source reliability

- Source used: single screenshot of the brand guide
- Observed brand in source: `Brillix`
- Colors: measured from image
- Typography: `Top Luxury` and `Poppins` are visible in the typography page
- Exact CSS variables, exact export dimensions and exact production specs: `(no detectado)`

## Colors

The system uses a strong luxury-tech pairing of indigo navy and orange, balanced by cream and powder blue.

- **Primary (#1A1F63):** main canvas, major panels and deep contrast.
- **Secondary (#F68B1F):** key action and signature accent.
- **Tertiary (#B8C8F0):** soft support for light panels and secondary hierarchy.
- **Quaternary (#F3E6D7):** premium paper base for reading and printed applications.

- **Usage:** Background: #151A52; Surface: #232A73; Text Primary: #FFF5EA; Text Secondary: #C8D2F5; Border: #38428B; Accent: #F68B1F

## Typography

Typography is explicitly signaled in the screenshot.

- **Display:** Top Luxury, 72px approx, weight 700 approx, serif premium tone.
- **Body:** Poppins, 16px approx, regular to medium weights.
- **Logo lockup:** classic serif logo treatment, exact source `(no detectado)`, approximated in HTML only.

## Layout

Layout behaves like a complete brandbook: logo system first, then palette, typography, pattern, UI modules, stationery, product and signage applications.

- **Layout type:** Grid
- **Content width:** Full Bleed
- **Base unit:** 8px
- **Scale:** 8px, 12px, 16px, 24px, 40px
- **Section padding:** 24px, 32px, 40px
- **Card padding:** 22px, 24px

## Elevation & Depth

Depth is graphic rather than soft. Large areas of navy and orange carry the hierarchy, while borders and clean modules create order.

- **Surface style:** Flat premium boards with subtle glow or shadow
- **Borders:** 1px #38428B, 1px rgba(255, 245, 234, 0.12)
- **Shadows:** 0 24px 54px -36px rgba(3, 7, 34, 0.45)
- **Blur:** `(no detectado)`

## Shapes

The brand mixes geometric rigor with moderate softness. The emblem is circular and modular, but panels and UI surfaces stay controlled and not overly rounded.

- **Corner radii:** 4px, 10px, 16px, 22px
- **Icon sets:** custom emblem and geometric mark system

## Components

The screenshot shows a mature identity system spanning logo boards, color tables, typography specimen, pattern libraries, interface cards, stationery, packaging, apparel and signage.

### Buttons

- **Primary:** orange background, navy text, squared-soft radius.
- **Secondary:** transparent or navy field with ivory text and structured borders.

### Cards and Surfaces

- **Card surface:** #232A73, border #38428B, radius 18px, padding 22px.

### Brand system

- **Observed:** logo lockups, pattern tiles, dashboard cards, stationery, apparel, signage, packaging and environmental branding.

## Do's and Don'ts

### Do

- Do keep navy as the dominant field and orange as the strongest spark.
- Do preserve the emblem as a modular repeatable asset.
- Do use cream and powder blue to give breathing room inside premium layouts.
- Do keep applications crisp and presentation-led.

### Don't

- Don't dilute the system with extra bright accents outside the observed palette.
- Don't turn the identity into pastel or casual tech styling.
- Don't over-round controls into pills when the brand reads more structured.
- Don't use the pattern under critical headline copy.

## Motion

Motion should feel premium and deliberate. Use clean fades, restrained lifts and chapter-based reveals.

**Motion Level:** restrained

**Durations:** 180ms, 280ms

**Easing:** cubic-bezier(0.22, 1, 0.36, 1)

**Hover Patterns:** contrast, slight lift, border emphasis

**Scroll Patterns:** chapter reveal, premium stagger