Sistema de identidad visual para una marca de energia solar que mezcla contraste alto, estructura tecnica y una expresion verde muy controlada. La marca se siente limpia, confiable y preparada para escalar entre ingenieria, campo y comunicacion institucional.
Dark structured surface, green accent and clear typography for a system that feels modern, technical and dependable.
:root {
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 26px;
--radius-xl: 34px;
--radius-full: 999px;
--space-xs: 6px;
--space-sm: 10px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 32px;
--space-xxl: 48px;
}@theme {
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 26px;
--radius-xl: 34px;
--radius-full: 999px;
--spacing-xs: 6px;
--spacing-sm: 10px;
--spacing-md: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-xxl: 48px;
}{
"colors": {},
"typography": {
"display": {
"family": "Glancyr",
"role": "Headings, logotipo, claims y jerarquia principal",
"weight": "700",
"size": "64px",
"lineHeight": "0.92",
"letterSpacing": "-0.045em",
"htmlFamily": "Sora",
"htmlNote": "Original: Glancyr -> HTML: Sora (Google substitute)"
},
"body": {
"family": "Glancyr",
"role": "Body copy, descripciones, captions y sistema de acompanamiento",
"weight": "400",
"size": "16px",
"lineHeight": "1.7",
"letterSpacing": "-0.01em",
"htmlFamily": "Sora",
"htmlNote": "Original: Glancyr -> HTML: Sora (Google substitute)"
},
"label": {
"family": "Sora",
"role": "Labels, microcopy, numeracion y tags tecnicos",
"weight": "500",
"size": "12px",
"lineHeight": "1.3",
"letterSpacing": "0.16em"
}
},
"rounded": {
"sm": "10px",
"md": "18px",
"lg": "26px",
"xl": "34px",
"full": "999px"
},
"spacing": {
"xs": "6px",
"sm": "10px",
"md": "16px",
"lg": "24px",
"xl": "32px",
"xxl": "48px"
}
}---
name: AFERGIS
description: Sistema de identidad visual para una marca de energia solar con tono tecnologico, confiable y orientado a la transicion energetica, construido con verde profundo, verde electrico y una sans geometrica contemporanea de alto impacto.
mode: dark
atmosphere:
- sustainable
- technological
- trustworthy
- luminous
- future-facing
colors:
primary:
name: Signal Green
hex: "#15C246"
usage: Titulares clave, acentos de sistema, iconografia y firma de marca
secondary:
name: Forest Deep
hex: "#142E27"
usage: Fondo institucional, heroes, paneles oscuros y estructura principal
tertiary:
name: Emerald Frame
hex: "#164730"
usage: Contornos, guias, overlays tecnicos y modulos secundarios
background:
name: Night Canopy
hex: "#0C1613"
usage: Canvas oscuro de maxima profundidad y contraste
surface:
name: Soft White
hex: "#FFFFFF"
usage: Tarjetas claras, logos sobre blanco y superficies de respiro
ink:
name: Solar White
hex: "#F7FFF8"
usage: Texto principal sobre fondos oscuros y logotipo en inversion
inkSoft:
name: Mint Haze
hex: "#D8FFE2"
usage: Texto secundario, notas suaves y enfatizados ligeros
border:
name: Grid Line
hex: "#2E4942"
usage: Lineas tecnicas, grillas, divisores y estructura radial
typography:
display:
family: Glancyr
role: Headings, logotipo, claims y jerarquia principal
weight: 700
size: 64px
lineHeight: 0.92
letterSpacing: -0.045em
htmlFamily: Sora
htmlNote: "Original: Glancyr -> HTML: Sora (Google substitute)"
body:
family: Glancyr
role: Body copy, descripciones, captions y sistema de acompanamiento
weight: 400
size: 16px
lineHeight: 1.7
letterSpacing: -0.01em
htmlFamily: Sora
htmlNote: "Original: Glancyr -> HTML: Sora (Google substitute)"
label:
family: Sora
role: Labels, microcopy, numeracion y tags tecnicos
weight: 500
size: 12px
lineHeight: 1.3
letterSpacing: 0.16em
rounded:
sm: 10px
md: 18px
lg: 26px
xl: 34px
full: 999px
spacing:
xs: 6px
sm: 10px
md: 16px
lg: 24px
xl: 32px
xxl: 48px
components:
buttonPrimary:
background: "#15C246"
text: "#0C1613"
border: "1px solid rgba(21, 194, 70, 0.12)"
radius: 999px
padding: "14px 24px"
buttonSecondary:
background: "transparent"
text: "#F7FFF8"
border: "1px solid rgba(247, 255, 248, 0.18)"
radius: 999px
padding: "14px 24px"
badge:
background: "rgba(255, 255, 255, 0.06)"
text: "#D8FFE2"
border: "1px solid rgba(216, 255, 226, 0.10)"
radius: 999px
padding: "6px 12px"
card:
background: "#12352D"
border: "1px solid #2E4942"
radius: 26px
padding: 24px
shadow: "0 18px 40px -30px rgba(0, 0, 0, 0.42)"
input:
background: "#12352D"
text: "#F7FFF8"
border: "1px solid rgba(216, 255, 226, 0.12)"
radius: 18px
padding: "14px 16px"
motion:
level: calm
durations: "160ms, 220ms"
easing: "cubic-bezier(0.22, 1, 0.36, 1)"
pattern: Fades breves, desplazamientos ligeros y refuerzos discretos de enfoque
imagery:
direction: Paneles solares, cielos abiertos, ingenieria limpia, trabajadores de campo y simbolos de energia
rule: Priorizar composiciones tecnicas, luz limpia y estructura visual; evitar brillos gaseosos o fondos abstractos blandos
---
# 1. Brand summary
AFERGIS comunica confianza tecnologica y optimismo energetico. Su identidad se apoya en un verde oscuro muy estable y en un verde electrico que activa la marca sin volverla agresiva.
El sistema se siente tecnico, pero accesible. Hay una intencion clara de hablar de energia, infraestructura y futuro sostenible desde un lenguaje visual limpio y de alto contraste.
# 2. Color system
## Core palette
- `Signal Green` `#15C246`: energia, accion y firma visual.
- `Forest Deep` `#142E27`: base institucional y campo principal.
- `Emerald Frame` `#164730`: estructura secundaria y overlays.
- `Night Canopy` `#0C1613`: fondo de maxima profundidad.
## Support roles
- `Soft White` `#FFFFFF`: respiro, contraste y superficies claras.
- `Solar White` `#F7FFF8`: texto claro principal.
- `Mint Haze` `#D8FFE2`: soporte tipografico suave.
- `Grid Line` `#2E4942`: lineas tecnicas y construccion.
## Usage
- Usar `Forest Deep` y `Night Canopy` como base dominante del sistema.
- Reservar `Signal Green` para momentos de energia, llamadas y simbolo.
- Mantener los claros como zonas de lectura, validacion y demostracion del logo.
# 3. Typography
## Heading system
- Original: `Glancyr`
- HTML substitute: `Sora`
- Rol: titulares, claims, logotipo y mensajes de alto impacto
- Peso observado: `700`
- Escala sugerida: `64px`
- Tracking: `-0.045em`
La fuente observada es una sans geometrica, ancha y redondeada, con tono claramente contemporaneo. En HTML se sustituye por `Sora`, que conserva la presencia limpia, la personalidad tecnologica y una buena tension entre energia y legibilidad.
## Body system
- Original: `Glancyr`
- HTML substitute: `Sora`
- Rol: cuerpo, descripciones, capturas de marca y contenido explicativo
- Peso base: `400`
- Escala: `16px / 1.7`
Aunque la guia parece usar una misma familia para gran parte del sistema, en cuerpo se percibe mas ligera y funcional. `Sora` soporta bien esa continuidad entre identidad y lectura.
## Label system
- `Sora 500`
- `12px`
- `0.16em`
- Uso en tags, numeracion, leyendas y marcadores tecnicos
# 4. Composition cues
- Grandes campos oscuros con verde brillante de alta visibilidad.
- Uso del simbolo en versiones plenas, outlines y construccion radial.
- Mezcla de layouts editoriales con imagenes de infraestructura energetica.
- Tarjetas claras para validar el logotipo y sus aplicaciones.
# 5. Components
## Buttons
- Primary: verde electrico con texto oscuro para una accion directa.
- Secondary: contorno claro sobre fondo oscuro.
## Cards
- Fondo `#12352D`
- Borde `#2E4942`
- Radio `26px`
- Sombra `0 18px 40px -30px rgba(0, 0, 0, 0.42)`
## Badge
- Pastilla translucida con texto menta claro.
## Input
- Campo verde oscuro con borde suave y texto claro.
# 6. Imagery and materiality
La marca funciona con fotografia de paneles solares, energia eolica, trabajo tecnico y escenas de campo bien iluminadas. La direccion visual debe sentirse limpia, precisa y moderna, no futurista de ciencia ficcion.
Evitar overlays nebulosos, gradientes blandos o fondos ambientales sin estructura. AFERGIS gana fuerza cuando la geometria y la ingenieria quedan claras.
# 7. Motion
- Nivel: `calm`
- Duraciones: `160ms` y `220ms`
- Easing: `cubic-bezier(0.22, 1, 0.36, 1)`
- Recomendacion: reforzar apariciones suaves, microdesplazamientos y cambios de enfasis sobre paneles o chips