Synterra Innovations Ltd. — brand brief
======================================

Hand this file to whatever is building the page. It is the whole brand: the
field guide at /brandbook.html explains why, which a person needs and a model
mostly does not.

Theme this page as Synterra Innovations Ltd. — a cross-border payments company.

GROUND
  Deep blue-black ink (#0B1723) is the brand's home. Use it for the header,
  for any panel meant to be taken away, and as the whole background in dark
  mode. Light surfaces are near-white with a blue bias (#F6F7F9), never warm.

ACCENT — one accent, and it has a rule
  Gold #FFC75C to ember #FF7A4D, as a gradient at 160deg, on INK ONLY.
  On light grounds the accent is copper #C2410C, which is the only one of the
  three that passes contrast against white for text (5.18:1).
  Never set gold or ember as text on a light ground. They fail badly:
  1.55:1 and 2.58:1. Use them on ink, or as large graphics, or not at all.

RESTRAINT
  The accent is a seam, not a theme. It appears as a 3px rule, a small pill,
  one primary button, the endpoint of a chart line. If more than roughly a
  twentieth of the page is warm, it is wrong.

TYPE
  Display / headings: Jost, 400-600, letter-spacing -0.015em on large sizes.
  Body and UI: Inter, 400-600, line-height 1.65.
  Numbers, code, labels: JetBrains Mono; tabular-nums wherever digits align.
  Uppercase labels take 0.12-0.14em tracking and sit at 0.688rem.

SHAPE
  Corner radius 10px on cards, 7px on controls, 999px on pills. Borders are
  1px and low-contrast; separation comes from the border, not from shadow.
  One soft shadow exists and is used sparingly.

WHAT NOT TO DO
  No purple or blue-violet gradients. No emoji as section markers. Do not
  centre body text. Do not put the accent behind large areas of text. Do not
  invent a second accent hue; semantic colour (success, warning, danger) is
  separate and is not the accent.


CSS CUSTOM PROPERTIES
---------------------
Complete and self-contained. Light is the bare :root; dark is redefined twice so
that both an OS preference and an explicit toggle resolve correctly. Style
through the variables and never inside the media query, or the page renders one
theme's text on the other's ground.

:root {
  <span class="c">/* brand */</span>
  <span class="k">--syn-ink</span>: <span class="v">#0B1723</span>;      <span class="c">/* the ground */</span>
  <span class="k">--syn-isoline</span>: <span class="v">#122232</span>;
  <span class="k">--syn-gold</span>: <span class="v">#FFC75C</span>;     <span class="c">/* seam, top    — on ink only */</span>
  <span class="k">--syn-ember</span>: <span class="v">#FF7A4D</span>;    <span class="c">/* seam, bottom — on ink only */</span>
  <span class="k">--syn-copper</span>: <span class="v">#C2410C</span>;   <span class="c">/* the accent that works on paper */</span>
  <span class="k">--syn-seam</span>: <span class="v">linear-gradient(160deg, #FFC75C, #FF7A4D)</span>;

  <span class="c">/* surfaces — light */</span>
  <span class="k">--bg</span>: <span class="v">#F6F7F9</span>;
  <span class="k">--surface</span>: <span class="v">#FFFFFF</span>;
  <span class="k">--surface-2</span>: <span class="v">#EDF0F3</span>;
  <span class="k">--border</span>: <span class="v">#DCE2E8</span>;
  <span class="k">--border-strong</span>: <span class="v">#C3CCD6</span>;
  <span class="k">--text</span>: <span class="v">#101C28</span>;
  <span class="k">--text-muted</span>: <span class="v">#5C6B7A</span>;   <span class="c">/* 5.5:1  — body copy */</span>
  <span class="k">--text-faint</span>: <span class="v">#7A8896</span>;   <span class="c">/* 3.6:1  — labels only */</span>
  <span class="k">--accent</span>: <span class="v">#C2410C</span>;
  <span class="k">--on-accent</span>: <span class="v">#FFFFFF</span>;

  <span class="c">/* semantic — separate from the accent, on purpose */</span>
  <span class="k">--ok</span>: <span class="v">#1F7A56</span>;
  <span class="k">--warn</span>: <span class="v">#8A5D10</span>;
  <span class="k">--danger</span>: <span class="v">#A3301A</span>;

  <span class="c">/* type */</span>
  <span class="k">--font-display</span>: <span class="v">"Jost", "Avenir Next", Avenir, system-ui, sans-serif</span>;
  <span class="k">--font-body</span>: <span class="v">"Inter", -apple-system, "Segoe UI", Arial, sans-serif</span>;
  <span class="k">--font-mono</span>: <span class="v">"JetBrains Mono", ui-monospace, Menlo, monospace</span>;

  <span class="c">/* shape */</span>
  <span class="k">--radius-card</span>: <span class="v">10px</span>;
  <span class="k">--radius-control</span>: <span class="v">7px</span>;
  <span class="k">--shadow</span>: <span class="v">0 1px 2px rgb(11 23 35 / .06), 0 8px 24px -12px rgb(11 23 35 / .18)</span>;
}

<span class="c">/* dark, when the OS asks and nothing overrides it */</span>
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    <span class="k">--bg</span>: <span class="v">#080F17</span>;
    <span class="k">--surface</span>: <span class="v">#0E1B27</span>;
    <span class="k">--surface-2</span>: <span class="v">#14232F</span>;
    <span class="k">--border</span>: <span class="v">#1E2F3D</span>;
    <span class="k">--border-strong</span>: <span class="v">#2C4152</span>;
    <span class="k">--text</span>: <span class="v">#E8EDF2</span>;
    <span class="k">--text-muted</span>: <span class="v">#9BABB9</span>;
    <span class="k">--text-faint</span>: <span class="v">#7A8896</span>;
    <span class="k">--accent</span>: <span class="v">#FF7A4D</span>;      <span class="c">/* 7.0:1 on ink */</span>
    <span class="k">--on-accent</span>: <span class="v">#0B1723</span>;
    <span class="k">--ok</span>: <span class="v">#7FD4A8</span>;
    <span class="k">--warn</span>: <span class="v">#FFC75C</span>;
    <span class="k">--danger</span>: <span class="v">#FF8A6B</span>;
    <span class="k">--shadow</span>: <span class="v">0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6)</span>;
  }
}

<span class="c">/* dark, when something explicitly asks for it */</span>
:root[data-theme="dark"] {
  <span class="k">--bg</span>: <span class="v">#080F17</span>;
  <span class="k">--surface</span>: <span class="v">#0E1B27</span>;
  <span class="k">--surface-2</span>: <span class="v">#14232F</span>;
  <span class="k">--border</span>: <span class="v">#1E2F3D</span>;
  <span class="k">--border-strong</span>: <span class="v">#2C4152</span>;
  <span class="k">--text</span>: <span class="v">#E8EDF2</span>;
  <span class="k">--text-muted</span>: <span class="v">#9BABB9</span>;
  <span class="k">--text-faint</span>: <span class="v">#7A8896</span>;
  <span class="k">--accent</span>: <span class="v">#FF7A4D</span>;
  <span class="k">--on-accent</span>: <span class="v">#0B1723</span>;
  <span class="k">--ok</span>: <span class="v">#7FD4A8</span>;
  <span class="k">--warn</span>: <span class="v">#FFC75C</span>;
  <span class="k">--danger</span>: <span class="v">#FF8A6B</span>;
  <span class="k">--shadow</span>: <span class="v">0 1px 2px rgb(0 0 0 / .4), 0 8px 24px -12px rgb(0 0 0 / .6)</span>;
}

body {
  <span class="k">background</span>: <span class="v">var(--bg)</span>;   <span class="c">/* explicit: a transparent body borrows its host's ground */</span>
  <span class="k">color</span>: <span class="v">var(--text)</span>;
  <span class="k">font-family</span>: <span class="v">var(--font-body)</span>;
  <span class="k">line-height</span>: <span class="v">1.65</span>;
}

---
Synterra Innovations Ltd. · FINTRAC MSB N300000167
Full field guide, including the mark, the contrast table and the component
specimens: /brandbook.html