Brillix Identity Board Brand Style Guide
← Color Fonts

Brillix

Sistema premium observado desde screenshot: navy dominante, naranja de alto impacto, serif elegante para lockups y display, Poppins como base funcional y un emblema geométrico circular desplegado en pattern, interfaz, stationery, apparel y señaletica.

Fuente: screenshot estatico. Colores medidos desde imagen. Tipografias visibles detectadas por lectura del board de tipografia. CSS original, pesos exactos y specs de produccion completas: no detectado.

FUENTE: Brillix-Brand-Guidelines-2026-06-21-12_34_03.png

Typography

Observed + approximated
Heading system
Top Luxury
Original observado: Top Luxury
HTML substitute: Cormorant Garamond · 72px aprox · 700
Premium identity
and signage
Body system
Poppins
Original observado: Poppins
HTML substitute: Poppins · 16px · 400 a 600 aprox
Brillix presenta una identidad de lujo muy controlada: serif para estatus y presencia, sans para claridad técnica y aplicaciones de sistema.
Logotipo observado como lockup serif premium con emblema circular. La fuente exacta del wordmark no se detecta con certeza.
Aa Bb Cc Dd · 123456789
Headings · Body · Logo lockup

Colors

Luxury contrast
Primary #1A1F63
Secondary #F68B1F
Tertiary #B8C8F0
Quaternary #F3E6D7
Usage: Background #151A52 · Surface #232A73 · Text Primary #FFF5EA · Text Secondary #C8D2F5 · Border #38428B

Overview

Brandbook sequence
Observed brandBrillix
Source typeStatic screenshot
Chapter flowLogo, palette, typography, pattern, UI, applications
Visual cueLuxury-tech with strong signage readiness
La guía se comporta como un sistema listo para presentar marca y despliegue comercial: primero ordena logo y color, luego entra a tipografía, pattern, UI, papelería, apparel y activaciones de entorno.

Components

Observed modules
Brillix
Brillix
Brillix
Observed modules: Logo boards, symbol pattern, dashboard cards, product UI, stationery, packaging, apparel, signage and environmental branding.

Buttons

HTML translation
Primary chapter Structured action
Note: La fuente es un brandbook, no una app productiva aislada. Estos botones traducen el contraste cromático y el tono premium a una interfaz web.

Spacing

Presentation rhythm
8px base 12px note gap 16px module gap 24px board padding 40px showcase breath
Presentation spacing
Premium showcase cadence
La composición alterna paneles densos con páginas de aire amplio. El sistema necesita ese respiro para que navy, naranja y el emblema no compitan al mismo tiempo.

Elevation / Depth

Graphic depth
Observed premium logic
Depth style: Strong color planes, subtle shadow and structured borders. The screenshot reads premium and graphic, not glass-heavy.
box-shadow: 0 24px 54px -36px rgba(3, 7, 34, 0.45) border: 1px solid #38428B blur: (no detectado)

Shapes

Geometric emblem
Corner radii4px · 10px · 16px · 22px
Pattern roleModular support derived from the emblem

Do's and Don'ts

Guardrails

Do

Usar navy como campo dominante de estructura.
Reservar naranja para activación, foco y energía de marca.
Mantener el emblema como activo modular repetible.
Construir aplicaciones con contraste limpio y acabado premium.

Don't

No introducir más acentos brillantes fuera de la paleta observada.
No convertir el sistema en algo casual o pastel.
No usar pills excesivos ni suavidad infantil en controles.
No poner pattern detrás del bloque principal de copy.

Motion

Restrained
Motion should feel premium and controlled. Prefer clean chapter reveals, subtle lift on hover and contrast-led transitions instead of playful or glossy movement.
durations: 180ms, 280ms easing: cubic-bezier(0.22, 1, 0.36, 1) patterns: fade-in, slight lift, premium stagger
Brillix style guide reconstruction from screenshot source
06

Resources

copy & paste
Download DESIGN.md 
:root {
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --space-base: 8px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-xxl: 40px;
}
@theme {
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 22px;
  --spacing-base: 8px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 24px;
  --spacing-xxl: 40px;
}
{
  "colors": {},
  "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"
  }
}
---
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