/* ═══════════════════════════════════════════════════════════════
ShrimpHub Design System — MARKETING surface tokens
──────────────────────────────────────────────────────────────
The product (dashboard) uses colors_and_type.css — neon
magenta-cyan cyberpunk over near-black. The marketing site is
a quieter, more confident surface: cool blue-black ground,
muted steel-blue brand, coral pink accent, neutral white-tinted
glass. Use this file for shrimphub.ai, docs, and any page that
sits outside the dashboard chrome.
Drop in via:
Then write to the tokens below.
To layer marketing onto a page that already loads
colors_and_type.css (rare — only for the docs site at the
moment), wrap the marketing region in
…
and the same tokens take effect locally.
The SHARED brand spine lives in colors_and_type.css already:
– Inter (UI face) – JetBrains Mono (code face)
– 8px radii on buttons/inputs – 4px spacing scale
– Pink #ff5b9c is unified across both surfaces
(product = --accent2, marketing = --accent)
═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');
:root,
[data-surface="marketing"] {
/* ─── Surfaces ─────────────────────────────────────────────
Cool blue-black ground (NOT the pure-black of the product).
Surfaces are white-tinted glass at 3% and 5% — neutral, not
accent-tinted. This is the visual cue that says "marketing,
not product chrome".
───────────────────────────────────────────────────────── */
--page-bg: #0b0d11;
--surface: rgba(255, 255, 255, 0.03);
--surface-strong: rgba(255, 255, 255, 0.05);
--code-bg: #0f1218; /* terminal / code block */
--code-bg-inline: rgba(255, 255, 255, 0.06);
--btn-bg-secondary: #1d2230; /* secondary button fill */
/* ─── Borders ──────────────────────────────────────────────
Neutral white at 8% (idle) and 14% (hover/strong). The
product borders are magenta-tinted; here they are not.
───────────────────────────────────────────────────────── */
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.14);
/* ─── Text (ink scale) ─────────────────────────────────────
Three steps. ink for body+headings, ink-2 for secondary
copy (leads, captions, table values), ink-3 for footers,
timestamps, and faintest hints.
───────────────────────────────────────────────────────── */
--ink: #e8ebf3;
--ink-2: #9aa3b2;
--ink-3: #5a6373;
/* ─── Brand ────────────────────────────────────────────────
`brand` is the muted steel blue used for primary buttons
and the highlighted parts of stat numbers ("14h", "97").
`brand-2` is the darker hover/active variant.
`accent` is the SHARED brand pink — same hex as the
dashboard's --accent2. It owns: the "Hub" half of the
wordmark, eyebrow kickers, danger states, the install pill.
`link` is the lighter steel blue used for inline anchors.
───────────────────────────────────────────────────────── */
--brand: #5a7fbd;
--brand-2: #3b5c95;
--accent: #ff5b9c;
--accent-rgb: 255, 91, 156;
--link: #8aa9d6;
/* ─── Code syntax highlight ─────────────────────────────────
Four-color minimum palette used in the docs site's
blocks. Keep these consistent across every code sample.
───────────────────────────────────────────────────────── */
--code-ink: #9ec8a8; /* default code text */
--code-num: #7ec8e3; /* numerics, booleans */
--code-key: #c5a3ff; /* keywords */
--code-str: #9ec896; /* strings */
--code-com: #5a6373; /* comments */
/* ─── Semantic ────────────────────────────────────────────── */
--info: #5a7fbd;
--success: #4ade80;
--warn: #f0883e;
--danger: #ff5b9c; /* same hex as --accent */
/* ─── Hero gradient ────────────────────────────────────────
White → cool light gray, used on hero H1 lines. This is the
marketing analog of the product's magenta→pink wordmark
gradient — quieter, no color shift, only a luminance drop.
───────────────────────────────────────────────────────── */
--grad-hero: linear-gradient(135deg, #ffffff 0%, #c4cad6 100%);
/* ─── Shadows ──────────────────────────────────────────────
Flat drop shadows only — NO inner highlights, NO colored
glow halos. Glow belongs to the product surface.
───────────────────────────────────────────────────────── */
--shadow-card: 0 4px 24px rgba(0, 0, 0, 0.40);
--shadow-btn: 0 4px 16px rgba(0, 0, 0, 0.40);
--shadow-btn-hover: 0 6px 20px rgba(0, 0, 0, 0.50);
/* ─── Status pulse dot (used on the hero "running" indicator) ── */
--pulse-color: #4ade80;
/* ─── Layout constants ─────────────────────────────────────
The marketing site uses a 1120–1180px container with 32px
gutter, a 58px sticky nav, and ~86px hero top padding.
───────────────────────────────────────────────────────── */
--container-max: 1180px;
--container-pad: 32px;
--nav-height: 58px;
/* ─── Type scale (overrides) ───────────────────────────────
Marketing display sizes are MUCH larger than the product
(which is data-dense). H1 here clamps to 72px. Body is
15–19px instead of the product's 13–14px.
───────────────────────────────────────────────────────── */
--fs-hero-h1: clamp(44px, 6vw, 72px);
--fs-section-h: clamp(32px, 4vw, 44px);
--fs-card-h: clamp(26px, 3vw, 36px);
--fs-lead: 19px;
--fs-body: 15px;
--fs-meta: 13px;
--fs-eyebrow: 12px;
--fs-code: 13px;
/* Tracking — display copy is tightly tracked (-0.03em). */
--tracking-hero: -0.035em;
--tracking-section: -0.025em;
--tracking-eyebrow: 0.12em; /* wide for the // eyebrow */
/* Weights — Inter loads up to 900 for the hero. */
--fw-regular: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
--fw-black: 800;
--fw-display: 900;
/* Line heights */
--lh-hero: 1.04;
--lh-section: 1.08;
--lh-body: 1.65;
--lh-code: 1.7;
/* ─── Radii ────────────────────────────────────────────────
Cards are 8px (much flatter than the product's 14–16px).
Buttons are 10px. Pills are 20px. Match the dev-tool tone.
───────────────────────────────────────────────────────── */
--radius-card: 8px;
--radius-btn: 10px;
--radius-input: 8px;
--radius-pill: 20px;
--radius-code: 14px; /* terminal / large code block */
/* ─── Motion ──────────────────────────────────────────────
Lighter than the product. Buttons lift -2px on hover, no
glow, no shimmer. Default transition is 0.2s ease.
───────────────────────────────────────────────────────── */
--dur-fast: 0.15s;
--dur-base: 0.20s;
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
}
/* ─── Semantic helper classes ─────────────────────────────────
Use these directly on elements when not writing per-page CSS.
Mirrors the .t-* helpers in colors_and_type.css but in the
marketing copy style.
──────────────────────────────────────────────────────────── */
.m-eyebrow {
font-family: 'JetBrains Mono', monospace;
font-size: var(--fs-eyebrow);
font-weight: var(--fw-bold);
color: var(--accent);
text-transform: uppercase;
letter-spacing: var(--tracking-eyebrow);
}
/* The `// section name` eyebrow variant — the // is content,
not a pseudo-element, so it survives copy-paste. */
.m-eyebrow-slash::before {
content: "// ";
color: var(--ink-3);
font-weight: var(--fw-regular);
}
.m-hero-h1 {
font-family: 'Inter', system-ui, sans-serif;
font-size: var(--fs-hero-h1);
font-weight: var(--fw-display);
line-height: var(--lh-hero);
letter-spacing: var(--tracking-hero);
color: var(--ink);
}
.m-hero-h1-gradient {
background: var(--grad-hero);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.m-section-h {
font-family: 'Inter', system-ui, sans-serif;
font-size: var(--fs-section-h);
font-weight: var(--fw-black);
line-height: var(--lh-section);
letter-spacing: var(--tracking-section);
color: var(--ink);
}
.m-lead {
font-size: var(--fs-lead);
line-height: var(--lh-body);
color: var(--ink-2);
font-weight: var(--fw-regular);
}
.m-body {
font-size: var(--fs-body);
line-height: var(--lh-body);
color: var(--ink-2);
}
.m-meta {
font-size: var(--fs-meta);
color: var(--ink-2);
line-height: 1.4;
}
.m-code,
.m-mono {
font-family: 'JetBrains Mono', monospace;
font-size: var(--fs-code);
color: var(--code-ink);
line-height: var(--lh-code);
}
/* ─── Component recipes ───────────────────────────────────────
The canonical building blocks the marketing site uses. Pull
these into a page by class — they read the tokens above.
──────────────────────────────────────────────────────────── */
/* Primary CTA — steel-blue fill, white ink, 10px radius,
lifts -2px on hover. NO glow. */
.m-btn-primary {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--brand);
color: #fff;
font-family: 'Inter', system-ui, sans-serif;
font-weight: var(--fw-semibold);
font-size: 14px;
letter-spacing: -0.01em;
padding: 13px 22px;
border: none;
border-radius: var(--radius-btn);
text-decoration: none;
cursor: pointer;
box-shadow: var(--shadow-btn);
transition: opacity var(--dur-base), transform var(--dur-base);
}
.m-btn-primary:hover {
opacity: 0.88;
transform: translateY(-2px);
}
/* Secondary CTA — dark surface, neutral border, white ink. */
.m-btn-secondary {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--btn-bg-secondary);
color: #fff;
font-family: 'Inter', system-ui, sans-serif;
font-weight: var(--fw-semibold);
font-size: 14px;
letter-spacing: -0.01em;
padding: 13px 22px;
border: 1px solid var(--border);
border-radius: var(--radius-btn);
text-decoration: none;
cursor: pointer;
transition: background var(--dur-base), transform var(--dur-base);
}
.m-btn-secondary:hover {
background: rgba(255, 255, 255, 0.07);
transform: translateY(-2px);
}
/* Install pill — monospaced, accent-colored, sits at the top
right of the nav. This is the signature marketing element. */
.m-install-pill {
display: inline-flex;
align-items: center;
gap: 6px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-input);
padding: 6px 13px;
font-family: 'JetBrains Mono', monospace;
font-size: 12.5px;
color: var(--accent);
text-decoration: none;
cursor: pointer;
user-select: none;
white-space: nowrap;
transition: border-color var(--dur-fast), color var(--dur-fast);
}
.m-install-pill:hover {
border-color: var(--border-strong);
color: var(--ink);
}
.m-install-pill .prefix { color: var(--ink-3); }
/* Card — 8px radius, neutral surface, lifts via border color
on hover (no translate, no glow). */
.m-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-card);
padding: 28px;
color: var(--ink);
text-decoration: none;
transition: border-color var(--dur-base);
}
.m-card:hover {
border-color: var(--border-strong);
}
/* Metric tile — used in case studies and the stats strip. The
`strong` is the value (24–34px black), the `span` is the
label below in ink-2. */
.m-metric {
background: #0d1016;
padding: 18px;
border: 1px solid var(--border);
}
.m-metric strong {
display: block;
color: var(--ink);
font-size: 24px;
font-weight: var(--fw-black);
letter-spacing: -0.03em;
line-height: 1;
margin-bottom: 4px;
}
.m-metric span {
color: var(--ink-2);
font-size: var(--fs-meta);
}
/* Pulse dot — the green "running" indicator next to the eyebrow
in the hero. */
.m-pulse-dot {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--pulse-color);
flex-shrink: 0;
animation: m-pulse 2s ease-in-out infinite;
vertical-align: middle;
}
@keyframes m-pulse {
0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.40); }
50% { opacity: 0.8; box-shadow: 0 0 0 5px rgba(74, 222, 128, 0); }
}
/* ─── Scoped layering ─────────────────────────────────────────
When this stylesheet is loaded alongside colors_and_type.css,
wrap marketing regions with [data-surface="marketing"] so the
tokens above shadow the product tokens locally.
──────────────────────────────────────────────────────────── */
[data-surface="marketing"] {
background: var(--page-bg);
color: var(--ink);
}