NÁCAR

Sobre el sistema

Creado a partir de

La web Nácar

Componentes

55 en 7 grupos, con todos sus estados

Tipografías

Figtree

Tono

Cada superficie de porcelana del sistema está igualada con una pestaña de la guía clásica de colores. Elige A3, B2 o B1 y la tipografía, los botones de porcelana y cada marca de carilla toman ese tono, la luz que los atraviesa se vuelve más honda o más pálida con él, y cada lectura de tono del sistema se reimprime, hasta la pestaña en la que se detiene el loader.

Formato

HTML, CSS y JavaScript sin dependencias, más DESIGN.md

Versión

1.0

• Umber#140E0A
• Sheet#1B130E
• Cacao#2B1F17
• Smoke#8E8075
• Porcelain#F1E6D8
• Glow#D19A5E
• Flare#FFD9A8
• Error#E8A27A

En contexto

Una página de tratamiento para microcarillas hecha solo con el kit: qué son, las dos visitas, las opciones comparadas, casos de antes y después y una reserva con la guía de colores que completa un resumen mientras respondes. Se incluye como página base, lista para cambiarle el nombre.

En el kit

DESIGN.md

Las reglas para construir con el sistema, escritas para pasárselas a Claude, a Lovable o a un desarrollador

tokens/tokens.json

Cada color, tamaño, espacio y tiempo como tokens con nombre, con las dieciséis pestañas de la guía de colores

tokens/tokens.css

Los mismos tokens como variables CSS, con los tres tonos

css/nacar.css

Todos los componentes y sus estados

js/nacar.js

Tono, la guía de colores, el escenario, el antes y después, las palabras que se encienden, los horarios de apertura, el loader, diálogos y avisos. Sin dependencias

components.html

Cada componente en cada estado, uno al lado del otro

starter/index.html

Una página de tratamiento para microcarillas con un formulario de reserva, hecha solo con el sistema

assets/imagery/

Fotografías a contraluz, de retrato y de atelier a resolución completa

LICENSE.md

Uso comercial en tus proyectos y en los de tus clientes

Construir con una IA

1. Adjunta DESIGN.md

   Añádelo a tu conversación en Claude, Lovable o cualquier herramienta de IA.

2. Describe tu página

   Con tus palabras, tu marca y tu contenido.

3. Quédate con el código o llévalo a otro stack

   Enlaza el CSS de tokens y componentes, o pide React. Las reglas se mantienen igual.

Componentes

Estructura

Frame, Twelve-column grid, Section and sheet, Section head, Panel, Scene, Figures, Ledger, Grain

Acciones

Porcelain button, Line button, Ghost button, Icon button, Call to action, Text link

Entrada

Text field, Field with prefix, Select, Long text, Checkbox, Veneer radio, Switch, Option tiles, Segmented control, Shade guide, Time slots, Range

Datos

Tabs, Row tabs, Index, Comparison table, Ticket, Counter

Indicadores

Shade switch, Tag, Open now, Notice, Steps, Progress, Loader, Next opening, Toast

Contenido

Headline capsule, Card, Portrait, Before and after, Stage, Rooms, Statement, Word wall, Questions

Capas y navegación

Dialog, Navigation bar, Mobile menu, Footer