e80f4030cb
Align the campaign desk with quieter KPI strips, queues-first dashboard, shared shells, and advanced filters; capture Impeccable design context and the remaining simplify/critique debts on the roadmap.
382 lines
15 KiB
JSON
382 lines
15 KiB
JSON
{
|
||
"schemaVersion": 2,
|
||
"generatedAt": "2026-07-19T10:03:00.000Z",
|
||
"title": "Design System: Teqo",
|
||
"extensions": {
|
||
"colorMeta": {
|
||
"primary": {
|
||
"role": "primary",
|
||
"displayName": "Mandate Red",
|
||
"canonical": "#c51414",
|
||
"tonalRamp": [
|
||
"#4a0808",
|
||
"#7a0c0c",
|
||
"#a01010",
|
||
"#c51414",
|
||
"#d64545",
|
||
"#e57a7a",
|
||
"#f2b0b0",
|
||
"#fce8e8"
|
||
]
|
||
},
|
||
"brand-header": {
|
||
"role": "primary",
|
||
"displayName": "Header Crimson",
|
||
"canonical": "#ae1603",
|
||
"tonalRamp": [
|
||
"#3d0801",
|
||
"#6b0e02",
|
||
"#8c1202",
|
||
"#ae1603",
|
||
"#c84a3a",
|
||
"#e08a7a",
|
||
"#f0c4bc",
|
||
"#fbecea"
|
||
]
|
||
},
|
||
"background": {
|
||
"role": "neutral",
|
||
"displayName": "Desk White",
|
||
"canonical": "#ffffff",
|
||
"tonalRamp": [
|
||
"#1c1917",
|
||
"#44403c",
|
||
"#78716c",
|
||
"#a8a29e",
|
||
"#d6d3d1",
|
||
"#e7e5e4",
|
||
"#f5f5f4",
|
||
"#ffffff"
|
||
]
|
||
},
|
||
"foreground": {
|
||
"role": "neutral",
|
||
"displayName": "Ink Stone",
|
||
"canonical": "#1c1917",
|
||
"tonalRamp": [
|
||
"#0c0a09",
|
||
"#1c1917",
|
||
"#292524",
|
||
"#44403c",
|
||
"#78716c",
|
||
"#a8a29e",
|
||
"#d6d3d1",
|
||
"#f5f5f4"
|
||
]
|
||
},
|
||
"muted": {
|
||
"role": "neutral",
|
||
"displayName": "Quiet Wash",
|
||
"canonical": "#f4f4f5",
|
||
"tonalRamp": [
|
||
"#27272a",
|
||
"#3f3f46",
|
||
"#71717a",
|
||
"#a1a1aa",
|
||
"#d4d4d8",
|
||
"#e4e4e7",
|
||
"#f4f4f5",
|
||
"#fafafa"
|
||
]
|
||
},
|
||
"muted-foreground": {
|
||
"role": "neutral",
|
||
"displayName": "Quiet Ink",
|
||
"canonical": "#6b7280",
|
||
"tonalRamp": [
|
||
"#1f2937",
|
||
"#374151",
|
||
"#4b5563",
|
||
"#6b7280",
|
||
"#9ca3af",
|
||
"#d1d5db",
|
||
"#e5e7eb",
|
||
"#f3f4f6"
|
||
]
|
||
},
|
||
"secondary": {
|
||
"role": "secondary",
|
||
"displayName": "Stone Wash",
|
||
"canonical": "#f5f5f4",
|
||
"tonalRamp": [
|
||
"#1c1917",
|
||
"#292524",
|
||
"#57534e",
|
||
"#a8a29e",
|
||
"#d6d3d1",
|
||
"#e7e5e4",
|
||
"#f5f5f4",
|
||
"#fafaf9"
|
||
]
|
||
},
|
||
"destructive": {
|
||
"role": "primary",
|
||
"displayName": "Alert Crimson",
|
||
"canonical": "#b42318",
|
||
"tonalRamp": [
|
||
"#4a0f0c",
|
||
"#7a1710",
|
||
"#9a1e15",
|
||
"#b42318",
|
||
"#d45a52",
|
||
"#e89a94",
|
||
"#f5d0cd",
|
||
"#fceceb"
|
||
]
|
||
},
|
||
"sidebar": {
|
||
"role": "neutral",
|
||
"displayName": "Rail Mist",
|
||
"canonical": "#fafaf9",
|
||
"tonalRamp": [
|
||
"#1c1917",
|
||
"#44403c",
|
||
"#78716c",
|
||
"#a8a29e",
|
||
"#d6d3d1",
|
||
"#e7e5e4",
|
||
"#f5f5f4",
|
||
"#fafaf9"
|
||
]
|
||
},
|
||
"scope": {
|
||
"role": "tertiary",
|
||
"displayName": "Territory Peach",
|
||
"canonical": "#fff5ed",
|
||
"tonalRamp": [
|
||
"#3b180c",
|
||
"#6b2d15",
|
||
"#9a5230",
|
||
"#c48a68",
|
||
"#e8c5ae",
|
||
"#f5ddcc",
|
||
"#fff5ed",
|
||
"#fffaf6"
|
||
]
|
||
},
|
||
"support-engaged": {
|
||
"role": "secondary",
|
||
"displayName": "Engaged Green",
|
||
"canonical": "#dcfce7",
|
||
"tonalRamp": [
|
||
"#052e16",
|
||
"#166534",
|
||
"#15803d",
|
||
"#4ade80",
|
||
"#86efac",
|
||
"#bbf7d0",
|
||
"#dcfce7",
|
||
"#f0fdf4"
|
||
]
|
||
},
|
||
"estimate-pending": {
|
||
"role": "secondary",
|
||
"displayName": "Pending Amber",
|
||
"canonical": "#fef3c7",
|
||
"tonalRamp": [
|
||
"#451a03",
|
||
"#92400e",
|
||
"#b45309",
|
||
"#f59e0b",
|
||
"#fcd34d",
|
||
"#fde68a",
|
||
"#fef3c7",
|
||
"#fffbeb"
|
||
]
|
||
},
|
||
"petition-cta": {
|
||
"role": "tertiary",
|
||
"displayName": "Petition Gold",
|
||
"canonical": "#ffcf2e",
|
||
"tonalRamp": [
|
||
"#332300",
|
||
"#664600",
|
||
"#997000",
|
||
"#cc9a00",
|
||
"#ffcf2e",
|
||
"#ffdb66",
|
||
"#ffe9a3",
|
||
"#fff6d6"
|
||
]
|
||
}
|
||
},
|
||
"typographyMeta": {
|
||
"headline": {
|
||
"displayName": "Headline",
|
||
"purpose": "Campaign page and section titles; left-aligned, fixed rem."
|
||
},
|
||
"title": {
|
||
"displayName": "Title",
|
||
"purpose": "Card and dialog titles."
|
||
},
|
||
"body": {
|
||
"displayName": "Body",
|
||
"purpose": "Default UI copy at text-sm."
|
||
},
|
||
"label": {
|
||
"displayName": "Label",
|
||
"purpose": "Badges, meta, compact controls."
|
||
}
|
||
},
|
||
"shadows": [
|
||
{
|
||
"name": "flat-desk",
|
||
"value": "none",
|
||
"purpose": "Default resting state for lists, forms, and most cards."
|
||
},
|
||
{
|
||
"name": "hairline-ring",
|
||
"value": "0 0 0 1px rgb(28 25 23 / 10%)",
|
||
"purpose": "Card separation without drop shadow (ring-1 ring-foreground/10)."
|
||
},
|
||
{
|
||
"name": "priority-lift",
|
||
"value": "0 4px 24px rgb(28 25 23 / 8%)",
|
||
"purpose": "Soft ambient lift for overview/insight panels only."
|
||
},
|
||
{
|
||
"name": "overlay",
|
||
"value": "0 16px 48px rgb(28 25 23 / 16%)",
|
||
"purpose": "Dialogs, sheets, drawers, popovers."
|
||
}
|
||
],
|
||
"motion": [
|
||
{
|
||
"name": "ease-state",
|
||
"value": "cubic-bezier(0.16, 1, 0.3, 1)",
|
||
"purpose": "State transitions 150–250ms; ease-out expo family."
|
||
},
|
||
{
|
||
"name": "duration-fast",
|
||
"value": "150ms",
|
||
"purpose": "Hover, focus, press feedback."
|
||
},
|
||
{
|
||
"name": "duration-standard",
|
||
"value": "200ms",
|
||
"purpose": "Default UI state changes."
|
||
}
|
||
],
|
||
"breakpoints": [
|
||
{ "name": "2xs", "value": "23.75rem" },
|
||
{ "name": "xs", "value": "26.25rem" },
|
||
{ "name": "sm", "value": "40rem" },
|
||
{ "name": "md", "value": "48rem" },
|
||
{ "name": "lg", "value": "64rem" }
|
||
]
|
||
},
|
||
"components": [
|
||
{
|
||
"name": "Primary Button",
|
||
"kind": "button",
|
||
"refersTo": "button-primary",
|
||
"description": "Mandate Red CTA — the one clear next action on a region.",
|
||
"html": "<button class=\"ds-btn-primary\" type=\"button\">Salvar</button>",
|
||
"css": ".ds-btn-primary { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; border: none; border-radius: 8px; background: #c51414; color: #ffffff; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 150ms cubic-bezier(0.16, 1, 0.3, 1), transform 150ms cubic-bezier(0.16, 1, 0.3, 1); } .ds-btn-primary:hover { background: color-mix(in srgb, #c51414 80%, transparent); } .ds-btn-primary:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, #c51414 50%, transparent); } .ds-btn-primary:active { transform: translateY(1px); }"
|
||
},
|
||
{
|
||
"name": "Secondary Button",
|
||
"kind": "button",
|
||
"refersTo": "button-secondary",
|
||
"description": "Stone wash secondary action.",
|
||
"html": "<button class=\"ds-btn-secondary\" type=\"button\">Cancelar</button>",
|
||
"css": ".ds-btn-secondary { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; border: none; border-radius: 8px; background: #f5f5f4; color: #292524; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 150ms cubic-bezier(0.16, 1, 0.3, 1); } .ds-btn-secondary:hover { background: color-mix(in srgb, #f5f5f4 80%, #1c1917); } .ds-btn-secondary:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, #c51414 50%, transparent); }"
|
||
},
|
||
{
|
||
"name": "Outline Button",
|
||
"kind": "button",
|
||
"refersTo": "button-outline",
|
||
"description": "Bordered quiet action on the desk.",
|
||
"html": "<button class=\"ds-btn-outline\" type=\"button\">Filtrar</button>",
|
||
"css": ".ds-btn-outline { display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 10px; border: 1px solid #e7e5e4; border-radius: 8px; background: #ffffff; color: #1c1917; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: background 150ms cubic-bezier(0.16, 1, 0.3, 1); } .ds-btn-outline:hover { background: #f4f4f5; } .ds-btn-outline:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, #c51414 50%, transparent); }"
|
||
},
|
||
{
|
||
"name": "Campaign Input",
|
||
"kind": "input",
|
||
"refersTo": "input-field",
|
||
"description": "Compact field with visible stone border; campaign radius-md.",
|
||
"html": "<input class=\"ds-input\" type=\"text\" placeholder=\"Buscar núcleo\" />",
|
||
"css": ".ds-input { width: 100%; height: 32px; padding: 0 12px; border: 1px solid #d6d3d1; border-radius: 6px; background: #ffffff; color: #1c1917; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.875rem; outline: none; transition: border-color 150ms, box-shadow 150ms; } .ds-input::placeholder { color: rgb(28 25 23 / 50%); } .ds-input:focus-visible { border-color: #c51414; box-shadow: 0 0 0 3px color-mix(in srgb, #c51414 30%, transparent); } .ds-input:disabled { background: #f5f5f4; color: rgb(28 25 23 / 55%); cursor: not-allowed; }"
|
||
},
|
||
{
|
||
"name": "Status Badge",
|
||
"kind": "chip",
|
||
"refersTo": "badge-status",
|
||
"description": "Pill status chip — engaged / pending / negative via semantic tokens.",
|
||
"html": "<span class=\"ds-badge ds-badge-engaged\">Engajado</span> <span class=\"ds-badge ds-badge-pending\">Pendente</span>",
|
||
"css": ".ds-badge { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: 9999px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; font-size: 0.75rem; font-weight: 500; white-space: nowrap; } .ds-badge-engaged { background: #dcfce7; color: #166534; } .ds-badge-pending { background: #fef3c7; color: #92400e; }"
|
||
},
|
||
{
|
||
"name": "Desk Card",
|
||
"kind": "card",
|
||
"refersTo": "card-surface",
|
||
"description": "Flat card with hairline ring — default container on the field desk.",
|
||
"html": "<div class=\"ds-card\"><div class=\"ds-card-title\">Núcleo Centro</div><p class=\"ds-card-body\">Estimativa confirmada · 3 lideranças</p></div>",
|
||
"css": ".ds-card { display: flex; flex-direction: column; gap: 4px; padding: 16px; border-radius: 12px; background: #ffffff; color: #1c1917; box-shadow: 0 0 0 1px rgb(28 25 23 / 10%); font-family: Inter, ui-sans-serif, system-ui, sans-serif; } .ds-card-title { font-size: 1rem; font-weight: 500; line-height: 1.375; } .ds-card-body { margin: 0; font-size: 0.875rem; color: #6b7280; line-height: 1.5; }"
|
||
},
|
||
{
|
||
"name": "Campaign Mobile Nav",
|
||
"kind": "nav",
|
||
"refersTo": "button-primary",
|
||
"description": "Mobile top bar in Mandate Red with white wordmark.",
|
||
"html": "<header class=\"ds-nav-mobile\"><span class=\"ds-nav-title\">Jorge Solla</span><span class=\"ds-nav-sub\">Campanha</span></header>",
|
||
"css": ".ds-nav-mobile { display: flex; flex-direction: column; justify-content: center; min-height: 56px; padding: 0 16px; background: #c51414; color: #ffffff; font-family: Inter, ui-sans-serif, system-ui, sans-serif; } .ds-nav-title { font-size: 0.875rem; font-weight: 600; } .ds-nav-sub { font-size: 0.75rem; color: rgb(255 255 255 / 80%); }"
|
||
}
|
||
],
|
||
"narrative": {
|
||
"northStar": "The Field Desk",
|
||
"overview": "Teqo’s visual system is a sober ops surface for people organizing under pressure. Design defaults to `/campanha`: stone-white surfaces, Inter, and brand red as a signal (primary actions, selection, status urgency) — never as spectacle or brochure chrome. Staff screens can be information-dense; leadership paths stay phone-first with larger touch targets and obvious next actions.\n\nPublic themes (`editorial`, `petition`, and the home brand-red body) share the same token contract and primary red, but they are surface variants. When inventing new UI, start from the campaign desk unless the task is explicitly a public/marketing page.\n\nThe system rejects generic SaaS dashboards (purple gradients, hero-metric templates, identical card grids, AI-startup chrome) and traditional Brazilian campaign kitsch (clipart flags, shouty all-caps, brochure clutter). Sovereignty and clarity beat decoration.",
|
||
"keyCharacteristics": [
|
||
"Product register: familiar shadcn affordances, earned consistency over surprise",
|
||
"Restrained color strategy: neutrals dominate; primary red ≤ ~10% of any screen",
|
||
"Hybrid elevation: flat lists/forms; light lift only for priority or overlay surfaces",
|
||
"Confident and compact controls — denser desktop, phone-first leadership paths",
|
||
"Semantic status colors (support / estimate / cadence) carry meaning, not fashion"
|
||
],
|
||
"rules": [
|
||
{
|
||
"name": "The Signal Red Rule",
|
||
"body": "Mandate Red is for primary action, focus, and urgency. It must not wash backgrounds, decorate cards, or paint inactive chrome.",
|
||
"section": "colors"
|
||
},
|
||
{
|
||
"name": "The Theme Contract Rule",
|
||
"body": "New surfaces reuse the shadcn token names (`primary`, `muted`, `field-*`, etc.). Do not introduce one-off hex outside a `data-theme` block.",
|
||
"section": "colors"
|
||
},
|
||
{
|
||
"name": "The One Family Rule",
|
||
"body": "Inter everywhere in product UI. No decorative display faces in buttons, labels, or data.",
|
||
"section": "typography"
|
||
},
|
||
{
|
||
"name": "The Fixed Scale Rule",
|
||
"body": "Prefer rem/Tailwind steps over fluid clamp() headings inside the campaign shell.",
|
||
"section": "typography"
|
||
},
|
||
{
|
||
"name": "The Flat-By-Default Rule",
|
||
"body": "Surfaces are flat at rest. Lift appears for priority or overlay — never as default card decoration across a grid.",
|
||
"section": "elevation"
|
||
}
|
||
],
|
||
"dos": [
|
||
"Do treat `/campanha` as the design default: stone desk, Inter, Signal Red for the next action.",
|
||
"Do keep primary red rare — one clear CTA per region beats a sea of red buttons.",
|
||
"Do use semantic Badge tokens for support/estimate/cadence state.",
|
||
"Do keep leadership paths phone-first: obvious actions, larger taps, plain language.",
|
||
"Do meet WCAG 2.2 AA (contrast, keyboard, focus rings, prefers-reduced-motion).",
|
||
"Do reuse shadcn primitives (Button, Input, Badge, Card, dialogs/sheets) for consistency."
|
||
],
|
||
"donts": [
|
||
"Don't ship generic SaaS dashboards — purple gradients, hero-metric templates, identical card grids, AI-startup chrome.",
|
||
"Don't ship traditional Brazilian campaign kitsch — clipart flags, shouty all-caps, brochure clutter.",
|
||
"Don't use side-stripe borders (border-left/border-right > 1px) as accent decoration.",
|
||
"Don't use gradient text or glassmorphism as default chrome.",
|
||
"Don't put tiny uppercase tracked eyebrows above every section.",
|
||
"Don't use Petition Gold or home body gradients inside the campaign desk.",
|
||
"Don't invent display fonts for UI labels, buttons, or data.",
|
||
"Don't lift every card; flat is the desk's resting state."
|
||
]
|
||
}
|
||
}
|