Consultant NetworkFoundation
Brand SystemBrand GuideLogo GuideCSS GuideApplications
Brand System · CSS Guide

CSS Guide

The complete developer reference for Vecturae design tokens, type primitives, the VxMark, and component patterns. Everything lives in :root custom properties: import once, apply everywhere.

01 — Design Tokens
vx-tokens.css
:root {
  /* ─ Grounds ─────────────────────── */
  --vx-ink:       #090C13;   /* primary bg  */
  --vx-slate:     #0C1320;   /* panel bg    */
  --vx-abyss:     #05080E;   /* deep bg     */

  /* ─ Signal ──────────────────────── */
  --vx-gold:      #B79A5C;   /* accent      */
  --vx-gold-lift: #CDB37C;   /* hover       */

  /* ─ Text ramp ───────────────────── */
  --vx-cloud:  #F4F3EC;  /* headlines   */
  --vx-mist:   #EFEEE7;  /* primary     */
  --vx-steel:  #AEB6C0;  /* lede        */
  --vx-body:   #98A2AF;  /* body        */
  --vx-muted:  #8A93A0;  /* secondary   */
  --vx-faint:  #69727F;  /* meta        */

  /* ─ Rules ───────────────────────── */
  --vx-line:      rgba(239,238,231,0.10);
  --vx-line-gold: rgba(183,154,92,0.30);

  /* ─ Fonts ───────────────────────── */
  --vx-serif:     'Spectral', Georgia, serif;
  --vx-sans:      'Public Sans', system-ui, sans-serif;
  --vx-grotesque: 'Archivo', 'Public Sans', sans-serif;

  /* ─ Layout ──────────────────────── */
  --vx-shell:   1280px;  /* max-width   */
  --vx-gutter:  40px;    /* side pad    */
  --vx-section: 96px;    /* section pad */
}
Token swatches
--vx-ink
Ink · #090C13
--vx-slate
Slate Panel · #0C1320
--vx-abyss
Abyss · #05080E
--vx-gold
Antique Gold · #B79A5C
--vx-gold-lift
Gold Hover · #CDB37C
--vx-cloud
Cloud · #F4F3EC
--vx-mist
Mist · #EFEEE7
--vx-steel
Steel · #AEB6C0
--vx-body
Body · #8A93A0
--vx-muted
Muted · #8A93A0
--vx-faint
Faint · #69727F
02 — Type Primitives
.vx-display
Defining clarity.
/* .vx-display — Spectral Light display heading */
.vx-display {
  font-family: var(--vx-serif);
  font-weight: 300;
  font-size: clamp(48px, 6vw, 96px);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--vx-cloud);
}
.vx-body
We solve problems that don’t have obvious answers. If the answer is clear, you don’t need us.
/* .vx-body — Public Sans regular body */
.vx-body {
  font-family: var(--vx-sans);
  font-weight: 400;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--vx-steel);
}
.vx-eyebrow
Section label
/* .vx-eyebrow — section eyebrow label */
.vx-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--vx-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--vx-gold);
}
.vx-eyebrow::before {
  content: '';
  display: block;
  width: 40px;
  height: 1px;
  background: var(--vx-gold);
  flex-shrink: 0;
}
.vx-wordmark
VECTURAE
/* .vx-wordmark — Archivo tracking */
.vx-wordmark {
  font-family: var(--vx-grotesque);
  font-weight: 300;
  letter-spacing: 0.36em;
  text-transform: uppercase;
  color: var(--vx-mist);
}
03 — Logo & Mark
VECTURAEPartners
Vector assets
vecturae-mark-gold.svg
vecturae-mark-ink.svg
vecturae-mark-white.svg
vecturae-lockup-gold.svg
vecturae-lockup-ink.svg
signature-mark.png
favicon.svg
VxMark usage
<!-- Inline SVG (recommended for full control) -->
<svg viewBox="-16 -6 132 112" fill="none"
     style="width:100px;height:85px">
  <!-- crosshair lines -->
  <line x1="50" y1="-5" x2="50" y2="105"
    stroke="#B79A5C" stroke-opacity=".55" stroke-width=".8"/>
  <!-- ... 6 more lines ... -->
  <!-- chevron paths (fill="#B79A5C") -->
  <!-- corner brackets (stroke="#B79A5C") -->
</svg>

<!-- Or reference the SVG file -->
<img src="/assets/vecturae-mark-gold.svg"
     width="100" height="85" alt="Vecturae">
04 — Component Patterns
Page shell
.vx-page
.vx-shell
/* Page shell — full-bleed dark bg with centered content */
.vx-page { background: var(--vx-ink); font-family: var(--vx-sans); }
.vx-shell { max-width: var(--vx-shell); margin: 0 auto; padding: 0 var(--vx-gutter); }
.vx-section { padding: var(--vx-section) var(--vx-gutter); }
Hairline list row / tick
Real strategy
Small teams
Built to transfer
/* Hairline list row with diamond tick */
.vx-list-row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--vx-line);
}
.vx-tick {
  width: 6px;
  height: 6px;
  background: var(--vx-gold);
  flex-shrink: 0;
  transform: rotate(45deg);
  margin-top: 5px;
}
Buttons
/* Primary gold button */
.vx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  font-family: var(--vx-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vx-ink);
  background: var(--vx-gold);
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.vx-btn:hover { background: var(--vx-gold-lift); }

/* Outlined variant */
.vx-btn-outlined {
  background: transparent;
  color: var(--vx-gold);
  border: 1px solid var(--vx-gold);
}
.vx-btn-outlined:hover { color: var(--vx-gold-lift); border-color: var(--vx-gold-lift); }
05 — Coding Principles
01
Tokens, not values

Use CSS custom properties everywhere. No raw hex in component styles.

02
Inline is structural

Use inline styles for structural layout and structural variants only. Use classes for repeated patterns.

03
No Tailwind

Tailwind class soup obscures intent. The design language is too bespoke for utility-first patterns to carry it faithfully.

04
One signal color

Gold is the only accent. Never introduce a second accent color. Status colors (green/red) are functional only.

05
Typography is load-bearing

Spectral at the right weight does more than any image. Don't compete with it or crowd it.

06
Structure with space

White space and hairlines create hierarchy. Avoid boxes, cards-within-cards, and thick borders.

CSS Guide | Vecturae