labre-web/.impeccable/design.json

{
  "schemaVersion": 2,
  "generatedAt": "2026-08-17T00:00:00.000Z",
  "title": "Design System: LabPréstamos",
  "extensions": {
    "colorMeta": {
      "cream": { "role": "neutral", "displayName": "Cream Paper", "canonical": "#f4efea" },
      "frost": { "role": "neutral", "displayName": "Frost White", "canonical": "#ffffff" },
      "chalk": { "role": "neutral", "displayName": "Chalk Gray", "canonical": "#f8f8f7" },
      "ink": { "role": "neutral", "displayName": "Charcoal Ink", "canonical": "#383838" },
      "pencil": { "role": "neutral", "displayName": "Pencil Gray", "canonical": "#a1a1a1" },
      "primary": { "role": "primary", "displayName": "Verde Institucional", "canonical": "#00723F" },
      "secondary": { "role": "secondary", "displayName": "Dorado UABC", "canonical": "#DD971A" },
      "danger": { "role": "danger", "displayName": "Coral Sketch (fill)", "canonical": "#f38e84" },
      "danger-text": { "role": "danger", "displayName": "Coral Sketch (text, AA-darkened)", "canonical": "#a83224" },
      "positive": { "role": "success", "displayName": "Mint Sketch", "canonical": "#38c1b0" }
    },
    "typographyMeta": {
      "body": { "displayName": "Body / Mono", "purpose": "Universal voice — every role through weight, size, and case." },
      "label": { "displayName": "Label", "purpose": "Uppercase structural labels: nav, buttons, form labels, headers." }
    },
    "shadows": [
      { "name": "hard", "value": "-6px 6px 0 0 #383838", "purpose": "The system's only shadow — every raised element at rest." },
      { "name": "hard-sm", "value": "-3px 3px 0 0 #383838", "purpose": "Active/pressed state of a raised element (halfway press)." }
    ],
    "motion": [
      { "name": "press", "value": "transform: translate(-6px, 6px); transition: transform 100ms ease-out;", "purpose": "Hover/focus on any raised element — presses into its own shadow." }
    ],
    "breakpoints": [
      { "name": "md", "value": "768px" }
    ]
  },
  "components": [
    {
      "name": "Primary Button",
      "kind": "button",
      "refersTo": "button-primary",
      "description": "The system's default call to action. Verde Institucional is dark, so this is the one fill that takes white text.",
      "html": "<button class=\"ds-btn ds-btn-primary\">Solicitar</button>",
      "css": ".ds-btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border-radius:2px; border:2px solid #383838; font-family:'JetBrains Mono Variable',monospace; letter-spacing:0.02em; font-weight:500; box-shadow:-6px 6px 0 0 #383838; transition:transform 100ms ease-out; } .ds-btn:hover, .ds-btn:focus-visible { transform:translate(-6px,6px); box-shadow:0 0 0 0 transparent; } .ds-btn-primary { background:#00723F; color:#ffffff; }"
    },
    {
      "name": "Secondary Button",
      "kind": "button",
      "refersTo": "button-secondary",
      "description": "Dorado UABC fill, charcoal text (light enough to clear AA with charcoal, unlike white-on-gold).",
      "html": "<button class=\"ds-btn ds-btn-secondary\">Exportar CSV</button>",
      "css": ".ds-btn-secondary { background:#DD971A; color:#383838; }"
    },
    {
      "name": "Ghost Button",
      "kind": "button",
      "refersTo": "button-ghost",
      "description": "Low-commitment counterpart — Cancelar/Limpiar.",
      "html": "<button class=\"ds-btn-ghost\">Cancelar</button>",
      "css": ".ds-btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:44px; padding:10px 16px; border-radius:2px; border:2px solid rgba(56,56,56,0.35); background:transparent; color:#383838; font-family:'JetBrains Mono Variable',monospace; letter-spacing:0.02em; font-weight:500; } .ds-btn-ghost:hover { background:#f8f8f7; border-color:#383838; }"
    },
    {
      "name": "Raised Card",
      "kind": "card",
      "refersTo": "card",
      "description": "Discrete, singular, actionable surface — login card, dashboard tile, KPI tile.",
      "html": "<a class=\"ds-card-raised\" href=\"#\"><h2>Catálogo</h2><p>Ver material disponible.</p></a>",
      "css": ".ds-card-raised { display:block; background:#ffffff; border:2px solid #383838; border-radius:2px; padding:24px; box-shadow:-6px 6px 0 0 #383838; transition:transform 100ms ease-out; } .ds-card-raised:hover, .ds-card-raised:focus-visible { transform:translate(-6px,6px); box-shadow:0 0 0 0 transparent; } .ds-card-raised h2 { font-family:'JetBrains Mono Variable',monospace; text-transform:uppercase; letter-spacing:0.02em; font-size:1.125rem; margin:0 0 4px; color:#383838; } .ds-card-raised p { color:#a1a1a1; font-family:'JetBrains Mono Variable',monospace; font-size:0.875rem; margin:0; }"
    },
    {
      "name": "Flat Card / Table Wrapper",
      "kind": "card",
      "refersTo": "card",
      "description": "Dense, repeated content — tables, list rows. Bordered, no shadow.",
      "html": "<div class=\"ds-card-flat\">Fila de tabla o lista</div>",
      "css": ".ds-card-flat { background:#ffffff; border:1.5px solid #383838; border-radius:2px; padding:24px; font-family:'JetBrains Mono Variable',monospace; color:#383838; }"
    },
    {
      "name": "Text Input",
      "kind": "input",
      "refersTo": "input",
      "description": "Flat, bordered, no shadow, no glow focus.",
      "html": "<input class=\"ds-input\" type=\"text\" placeholder=\"Nombre o Nº inventario…\" />",
      "css": ".ds-input { width:100%; min-height:44px; padding:10px 12px; border-radius:2px; border:2px solid #383838; background:#ffffff; font-family:'JetBrains Mono Variable',monospace; color:#383838; } .ds-input:focus { outline:none; border-color:#00723F; }"
    },
    {
      "name": "Status Badge",
      "kind": "chip",
      "refersTo": "badge",
      "description": "Tinted fill, semantic-color border, charcoal text (tints are always light enough for it).",
      "html": "<span class=\"ds-badge ds-badge-positive\">Disponible</span>",
      "css": ".ds-badge { display:inline-flex; align-items:center; border-radius:2px; padding:2px 8px; font-family:'JetBrains Mono Variable',monospace; font-size:0.75rem; font-weight:600; text-transform:uppercase; letter-spacing:0.03em; color:#383838; } .ds-badge-positive { background:color-mix(in oklab, #38c1b0 18%, white); border:1.5px solid #38c1b0; } .ds-badge-danger { background:color-mix(in oklab, #f38e84 18%, white); border:1.5px solid #f38e84; }"
    },
    {
      "name": "Nav Item (desktop sidebar)",
      "kind": "nav",
      "refersTo": "nav-item",
      "description": "Uppercase mono label; active = solid Verde Institucional chip with white text and charcoal border.",
      "html": "<a class=\"ds-nav-item ds-nav-item-active\" href=\"#\">Catálogo</a>",
      "css": ".ds-nav-item { display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:2px; border:2px solid transparent; font-family:'JetBrains Mono Variable',monospace; text-transform:uppercase; letter-spacing:0.02em; font-size:0.875rem; color:#383838; } .ds-nav-item-active { background:#00723F; color:#ffffff; border-color:#383838; } .ds-nav-item:not(.ds-nav-item-active):hover { background:#f8f8f7; }"
    }
  ],
  "narrative": {
    "northStar": "The Equipment Tag on a Terminal Readout",
    "overview": "LabPréstamos runs the mechanics of a fully pinned external brief (MotherDuck's crayon-terminal-on-cream neobrutalism) — cream canvas, monospace type, hard 2px corners, a flat charcoal-offset shadow that never blurs — while carrying UABC's own institutional green and gold as its identity colors instead of the source brief's blue and orange. The first pass used the source's literal palette wholesale; that was corrected once the user flagged it — adopting a design language is not the same as adopting someone else's brand colors, and UABC's green/gold predate this redesign and outrank it. Depth is binary: an element either sits flat on the page or is a discrete raised object that presses into its own shadow on hover. Because Verde Institucional is dark and saturated (unlike the source brief's light blue), it is the one fill in the system that takes white text rather than charcoal — every other fill (Dorado, the status tints, the danger fill) stays with charcoal text because that's what actually clears AA contrast.",
    "keyCharacteristics": [
      "Cream page canvas, white card surfaces, charcoal (never pure black) as the universal line and border color",
      "Every corner is 2px — no pills, no circles, no rounded-full anywhere",
      "One shadow, one behavior: -6px 6px 0 0 charcoal, hard-edged, flattens into the element on hover/focus",
      "JetBrains Mono Variable everywhere, 0.02em tracking, uppercase on structural labels only",
      "UABC Verde Institucional carries every filled action (white text); Dorado UABC carries the secondary action and a handful of accents (charcoal text)",
      "Dense, repeated surfaces stay flat and bordered; only discrete, single-instance elements carry the shadow"
    ],
    "rules": [
      { "name": "The Text-on-Fill Rule", "body": "Text/icon color on any filled surface is whichever of Charcoal Ink or white actually clears AA contrast against that fill — never a blanket choice. White on Verde Institucional (dark); Charcoal Ink everywhere else.", "section": "colors" },
      { "name": "The One Shadow Rule", "body": "-6px 6px 0 0 var(--color-ink) is the only shadow value in the system. It never blurs, never softens, never gets a second 'subtle' variant.", "section": "colors" },
      { "name": "The Tabular Numbers Rule", "body": "Any figure representing a count carries font-variant-numeric: tabular-nums.", "section": "typography" },
      { "name": "The Press Rule", "body": "Every raised element's hover state is the same transform: translate exactly the shadow's own offset, so the shadow disappears under the element. No brightness filter, no color darken.", "section": "elevation" },
      { "name": "The Tinted-Fill-Bordered Rule", "body": "Badge background = the semantic color mixed 18-25% into white; border = the semantic color at full strength; text = Charcoal Ink (tints are always light enough for it).", "section": "components" }
    ],
    "dos": [
      "Do use the exact shadow -6px 6px 0 0 var(--color-ink) for every raised element, and the exact press transform translate(-6px, 6px) on hover/focus.",
      "Do keep every radius at 2px — buttons, cards, inputs, dialogs, badges, chips.",
      "Do check contrast per fill before choosing text color — don't assume charcoal always works.",
      "Do keep Verde Institucional for actionable, filled controls; use Positive/Danger/Secondary for status.",
      "Do keep dense/repeated surfaces flat and bordered; reserve the hard shadow for discrete, singular surfaces.",
      "Do draw every icon as an SVG — never a unicode glyph or emoji.",
      "Do apply font-variant-numeric: tabular-nums to every numeric quantity, stock figure, or date.",
      "Do ship both a table and a card-list rendering for every data-dense admin view."
    ],
    "donts": [
      "Don't use blur, glass, or a soft ambient shadow anywhere.",
      "Don't introduce a radius above 2px, or a pill/circle shape, anywhere.",
      "Don't adopt a borrowed style system's literal brand colors — take its shape/shadow/type mechanics, keep the project's own identity colors in them.",
      "Don't reuse Verde Institucional for status pills.",
      "Don't introduce a second typeface.",
      "Don't stand a unicode glyph in for an icon."
    ]
  }
}