Los Romeros Limited — Design System & Brand Kit

🎨

Color Palette & Tokens

All colors are defined as CSS custom properties on :root. Never use hard-coded hex values — always reference the token variable.

--bg

#070d1a

Page background — deep navy-black

--surface

#0f1826

Banners, disclaimers, sub-sections

--card

#131f30

Cards, table headers, action panels

--border

rgba(255,255,255,.07)

All card borders & dividers

--gold

#f5c842

Consequences, action numbers, bullets

--red

#ef4444

Critical / HIGH severity / criminal

--orange

#f97316

Major / medium severity / warning

--blue

#3b82f6

Civil law / informational / statute tags

--purple

#8b5cf6

Regulatory / disciplinary categories

--green

#22c55e

Positive / "if no settlement" urgency

--text

#e2e8f0

Primary readable body text

--muted

#94a3b8

Captions, descriptions, meta labels

Copy-paste :root block

:root {
  --bg:#070d1a;  --surface:#0f1826;  --card:#131f30;
  --border:rgba(255,255,255,0.07);  --r:14px;
  --gold:#f5c842;  --green:#22c55e;  --red:#ef4444;
  --orange:#f97316;  --blue:#3b82f6;  --purple:#8b5cf6;
  --text:#e2e8f0;  --muted:#94a3b8;
}

✎

Typography

Outfit handles every heading, number, label, and CTA. Inter handles all body copy and descriptions.

Font import (paste in <head>)

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800;900&display=swap" rel="stylesheet"/>

Hero Heading

Outfit 900
clamp(2.2rem,5.5vw,4rem)
letter-spacing: -0.025em

Outfit, weight:900

Section Heading — Outfit 800

Outfit 800
1.6rem — .sec-head h2

Outfit, weight:800

Card / Violation Title — Outfit 800

Outfit 800
1.2rem — .v-title

Outfit, weight:800

Body copy — Inter Regular 400. Primary readable text across all page content and evidence summaries.

Inter 400
1rem / 16px
line-height: 1.6

Inter, weight:400

Secondary / muted text — card body, table descriptions, legal citations and supporting detail at 0.85–0.9rem.

Inter 400
0.85–0.9rem
color: var(--muted)

Inter, weight:400

LABEL / BADGE / UPPERCASE CATEGORY

Inter 700
0.68–0.78rem
uppercase, letter-spacing:.1em

Inter, weight:700

☰

Component Library

Badge / Eyebrow Pill

⚖ Legal & Regulatory Analysis — Harrison v Wincham

<div class="badge">⚖ Label Text</div>

Verdict Banner — Stats Grid

Alert Box

⚠ Critical Finding — The Short Answer: Yes

What Wincham did was almost certainly professionally negligent under UK law, potentially criminal under consumer protection legislation, and exposed Philip to specific Spanish anti-avoidance laws that Wincham had a professional duty to disclose.

Violation Cards — 4 Variants

Spanish Law — Anti-Avoidance

.violation.spanish — red-to-orange left bar

🔴 Severity: HIGH

Law label: var(--red). Statute: Article 108, Ley 24/1988.

Consequence Section

Gold arrow bullets with highlighted key terms
Semi-transparent background, nested inside card

UK Civil Law — Tort of Negligence

.violation.civil — blue-to-purple left bar

🔴 Severity: HIGH

Law label: var(--blue). Statute: Limitation Act 1980, s.14A.

UK Criminal / Regulatory Law

.violation.criminal — red-to-dark-red left bar

😖 Potentially Criminal

Law label: var(--red). Use for criminal charges & regulatory offences.

Professional Conduct — Disciplinary

.violation.disciplinary — gold-to-orange left bar

🟠 Severity: HIGH

Law label: var(--gold). Use for professional and ethics findings.

Severity Badges & Urgency Pills & Statute Tags

Severity: 🔴 HIGH 🟠 MEDIUM 😖 POTENTIALLY CRIMINAL

Urgency: 🔴 Do This Now 🟠 Within 30 Days 🟢 If No Settlement Reached

Statute tags: Finance Act 2004, Part 7 Limitation Act 1980, s.14A Modelo 210 (IRNR)

Spectrum Data Table

Violation	Type	Severity	Forum	Likely Outcome
“16% saving” negligent misstatement Hedley Byrne; SGSA 1982 s.13	Civil	High	County Court	~£49,392+ damages
Consumer Protection Regs 2008 Regs 5, 6 (civil); Reg 9 (criminal)	Criminal	Potentially Criminal	CMA / Trading Standards	Fine, up to 2 years imprisonment
ICAEW / ACCA ethics breaches Integrity, competence, due care	Disciplinary	High	Professional Conduct Committee	Sanction, suspension, or striking off

Action Cards Grid

🔴 Do This Now

First Action — Gold Number Circle

2-column grid. Gold gradient border on number circle. Outfit 700 heading. Inter 0.82rem body.

🟠 Within 30 Days

Second Action — Orange Urgency

Body text var(--muted). Strong tags use var(--text) for emphasis and contrast.

Disclaimer Box

Important Disclaimer: This document is prepared by an AI advisory system. It does not constitute formal legal advice and cannot substitute for a qualified UK solicitor or licensed Spanish abogado. All analysis must be verified before formal proceedings are initiated.

⚡

How to Use This Design System

📄 Reference in a build prompt

Simply reference the URL in your request to Antigravity. No CSS paste needed.

Build a new landing page using the Los Romeros Limited design system (https://dean349.github.io/los-romeros-design-system/). Page: [YOUR PAGE TITLE] Content: [DESCRIBE WHAT YOU NEED] Components: violation cards, spectrum table, action grid, verdict banner

Name the system: Say “Los Romeros Limited design system” or link this URL. No code paste needed.

Name the components: List which components you want — violation cards, table, action grid, badge, alert box, etc.

Describe your content: Provide the data, text, or legal findings to populate the page. Antigravity maps it to the correct component.

Specify card variant: spanish, civil, criminal, or disciplinary.

Starter HTML Template

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>PAGE TITLE — Los Romeros Limited</title>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;600;700;800;900&display=swap" rel="stylesheet"/>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#070d1a;--surface:#0f1826;--card:#131f30;--border:rgba(255,255,255,0.07);
  --gold:#f5c842;--green:#22c55e;--red:#ef4444;--orange:#f97316;
  --blue:#3b82f6;--purple:#8b5cf6;--muted:#94a3b8;--text:#e2e8f0;--r:14px;
}
html{scroll-behavior:smooth}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.6}
.wrap{max-width:1060px;margin:0 auto;padding:0 24px 80px}
footer{text-align:center;padding:40px 24px;border-top:1px solid var(--border);font-size:.82rem;color:var(--muted)}
@media(max-width:700px){.wrap{padding:0 20px 60px}}
/* Add component CSS here */
</style>
</head>
<body>
<section class="hero"><!-- hero --></section>
<div class="wrap"><!-- sections --></div>
<footer>Los Romeros Limited &middot; [CASE NAME]</footer>
</body>
</html>

Los Romeros Limited — Design System v1.0: This brand kit defines the visual language for all Harrison v Wincham legal case documents. Reference dean349.github.io/los-romeros-design-system in any page build request to ensure consistent, on-brand output across all case landing pages.

Los Romeros Limited Design System & Brand Kit