Family mezcla dirección lúdica, interfaces redondeadas y una paleta brillante sin dejar de verse segura. Es una marca de wallet que se siente cercana, clara y sorprendentemente amable.
Screenshot real del sitio de Family. La página en vivo arrojó errores runtime durante la inspección, pero la identidad principal, el hero y los tokens visibles sí pudieron verificarse y capturarse.
Family se apoya en dos familias distintas: una display propia con personalidad suave para titulares, y una sans más funcional para cuerpo e interfaz.
La personalidad fuerte está en la display. El cuerpo se mantiene claro, contemporáneo y neutro. Eso permite que los personajes, colores y productos hagan el trabajo expresivo.
Nada aquí quiere parecer financiero serio o maximal tech. La marca busca una relación más emocional, más cotidiana y más accesible con el usuario.
La base es marfil y gris cálido. Encima viven acentos muy vivos, especialmente azul, verde, naranja y púrpura. El sistema no parece cripto oscuro; parece producto de consumo bien curado.
Los componentes visibles del sitio alternan pills oscuros y claros, módulos muy redondeados y tarjetas de wallet con suficiente aire para que todo se entienda rápido.
Family usa pills de 32px con radio máximo, una negra de acción principal y una clara para soporte o descarga.
Tarjeta oscura de wallet como contraste puntual frente al mundo beige y luminoso del landing.
Enlaces, chips y módulos informativos usan el mismo principio: suavidad geométrica, textos claros y jerarquía sin dureza.
Family funciona porque evita el tono frío de producto financiero, pero tampoco cae en un visual infantil. La línea entre ambas cosas es delicada.
Los bloques de abajo toman los valores detectados del sitio y los empaquetan para reutilización rápida, manteniendo visibles los nombres originales de fuente y los sustitutos HTML.
:root {
--heading: #343433;
--body: #494440;
--body-muted: #848281;
--beige: #FBFAF9;
--beige-dark: #EAEAEA;
--blue: #3784F4;
--blue-light: #EEFBFD;
--green: #44C67F;
--yellow: #FFBE4C;
--gold: #CA9230;
--orange: #FF5310;
--purple: #9553F9;
--graphic-stone: #F2EBE0;
--graphic-outline: #B2A79A;
--font-display: "Onest", system-ui, sans-serif; /* original: Family */
--font-body: "Plus Jakarta Sans", system-ui, sans-serif; /* original: LFE Sans */
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--radius-pill: 32px;
--radius-image: 40px;
}
@theme {
--color-family-heading: #343433;
--color-family-body: #494440;
--color-family-muted: #848281;
--color-family-beige: #FBFAF9;
--color-family-stone: #F2EBE0;
--color-family-blue: #3784F4;
--color-family-green: #44C67F;
--color-family-orange: #FF5310;
--color-family-purple: #9553F9;
--font-display: "Onest", system-ui, sans-serif;
--font-sans: "Plus Jakarta Sans", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", ui-monospace, monospace;
--radius-family-pill: 32px;
--radius-family-card: 24px;
--radius-family-image: 40px;
}
.family-pill-dark {
@apply inline-flex h-8 items-center justify-center rounded-full bg-[#171717] px-[14px] text-[15px] font-medium text-white;
}
.family-pill-light {
@apply inline-flex h-8 items-center justify-center rounded-full bg-[#F6F4EF] px-[14px] text-[15px] font-medium text-[#121212];
}
{
"brand": "Family",
"source": "https://family.co/",
"theme": "light",
"sections": ["Diseño Juguetón", "Colores Vibrantes", "Moderno"],
"colors": {
"heading": "#343433",
"body": "#494440",
"muted": "#848281",
"beige": "#FBFAF9",
"beigeDark": "#EAEAEA",
"blue": "#3784F4",
"blueLight": "#EEFBFD",
"green": "#44C67F",
"yellow": "#FFBE4C",
"gold": "#CA9230",
"orange": "#FF5310",
"purple": "#9553F9",
"outline": "#B2A79A"
},
"fonts": {
"displayOriginal": "Family",
"bodyOriginal": "LFE Sans",
"displayHtml": "Onest",
"bodyHtml": "Plus Jakarta Sans",
"monoHtml": "IBM Plex Mono"
},
"components": {
"heroHeadline": "68px",
"heroLineHeight": "74.8px",
"buttonHeight": "32px",
"buttonRadius": "32px",
"imageRadius": "40px"
}
}
---
version: "1.0"
name: "Family"
description: "Sistema visual luminoso para una wallet de consumo: fondos marfil, titulares suaves, interfaces redondeadas, ilustracion lúdica y una paleta brillante de azul, verde, naranja y púrpura que hace que crypto se sienta cercana."
colors:
primary: "#3784F4"
primary-hover: "#1A88F8"
primary-active: "#006FE8"
secondary: "#44C67F"
accent: "#FF5310"
accent-soft: "#D8ECFC"
neutral: "#FBFAF9"
background: "#FBFAF9"
surface: "#F6F4EF"
surface-brand: "#F2EBE0"
text-primary: "#343433"
text-secondary: "#494440"
text-muted: "#848281"
text-on-primary: "#FFFFFF"
border: "#B2A79A"
border-subtle: "#EAEAEA"
success: "#44C67F"
success-bg: "#E9F8F0"
warning: "#FFBE4C"
warning-bg: "#FFF3DD"
error: "#FF5310"
error-bg: "#FFE7DD"
info: "#3784F4"
info-bg: "#EEFBFD"
typography:
display-lg:
fontFamily: "Family"
fontSize: "68px"
fontWeight: 500
lineHeight: "74.8px"
letterSpacing: "-1.36px"
body-md:
fontFamily: "LFE Sans"
fontSize: "14px"
fontWeight: 400
lineHeight: "20px"
label-md:
fontFamily: "LFE Sans"
fontSize: "15px"
fontWeight: 500
lineHeight: "22px"
rounded:
xs: "6px"
sm: "8px"
md: "16px"
lg: "24px"
xl: "32px"
image: "40px"
full: "999px"
spacing:
base: "4px"
sm: "8px"
md: "16px"
lg: "24px"
xl: "32px"
gap: "40px"
section-padding: "80px"
components:
button-primary:
backgroundColor: "#171717"
textColor: "#FFFFFF"
typography: "{typography.label-md}"
rounded: "{rounded.full}"
padding: "0 14px"
height: "32px"
button-secondary:
backgroundColor: "#F6F4EF"
textColor: "#121212"
typography: "{typography.label-md}"
rounded: "{rounded.full}"
padding: "0 14px"
height: "32px"
card:
backgroundColor: "#FFFFFF"
rounded: "{rounded.lg}"
padding: "24px"
---
# DESIGN.md - Family
> Sistema de diseño extraído de `https://family.co/`.
> Generado siguiendo el skill `url-inspiration-styleguide`.
> Durante la verificación en vivo aparecieron errores runtime de React y respuestas 503/500, pero el hero, la tipografía custom y los tokens visibles sí pudieron verificarse desde el HTML, CSS inline y la captura real.
---
## 1. Tema Visual y Atmósfera
Family propone una lectura poco común dentro de crypto: cercanía antes que intimidación. El sistema visual se mueve en un territorio claro, cálido y alegre. En lugar de usar fondos oscuros y glows fríos como marca dominante, la página se apoya en marfiles suaves, grises cálidos y una serie de acentos brillantes que parecen salidos de una caja de stickers bien curada.
El headline principal y las ilustraciones del hero introducen una tensión muy útil. Por un lado, el sitio se siente juguetón y amable. Por otro, la interfaz de producto sigue viéndose utilitaria y comprensible. No es una marca naive. Es una marca que suaviza el lenguaje de wallet sin hacerlo ver infantil o inseguro. Esa diferencia es la clave del sistema.
La dirección de arte también trabaja por contraste de mundos. La página alterna un universo de personajes, fondos claros y bloques editoriales con teléfonos oscuros y tarjetas de wallet de aspecto más técnico. Gracias a eso, el producto no se pierde dentro de la simpatía visual, y la simpatía no desaparece bajo la lógica del dashboard.
En digital, la regla más importante es mantener esa dualidad:
- calidez en el canvas
- claridad en la interfaz
- color vivo en acentos
- producto suficientemente serio para sostener confianza
**Palabras clave de personalidad**: cercano, luminoso, amistoso, redondeado, optimista, funcional, accesible, vibrante
**Densidad del layout**: media-baja, con aire amplio entre bloques
**Modo preferido**: claro
**Nivel de ornamentación**: moderado, con personajes, color y componentes visuales suaves
**Audiencia visual objetivo**: usuarios de crypto que quieren simplicidad, seguridad y una experiencia menos intimidante
### Lectura de dirección de arte
- El sistema evita el negro como ambiente dominante.
- El marfil funciona mejor que el blanco puro.
- El color se distribuye como pequeños estallidos, no como baño uniforme.
- Los personajes ayudan a desdramatizar el producto.
- Las interfaces oscuras en los teléfonos sirven de contraste funcional.
- Los titulares son grandes y suaves, no agresivos.
- Los CTA se sienten cómodos de tocar.
- El diseño no parece enterprise.
- El diseño tampoco parece juguete.
- La marca se siente cuidadosamente humana.
---
## 2. Paleta de Colores y Roles Semánticos
Family organiza su paleta con una lógica clara. Primero, un mundo de neutrales tibios y bien controlados. Después, una serie de acentos saturados que aparecen para ilustración, enlaces, highlights y estados. El azul es el más estable como señal funcional, pero el sistema completo necesita convivir con verde, naranja, amarillo y púrpura para no perder su identidad viva.
### Colores de marca
| Nombre | Variable CSS | Hex | Rol | Texto sobre el |
|--------|-------------|-----|-----|----------------|
| Azul primario | `--color-primary` | `#3784F4` | enlaces, CTAs secundarios, señales funcionales | `#FFFFFF` |
| Azul hover | `--color-primary-hover` | `#1A88F8` | hover de links y detalles interactivos | `#FFFFFF` |
| Azul active | `--color-primary-active` | `#006FE8` | estado activo derivado para completar el sistema | `#FFFFFF` |
| Verde primario | `--color-secondary` | `#44C67F` | positivos, balances y estados tranquilos | `#FFFFFF` |
| Naranja acento | `--color-accent` | `#FF5310` | ilustración, alerts cálidas y micro acentos | `#FFFFFF` |
| Azul suave | `--color-accent-soft` | `#D8ECFC` | selección, chips suaves y fondo de foco | `#008CFF` |
| Púrpura | `--color-purple` | `#9553F9` | apoyo vibrante, categorías secundarias | `#FFFFFF` |
| Amarillo | `--color-yellow` | `#FFBE4C` | apoyo cálido, labels o tags amables | `#343433` |
### Colores de superficie
| Nombre | Variable CSS | Hex | Rol |
|--------|-------------|-----|-----|
| Fondo base | `--color-bg` | `#FBFAF9` | canvas general del sitio |
| Surface cálida | `--color-surface` | `#F6F4EF` | botones claros, chips, panels suaves |
| Surface stone | `--color-surface-brand` | `#F2EBE0` | bloques de apoyo y fondos ilustrados |
| Border subtle | `--color-border-subtle` | `#EAEAEA` | divisores, strokes ligeros |
| Gray light | `--color-gray-light` | `#F2F0ED` | descansos de layout y variaciones suaves |
| White | `--color-white` | `#FFFFFF` | cards, menus, dropdowns |
### Colores de texto
| Nombre | Variable CSS | Hex | Uso |
|--------|-------------|-----|-----|
| Texto principal | `--color-text` | `#343433` | titulares y énfasis |
| Texto secundario | `--color-text-secondary` | `#494440` | copy principal |
| Texto muted | `--color-text-muted` | `#848281` | metadata, apoyo, FAQ numerics |
| Texto sobre negro | `--color-text-on-dark` | `#FFFFFF` | CTA oscuros y wallet cards |
| Texto sobre beige claro | `--color-text-on-light` | `#121212` | CTA claros y botones secundarios |
### Colores de estado
> El sitio no expone un sistema semántico formal completo. Los siguientes tonos completan la gramática a partir de la paleta real.
| Estado | Variable CSS | Hex | Texto | Nota |
|--------|-------------|-----|-------|------|
| Success | `--color-success` | `#44C67F` | `#FFFFFF` | observado |
| Success bg | `--color-success-bg` | `#E9F8F0` | `#343433` | derivado para completar el sistema |
| Warning | `--color-warning` | `#FFBE4C` | `#343433` | observado |
| Warning bg | `--color-warning-bg` | `#FFF3DD` | `#343433` | derivado para completar el sistema |
| Error | `--color-error` | `#FF5310` | `#FFFFFF` | observado |
| Error bg | `--color-error-bg` | `#FFE7DD` | `#343433` | derivado para completar el sistema |
| Info | `--color-info` | `#3784F4` | `#FFFFFF` | observado |
| Info bg | `--color-info-bg` | `#EEFBFD` | `#343433` | observado como surface azul clara |
### Rampas útiles
- Azul:
- `#EEFBFD`
- `#D8ECFC`
- `#7DC4FF`
- `#3784F4`
- `#1A88F8`
- Verde:
- `#E9F8F0` (derivado)
- `#44C67F`
- `#34C759`
- Naranja / Gold:
- `#FFF3DD` (derivado)
- `#FFCF7B`
- `#FFBE4C`
- `#F5B442`
- `#CA9230`
- `#FF5310`
### Contraste y comportamiento
- `#343433` sobre `#FBFAF9` ofrece contraste suficiente y agradable.
- `#494440` sobre `#FBFAF9` funciona bien para copy largo.
- `#848281` sobre `#FBFAF9` debe reservarse para apoyo secundario.
- `#FFFFFF` sobre `#171717` funciona para CTA principales.
- `#121212` sobre `#F6F4EF` funciona para CTA claros.
- `#008CFF` sobre `#D8ECFC` sirve para detalles breves, no para párrafos extensos.
- `#FF5310` y `#9553F9` deben usarse en focos pequeños, no como fondo de lectura general.
---
## 3. Reglas de Tipografía
```css
--font-heading: "Family", "Onest", system-ui, sans-serif;
--font-body: "LFE Sans", "Plus Jakarta Sans", system-ui, sans-serif;
--font-mono: "IBM Plex Mono", monospace;
```
**Google Fonts para la versión HTML**
```html
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=Onest:wght@400;500;600&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
```
**Nota de sustitución**
- Display original: `Family`
- Display HTML: `Onest`
- Body original: `LFE Sans`
- Body HTML: `Plus Jakarta Sans`
- Mono HTML: `IBM Plex Mono`
### Por qué esta sustitución
- `Family` se percibe como una sans redondeada, amigable y precisa.
- `Onest` mantiene ese comportamiento suave sin caer en una geometría rígida.
- `LFE Sans` es más neutra, funcional y discreta.
- `Plus Jakarta Sans` conserva cercanía y legibilidad sin verse corporativa.
- Se evitó usar `Inter` como fallback automático porque mataría el carácter de Family.
### Escala tipográfica observada
| Token | rem | px | line-height | uso |
|-------|-----|----|-------------|-----|
| `--text-xs` | 0.8125rem | 13px | 18px | metadata y labels pequeños |
| `--text-sm` | 0.875rem | 14px | 20px | body pequeño, links, soporte |
| `--text-md` | 0.9375rem | 15px | 22px | cuerpo base enriquecido |
| `--text-lg` | 1.0625rem | 17px | 26px | cuerpo destacado y CTAs |
| `--text-xl` | 1.1875rem | 19px | 27px | subheads suaves |
| `--text-2xl` | 2.75rem | 44px | 48px | headings secundarios |
| `--text-hero` | 4.25rem | 68px | 74.8px | hero principal |
### Pesos tipográficos
```css
--font-regular: 400;
--font-medium: 500;
--font-semibold: 600;
--font-bold: 700;
```
### Letter spacing
```css
--tracking-display: -1.36px;
--tracking-display-alt: -1.35px;
--tracking-body: -0.13px;
--tracking-ui: -0.22px;
--tracking-small: -0.09px;
```
### Regla clave
La tipografía de Family debe sentirse amable y muy legible. Nunca severa, nunca áspera. Si los titulares se vuelven demasiado duros o si el cuerpo se siente demasiado técnico, la marca pierde su tono humano.
---
## 4. Estilos de Componentes
### Botones
**Primario oscuro observado**
```css
background: #171717;
color: #FFFFFF;
border-radius: 32px;
padding-inline: 14px;
height: 32px;
font-size: 15px;
font-weight: 500;
letter-spacing: -0.44px;
transition: background-color 100ms ease;
:hover {
background: #2A2A2A; /* derivado para completar el sistema */
}
:active {
background: #121212;
}
:focus-visible {
outline: 2px solid #848281;
}
:disabled {
opacity: 0.45;
cursor: not-allowed;
}
```
**Secundario claro observado**
```css
background: #F6F4EF;
color: #121212;
border-radius: 32px;
padding-inline: 14px;
height: 32px;
font-size: 15px;
font-weight: 500;
:hover {
background: #EAE6DD;
}
:active {
background: #E0D9CF; /* derivado para completar el sistema */
}
```
**Link / text action**
```css
color: #1A88F8;
font-size: 15px;
line-height: 22px;
position: relative;
:after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 2px;
border-radius: 2px;
background: currentColor;
opacity: 0.1;
}
:hover:after {
opacity: 0.3;
}
```
### Inputs
> Inputs específicos del producto en landing: (no detectado con receta completa)
Derivación recomendada a partir del sistema:
```css
background: #FFFFFF;
color: #343433;
border: 1px solid #EAEAEA;
border-radius: 16px;
padding: 12px 14px;
font-size: 15px;
line-height: 22px;
:hover {
border-color: #B2A79A;
}
:focus {
border-color: #3784F4;
box-shadow: 0 0 0 3px rgba(55,132,244,.12);
}
::placeholder {
color: #848281;
}
```
### Cards
**Dropdown / floating menu observado**
```css
background: #FFFFFF;
border-radius: 8px;
padding: 4px;
box-shadow: 0 3px 16px rgba(0,0,0,0.10);
width: 316px;
```
**Wallet card derivada desde UI observada**
```css
background: #343433;
color: #FFFFFF;
border-radius: 24px;
padding: 20px;
box-shadow: 0 18px 40px -28px rgba(52,52,51,.32);
```
**Media card / rounded image**
```css
border-radius: 40px;
overflow: hidden;
transition: transform 220ms cubic-bezier(0.19, 1, 0.22, 1);
:hover img {
transform: scale(1.02);
}
```
### Badges / Chips
```css
background: #D8ECFC;
color: #008CFF;
border-radius: 999px;
padding: 5px 10px;
font-size: 10px;
font-family: "IBM Plex Mono", monospace;
letter-spacing: 0.08em;
text-transform: uppercase;
```
### Alertas / Toasts
> Alertas visibles con receta real: (no detectado)
Sistema derivado sugerido:
```css
padding: 14px 16px;
border-radius: 16px;
background: #FFFFFF;
border: 1px solid #EAEAEA;
.success {
border-left: 3px solid #44C67F;
}
.warning {
border-left: 3px solid #FFBE4C;
}
.error {
border-left: 3px solid #FF5310;
}
```
### Navegación / Header
```css
background: transparent;
color: #474645;
link font-size: 15px;
link font-weight: 500;
link border-radius: 6px;
link padding: 11px 10px;
:hover {
background: var(--beige);
color: var(--heading);
}
```
---
## 5. Principios de Layout
### Escala de espaciado
```css
--space-1: 4px;
--space-2: 8px;
--space-3: 10px;
--space-4: 12px;
--space-5: 14px;
--space-6: 16px;
--space-7: 20px;
--space-8: 24px;
--space-9: 32px;
--space-10: 40px;
--space-11: 48px;
--space-12: 64px;
--space-14: 80px;
```
### Contenedores
```css
--container-max: 1180px;
--dropdown-width: 316px;
--mobile-break: 420px;
```
### Grid
- La página usa grandes bandas verticales bien espaciadas.
- El hero respira mucho.
- Los bloques de producto alternan imagen y copy.
- La narrativa visual se apoya en ritmo, no en densidad.
- Los FAQ y listados se sienten abiertos, no comprimidos.
### Filosofía de espaciado
Family necesita aire para parecer amigable. Si se apretara como un dashboard o una landing de growth tradicional, la voz visual se rompería. Cada módulo debe tener suficiente colchón para convivir con color, personajes e interfaces pequeñas sin generar estrés.
Reglas de composición:
- deja que cada bloque tenga su propia respiración
- usa blancos y beiges como superficie funcional, no como vacío pasivo
- separa bien texto e imagen
- no llenes el ancho total con demasiadas piezas al mismo tiempo
- permite que la ilustración conviva sin estorbar la lectura
---
## 6. Profundidad y Elevación
Family no depende de profundidad pesada. La marca se apoya mucho más en color, rounding y contraste claro-oscuro entre canvas y producto. Cuando aparece elevación, es suave y contenida.
### Sistema de sombras
```css
--shadow-none: none;
--shadow-xs: 0 0 0 1px rgba(0,0,0,0.04);
--shadow-sm: 0 4px 12px rgba(0,0,0,0.04);
--shadow-md: 0 3px 16px rgba(0,0,0,0.10);
--shadow-lg: 0 18px 40px -28px rgba(52,52,51,0.32);
```
### Niveles de elevación
| Nivel | Token | Uso |
|------|-------|-----|
| 0 | `--shadow-none` | canvas, secciones generales |
| 1 | `--shadow-xs` | pequeños contenedores y superficies flotantes |
| 2 | `--shadow-md` | dropdowns y menús |
| 3 | `--shadow-lg` | wallet cards destacadas |
### Radios de borde
```css
--radius-xs: 6px;
--radius-sm: 8px;
--radius-md: 16px;
--radius-lg: 24px;
--radius-xl: 32px;
--radius-image: 40px;
--radius-pill: 999px;
```
### Principio de shape
- Los radios son esenciales para el tono emocional.
- Los pills se usan para CTA y chips.
- Las imágenes hero usan radios muy generosos.
- Las cards de contenido usan radios medios.
- Evita ángulos duros.
- Evita mezclar muchas familias de radio sin lógica.
---
## 7. Lo que Sí y lo que No
### Sí hacer
1. **Sí usar marfiles y grises cálidos**. El canvas debe sentirse amable, no clínico.
2. **Sí permitir que los colores brillantes aparezcan como chispas**. Azul, verde, naranja y púrpura funcionan mejor como puntos de energía.
3. **Sí conservar radios generosos**. La geometría suave es parte de la personalidad central.
4. **Sí contrastar con producto oscuro cuando haga falta**. Las wallet UIs negras anclan la credibilidad del sistema.
5. **Sí mantener titulares grandes y amigables**. El headline debe sentirse seguro, no agresivo.
6. **Sí tratar la interfaz como algo tocable**. Todo debe parecer cómodo y accesible.
### No hacer
1. **No transformar la marca en una SaaS azul genérica**. El sistema necesita variedad cromática y calidez.
2. **No usar blancos fríos y negros duros como base total**. Eso rompería el tono humano de Family.
3. **No exagerar sombras ni glassmorphism**. La identidad aquí depende más del shape que del FX.
4. **No volverlo demasiado infantil**. Los personajes son simpáticos, pero el producto sigue siendo una wallet real.
5. **No densificar demasiado las secciones**. La ligereza espacial es parte del valor percibido.
6. **No dejar que el producto desaparezca detrás de la ilustración**. La parte útil debe seguir siendo creíble.
---
## 8. Comportamiento Responsive
### Breakpoints observados
```css
@media (max-width: 420px) { ... }
```
### Breakpoints derivados para sistema completo
```css
@media (max-width: 420px) { ... }
@media (min-width: 421px) and (max-width: 768px) { ... } /* derivado para completar el sistema */
@media (min-width: 769px) and (max-width: 1024px) { ... } /* derivado para completar el sistema */
@media (min-width: 1025px) { ... } /* derivado para completar el sistema */
```
### Cambios por breakpoint
**Mobile**
- H1 baja a 32px
- line-height baja a 35px
- ciertos spans del hero dejan de apilarse
- módulos complejos se simplifican
- CTAs mantienen tactilidad alta
**Tablet**
- Se preserva la narrativa vertical
- imágenes y copy pueden alternarse 1/1
- chips y CTA siguen claros
**Desktop**
- El hero recupera toda su escala
- las rondas y respiración se vuelven parte del encanto
- los bloques de producto pueden dialogar con más amplitud
### Touch targets
- CTA principal: 32px observados
- Recomendación de producción mobile: 44px mínimos (derivado para completar el sistema)
- Menú pequeño: 32px detectado
- Dropdown items: padding de 10px observado
### Filosofía responsive
La marca debe seguir sintiéndose abierta y amable en pantalla pequeña. No basta con “encoger” la desktop. El comportamiento responsive debe priorizar la relación entre copy breve, interfaces claras y bloques coloridos sin convertir todo en una lista infinita sin ritmo.
---
## 9. Guía de Prompts para Agentes
### Prompt de inicialización de sesión
```text
Trabaja con el sistema visual de Family.
MODO: claro.
CANVAS: marfil y blanco suave.
PALETA: azul #3784F4, verde #44C67F, naranja #FF5310, púrpura #9553F9.
TIPOGRAFÍA: display suave y redondeada, body limpia y funcional.
PRINCIPIO: hacer que crypto se sienta cercano, comprensible y amable sin perder credibilidad.
```
### Prompt: crear nueva pantalla
```text
Crea una nueva pantalla inspirada en Family.
Debe:
- sentirse ligera y humana
- usar fondos cálidos y neutrales
- aplicar radios generosos
- introducir color vivo en pequeños focos
- mantener una interfaz wallet clara y confiable
```
### Prompt: añadir componente al UI kit
```text
Añade un componente al sistema de Family.
Requisitos:
- respeta la familia de radios suaves
- mantén copy breve y legible
- usa los acentos brillantes con moderación
- entrega estados default, hover, active, focus y disabled
```
### Prompt: revisión de consistencia
```text
Revisa esta interfaz y detecta si rompe el sistema de Family.
Verifica:
1. si el canvas sigue siendo cálido
2. si el color está bien distribuido
3. si la interfaz sigue sintiéndose accesible
4. si el producto conserva credibilidad
5. si la simpatía visual no se volvió infantil
```
### Prompt: variante de campaña
```text
Genera una variante para Family manteniendo la base del sistema.
Conserva:
- marfil como canvas
- titulares suaves
- producto wallet claro y usable
- variedad cromática amable
Puedes variar:
- protagonista de color entre azul, verde, naranja o púrpura
- composición de personajes e ilustración
- nivel de presencia de los módulos oscuros
```
---
## 10. Movimiento (Motion)
La identidad de Family no depende de animación sofisticada visible. Lo observable en la captura y el CSS apunta a transiciones suaves, rápidas y discretas, especialmente en imágenes, enlaces y estados de hover.
### Nivel de motion
- bajo a medio
- discreto
- táctil
- casi siempre microinteractivo
### Duraciones observadas
- `220ms` para transform de imágenes con `cubic-bezier(0.19,1,0.22,1)`
- `200ms` para hover/focus de algunos links
- `100ms` para background-color en CTA observados
- `1200ms` para skeleton shimmer observado en loaders
- `120s` para hr dashed animado
### Easings observadas
- `cubic-bezier(0.19, 1, 0.22, 1)`
- `ease`
- `linear`
### Propiedades animadas
- `transform`
- `background-color`
- `opacity`
- `background-position`
### Tokens de motion útiles
```css
--duration-fast: 100ms;
--duration-base: 200ms;
--duration-image: 220ms;
--duration-skeleton: 1200ms;
--duration-ornamental: 120s;
--ease-family: cubic-bezier(0.19, 1, 0.22, 1);
--ease-linear: linear;
```
### Patrones de motion
- imágenes con zoom ligero al hover
- subrayado tenue en links
- pills con cambio de fondo rápido
- skeleton loading suave
- dashed hr decorativo en desplazamiento muy lento
### Accesibilidad de motion
Aunque el sitio no expone una política explícita de `prefers-reduced-motion` en el fragmento verificado, cualquier extensión del sistema debería:
- desactivar zoom en imágenes si el usuario lo prefiere
- pausar animaciones ornamentales largas
- mantener solo cambios de color y opacidad
---
## Anexo: Stack técnico detectado
- Plataforma: Next.js
- CSS: gran parte inline y/o compilado en el HTML
- Tipografías detectadas:
- `Family-Regular`, `Family-Medium`, `Family-SemiBold`
- `LFESans-Regular`, `LFESans-Medium`, `LFESans-SemiBold`, `LFESans-Bold`
- Tracking y escalas tipográficas explícitas en CSS: sí
- Variables de color explícitas en `:root`: sí
- Modo base del sitio: claro
- Theme-color meta: blanco
- Runtime verificado: con errores 503/500 y errores minificados de React durante inspección
- Hero capturado: sí
- Componentes visibles de wallet y CTA: sí
- WebGL / Three.js: (no detectado)
- Glassmorphism: no dominante
- Dominant color for gallery: `#3784F4`
- Sections for gallery: `Diseño Juguetón`, `Colores Vibrantes`, `Moderno`
### Resumen ejecutivo
- Family suaviza el lenguaje de una wallet crypto.
- Lo hace con claridad, color y geometría amable.
- El sistema vive mejor en fondo claro que en ambiente oscuro.
- Los acentos brillantes son clave, pero la base cálida sostiene el equilibrio.
- La UI se siente tocable y cercana.
- El producto oscuro dentro del canvas claro ayuda a preservar confianza.