Synterra Field Guide

Start here

Handing this to an AI

Paste the block below into whatever is building the page, then paste the token block after it. The two together are the whole brand: everything else in this guide explains why, which a person needs and a model mostly does not.

Both of them together, as one plain-text file a model can be pointed at rather than pasted into: brand-brief.txt. Published beside this page, so the URL is all an assistant needs.

Brand brief — plain text

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.

The mark

A survey map with a fault through it

Syn, together; terra, ground. The mark is a piece of ground drawn as a survey map's contour isolines, cut by a fault, with the two plates slid apart along it — and a core sitting astride the cut, whole. Everything in the field is displaced across the fault. The one thing that holds is the point in the middle, which is what a payments business is for.

PrimarySix isolines. Anywhere it is shown above about 64px.

ReducedThree isolines, thicker. Tab icons, avatars, favicons.

On paperInk contours, copper seam. Documents and print.

The reduced mark holds at 16px, which is the floor. Below that the cut closes up and it reads as a smudge — use the core alone, or no mark. Clear space on all four sides is the radius of the core: about an eighth of the mark's width.

Reduced mark — inline SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" width="512" height="512" role="img" aria-label="Synterra">
<defs>
<linearGradient id="seam" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="324.6" y2="611.3"><stop offset="0" stop-color="#FFC75C"/><stop offset="1" stop-color="#FF7A4D"/></linearGradient>
<clipPath id="west"><polygon points="717.26,1721.17 -232.04,-1200.47 -1692.86,-725.82 -743.56,2195.82"/></clipPath>
<clipPath id="east"><polygon points="744.04,1712.47 -205.26,-1209.17 1255.56,-1683.82 2204.86,1237.82"/></clipPath>
</defs>
<rect width="512" height="512" rx="110.1" fill="#0B1723"/>
<g clip-path="url(#west)">
<g transform="translate(-16.22 -49.91)" fill="none" stroke="#FFFFFF" stroke-width="23.55" stroke-linejoin="round">
<path d="M 314.99 229.73 L 316.82 231.43 L 318.60 233.22 L 320.31 235.12 L 321.89 237.14 L 323.30 239.29 L 324.49 241.57 L 325.43 243.95 L 326.07 246.44 L 326.38 249.02 L 326.34 251.65 L 325.93 254.30 L 325.15 256.96 L 324.02 259.57 L 322.54 262.12 L 320.76 264.58 L 318.70 266.91 L 316.43 269.11 L 313.98 271.17 L 311.42 273.07 L 308.80 274.83 L 306.16 276.46 L 303.56 277.98 L 301.02 279.41 L 298.59 280.77 L 296.28 282.11 L 294.10 283.44 L 292.04 284.80 L 290.10 286.21 L 288.26 287.69 L 286.49 289.25 L 284.76 290.90 L 283.04 292.64 L 281.30 294.45 L 279.50 296.31 L 277.62 298.20 L 275.63 300.09 L 273.53 301.95 L 271.29 303.75 L 268.93 305.44 L 266.44 307.00 L 263.84 308.40 L 261.15 309.62 L 258.38 310.64 L 255.55 311.45 L 252.70 312.04 L 249.83 312.43 L 246.98 312.62 L 244.15 312.63 L 241.36 312.47 L 238.62 312.17 L 235.93 311.74 L 233.28 311.21 L 230.69 310.59 L 228.14 309.89 L 225.62 309.13 L 223.15 308.31 L 220.71 307.43 L 218.31 306.48 L 215.96 305.45 L 213.67 304.34 L 211.44 303.13 L 209.31 301.81 L 207.30 300.37 L 205.43 298.79 L 203.73 297.07 L 202.22 295.22 L 200.92 293.23 L 199.86 291.12 L 199.04 288.90 L 198.47 286.59 L 198.15 284.22 L 198.06 281.80 L 198.18 279.36 L 198.48 276.93 L 198.94 274.53 L 199.50 272.17 L 200.12 269.87 L 200.76 267.64 L 201.38 265.48 L 201.94 263.37 L 202.41 261.32 L 202.76 259.30 L 202.98 257.29 L 203.06 255.27 L 203.02 253.22 L 202.87 251.11 L 202.63 248.93 L 202.36 246.66 L 202.08 244.30 L 201.85 241.83 L 201.71 239.28 L 201.73 236.64 L 201.93 233.94 L 202.37 231.21 L 203.07 228.48 L 204.06 225.79 L 205.34 223.17 L 206.93 220.66 L 208.81 218.30 L 210.97 216.11 L 213.38 214.13 L 215.99 212.37 L 218.79 210.84 L 221.72 209.55 L 224.74 208.49 L 227.82 207.65 L 230.91 207.01 L 233.98 206.55 L 237.02 206.23 L 239.99 206.02 L 242.90 205.90 L 245.73 205.84 L 248.49 205.80 L 251.18 205.79 L 253.82 205.77 L 256.41 205.74 L 258.97 205.69 L 261.50 205.65 L 264.03 205.61 L 266.55 205.59 L 269.06 205.60 L 271.57 205.68 L 274.07 205.83 L 276.54 206.08 L 278.98 206.45 L 281.37 206.93 L 283.70 207.55 L 285.95 208.30 L 288.13 209.18 L 290.21 210.18 L 292.20 211.28 L 294.11 212.48 L 295.93 213.76 L 297.69 215.09 L 299.39 216.47 L 301.07 217.87 L 302.72 219.29 L 304.39 220.72 L 306.07 222.16 L 307.78 223.61 L 309.54 225.07 L 311.33 226.58 L 313.16 228.12 L 314.99 229.73 Z" stroke-opacity="0.96"/>
<path d="M 372.33 204.20 L 375.94 207.54 L 379.45 211.08 L 382.81 214.83 L 385.93 218.82 L 388.71 223.05 L 391.06 227.53 L 392.91 232.25 L 394.18 237.16 L 394.79 242.23 L 394.71 247.41 L 393.90 252.65 L 392.37 257.88 L 390.13 263.04 L 387.22 268.07 L 383.70 272.91 L 379.65 277.52 L 375.16 281.86 L 370.34 285.91 L 365.29 289.67 L 360.11 293.14 L 354.91 296.35 L 349.78 299.34 L 344.79 302.16 L 339.99 304.85 L 335.43 307.48 L 331.13 310.11 L 327.07 312.79 L 323.25 315.57 L 319.62 318.49 L 316.13 321.58 L 312.72 324.83 L 309.33 328.25 L 305.89 331.82 L 302.34 335.49 L 298.63 339.22 L 294.71 342.95 L 290.56 346.62 L 286.16 350.16 L 281.50 353.50 L 276.59 356.58 L 271.46 359.34 L 266.15 361.74 L 260.68 363.75 L 255.11 365.34 L 249.49 366.52 L 243.84 367.29 L 238.21 367.66 L 232.63 367.68 L 227.13 367.37 L 221.72 366.77 L 216.41 365.92 L 211.20 364.87 L 206.08 363.65 L 201.05 362.28 L 196.10 360.78 L 191.22 359.16 L 186.41 357.42 L 181.68 355.55 L 177.04 353.52 L 172.52 351.33 L 168.13 348.95 L 163.93 346.34 L 159.96 343.49 L 156.27 340.38 L 152.92 336.99 L 149.94 333.34 L 147.38 329.42 L 145.29 325.26 L 143.68 320.88 L 142.56 316.33 L 141.92 311.64 L 141.74 306.87 L 141.98 302.07 L 142.58 297.27 L 143.47 292.54 L 144.57 287.89 L 145.80 283.36 L 147.07 278.96 L 148.29 274.69 L 149.40 270.54 L 150.32 266.49 L 151.01 262.50 L 151.44 258.54 L 151.60 254.56 L 151.52 250.51 L 151.22 246.36 L 150.76 242.06 L 150.21 237.59 L 149.66 232.92 L 149.21 228.06 L 148.95 223.02 L 148.97 217.82 L 149.38 212.50 L 150.24 207.12 L 151.62 201.74 L 153.56 196.42 L 156.10 191.26 L 159.24 186.31 L 162.95 181.65 L 167.20 177.34 L 171.94 173.43 L 177.11 169.96 L 182.62 166.95 L 188.40 164.41 L 194.36 162.32 L 200.42 160.66 L 206.52 159.40 L 212.58 158.48 L 218.56 157.84 L 224.43 157.44 L 230.16 157.20 L 235.75 157.08 L 241.19 157.01 L 246.50 156.98 L 251.69 156.94 L 256.80 156.88 L 261.85 156.80 L 266.85 156.71 L 271.83 156.62 L 276.80 156.58 L 281.76 156.62 L 286.71 156.77 L 291.63 157.07 L 296.50 157.56 L 301.31 158.28 L 306.03 159.24 L 310.62 160.46 L 315.07 161.93 L 319.36 163.67 L 323.46 165.63 L 327.39 167.82 L 331.15 170.18 L 334.75 172.70 L 338.21 175.33 L 341.57 178.04 L 344.87 180.81 L 348.14 183.61 L 351.42 186.42 L 354.73 189.26 L 358.12 192.12 L 361.58 195.01 L 365.11 197.97 L 368.71 201.03 L 372.33 204.20 Z" stroke-opacity="0.70"/>
<path d="M 429.67 178.68 L 435.05 183.66 L 440.30 188.93 L 445.32 194.53 L 449.97 200.49 L 454.12 206.81 L 457.64 213.50 L 460.40 220.54 L 462.28 227.87 L 463.20 235.44 L 463.08 243.18 L 461.88 251.00 L 459.59 258.81 L 456.24 266.52 L 451.90 274.02 L 446.64 281.25 L 440.60 288.13 L 433.90 294.61 L 426.70 300.65 L 419.16 306.26 L 411.43 311.45 L 403.67 316.25 L 396.00 320.71 L 388.55 324.91 L 381.39 328.93 L 374.58 332.86 L 368.16 336.78 L 362.11 340.78 L 356.40 344.94 L 350.97 349.30 L 345.76 353.90 L 340.67 358.76 L 335.61 363.86 L 330.48 369.18 L 325.18 374.67 L 319.64 380.24 L 313.80 385.81 L 307.60 391.29 L 301.02 396.57 L 294.06 401.56 L 286.74 406.15 L 279.09 410.27 L 271.15 413.86 L 262.99 416.85 L 254.68 419.24 L 246.27 420.99 L 237.84 422.14 L 229.44 422.70 L 221.12 422.72 L 212.91 422.26 L 204.83 421.36 L 196.90 420.11 L 189.12 418.54 L 181.48 416.71 L 173.97 414.66 L 166.57 412.42 L 159.29 410.01 L 152.11 407.41 L 145.05 404.61 L 138.12 401.59 L 131.37 398.32 L 124.82 394.76 L 118.55 390.87 L 112.63 386.61 L 107.12 381.97 L 102.11 376.92 L 97.66 371.46 L 93.85 365.61 L 90.72 359.40 L 88.31 352.86 L 86.64 346.06 L 85.69 339.07 L 85.42 331.95 L 85.78 324.77 L 86.67 317.62 L 88.00 310.55 L 89.65 303.61 L 91.48 296.84 L 93.38 290.27 L 95.21 283.90 L 96.85 277.70 L 98.23 271.65 L 99.26 265.70 L 99.90 259.79 L 100.15 253.85 L 100.02 247.81 L 99.57 241.61 L 98.89 235.19 L 98.07 228.51 L 97.25 221.55 L 96.57 214.29 L 96.18 206.76 L 96.22 199.00 L 96.82 191.06 L 98.11 183.02 L 100.17 174.99 L 103.07 167.06 L 106.86 159.34 L 111.54 151.96 L 117.08 145.00 L 123.43 138.56 L 130.51 132.73 L 138.22 127.55 L 146.45 123.06 L 155.08 119.26 L 163.97 116.14 L 173.03 113.67 L 182.13 111.78 L 191.18 110.41 L 200.11 109.46 L 208.87 108.86 L 217.43 108.50 L 225.76 108.32 L 233.89 108.23 L 241.81 108.17 L 249.57 108.11 L 257.20 108.02 L 264.73 107.90 L 272.20 107.76 L 279.64 107.64 L 287.05 107.58 L 294.46 107.63 L 301.84 107.86 L 309.19 108.31 L 316.47 109.05 L 323.65 110.11 L 330.69 111.54 L 337.55 113.36 L 344.19 115.57 L 350.58 118.15 L 356.72 121.09 L 362.58 124.35 L 368.19 127.89 L 373.56 131.64 L 378.73 135.57 L 383.75 139.62 L 388.67 143.75 L 393.55 147.92 L 398.45 152.13 L 403.40 156.36 L 408.45 160.63 L 413.62 164.95 L 418.90 169.37 L 424.27 173.93 L 429.67 178.68 Z" stroke-opacity="0.44"/>
</g></g>
<g clip-path="url(#east)">
<g transform="translate(16.22 49.91)" fill="none" stroke="#FFFFFF" stroke-width="23.55" stroke-linejoin="round">
<path d="M 314.99 229.73 L 316.82 231.43 L 318.60 233.22 L 320.31 235.12 L 321.89 237.14 L 323.30 239.29 L 324.49 241.57 L 325.43 243.95 L 326.07 246.44 L 326.38 249.02 L 326.34 251.65 L 325.93 254.30 L 325.15 256.96 L 324.02 259.57 L 322.54 262.12 L 320.76 264.58 L 318.70 266.91 L 316.43 269.11 L 313.98 271.17 L 311.42 273.07 L 308.80 274.83 L 306.16 276.46 L 303.56 277.98 L 301.02 279.41 L 298.59 280.77 L 296.28 282.11 L 294.10 283.44 L 292.04 284.80 L 290.10 286.21 L 288.26 287.69 L 286.49 289.25 L 284.76 290.90 L 283.04 292.64 L 281.30 294.45 L 279.50 296.31 L 277.62 298.20 L 275.63 300.09 L 273.53 301.95 L 271.29 303.75 L 268.93 305.44 L 266.44 307.00 L 263.84 308.40 L 261.15 309.62 L 258.38 310.64 L 255.55 311.45 L 252.70 312.04 L 249.83 312.43 L 246.98 312.62 L 244.15 312.63 L 241.36 312.47 L 238.62 312.17 L 235.93 311.74 L 233.28 311.21 L 230.69 310.59 L 228.14 309.89 L 225.62 309.13 L 223.15 308.31 L 220.71 307.43 L 218.31 306.48 L 215.96 305.45 L 213.67 304.34 L 211.44 303.13 L 209.31 301.81 L 207.30 300.37 L 205.43 298.79 L 203.73 297.07 L 202.22 295.22 L 200.92 293.23 L 199.86 291.12 L 199.04 288.90 L 198.47 286.59 L 198.15 284.22 L 198.06 281.80 L 198.18 279.36 L 198.48 276.93 L 198.94 274.53 L 199.50 272.17 L 200.12 269.87 L 200.76 267.64 L 201.38 265.48 L 201.94 263.37 L 202.41 261.32 L 202.76 259.30 L 202.98 257.29 L 203.06 255.27 L 203.02 253.22 L 202.87 251.11 L 202.63 248.93 L 202.36 246.66 L 202.08 244.30 L 201.85 241.83 L 201.71 239.28 L 201.73 236.64 L 201.93 233.94 L 202.37 231.21 L 203.07 228.48 L 204.06 225.79 L 205.34 223.17 L 206.93 220.66 L 208.81 218.30 L 210.97 216.11 L 213.38 214.13 L 215.99 212.37 L 218.79 210.84 L 221.72 209.55 L 224.74 208.49 L 227.82 207.65 L 230.91 207.01 L 233.98 206.55 L 237.02 206.23 L 239.99 206.02 L 242.90 205.90 L 245.73 205.84 L 248.49 205.80 L 251.18 205.79 L 253.82 205.77 L 256.41 205.74 L 258.97 205.69 L 261.50 205.65 L 264.03 205.61 L 266.55 205.59 L 269.06 205.60 L 271.57 205.68 L 274.07 205.83 L 276.54 206.08 L 278.98 206.45 L 281.37 206.93 L 283.70 207.55 L 285.95 208.30 L 288.13 209.18 L 290.21 210.18 L 292.20 211.28 L 294.11 212.48 L 295.93 213.76 L 297.69 215.09 L 299.39 216.47 L 301.07 217.87 L 302.72 219.29 L 304.39 220.72 L 306.07 222.16 L 307.78 223.61 L 309.54 225.07 L 311.33 226.58 L 313.16 228.12 L 314.99 229.73 Z" stroke-opacity="0.96"/>
<path d="M 372.33 204.20 L 375.94 207.54 L 379.45 211.08 L 382.81 214.83 L 385.93 218.82 L 388.71 223.05 L 391.06 227.53 L 392.91 232.25 L 394.18 237.16 L 394.79 242.23 L 394.71 247.41 L 393.90 252.65 L 392.37 257.88 L 390.13 263.04 L 387.22 268.07 L 383.70 272.91 L 379.65 277.52 L 375.16 281.86 L 370.34 285.91 L 365.29 289.67 L 360.11 293.14 L 354.91 296.35 L 349.78 299.34 L 344.79 302.16 L 339.99 304.85 L 335.43 307.48 L 331.13 310.11 L 327.07 312.79 L 323.25 315.57 L 319.62 318.49 L 316.13 321.58 L 312.72 324.83 L 309.33 328.25 L 305.89 331.82 L 302.34 335.49 L 298.63 339.22 L 294.71 342.95 L 290.56 346.62 L 286.16 350.16 L 281.50 353.50 L 276.59 356.58 L 271.46 359.34 L 266.15 361.74 L 260.68 363.75 L 255.11 365.34 L 249.49 366.52 L 243.84 367.29 L 238.21 367.66 L 232.63 367.68 L 227.13 367.37 L 221.72 366.77 L 216.41 365.92 L 211.20 364.87 L 206.08 363.65 L 201.05 362.28 L 196.10 360.78 L 191.22 359.16 L 186.41 357.42 L 181.68 355.55 L 177.04 353.52 L 172.52 351.33 L 168.13 348.95 L 163.93 346.34 L 159.96 343.49 L 156.27 340.38 L 152.92 336.99 L 149.94 333.34 L 147.38 329.42 L 145.29 325.26 L 143.68 320.88 L 142.56 316.33 L 141.92 311.64 L 141.74 306.87 L 141.98 302.07 L 142.58 297.27 L 143.47 292.54 L 144.57 287.89 L 145.80 283.36 L 147.07 278.96 L 148.29 274.69 L 149.40 270.54 L 150.32 266.49 L 151.01 262.50 L 151.44 258.54 L 151.60 254.56 L 151.52 250.51 L 151.22 246.36 L 150.76 242.06 L 150.21 237.59 L 149.66 232.92 L 149.21 228.06 L 148.95 223.02 L 148.97 217.82 L 149.38 212.50 L 150.24 207.12 L 151.62 201.74 L 153.56 196.42 L 156.10 191.26 L 159.24 186.31 L 162.95 181.65 L 167.20 177.34 L 171.94 173.43 L 177.11 169.96 L 182.62 166.95 L 188.40 164.41 L 194.36 162.32 L 200.42 160.66 L 206.52 159.40 L 212.58 158.48 L 218.56 157.84 L 224.43 157.44 L 230.16 157.20 L 235.75 157.08 L 241.19 157.01 L 246.50 156.98 L 251.69 156.94 L 256.80 156.88 L 261.85 156.80 L 266.85 156.71 L 271.83 156.62 L 276.80 156.58 L 281.76 156.62 L 286.71 156.77 L 291.63 157.07 L 296.50 157.56 L 301.31 158.28 L 306.03 159.24 L 310.62 160.46 L 315.07 161.93 L 319.36 163.67 L 323.46 165.63 L 327.39 167.82 L 331.15 170.18 L 334.75 172.70 L 338.21 175.33 L 341.57 178.04 L 344.87 180.81 L 348.14 183.61 L 351.42 186.42 L 354.73 189.26 L 358.12 192.12 L 361.58 195.01 L 365.11 197.97 L 368.71 201.03 L 372.33 204.20 Z" stroke-opacity="0.70"/>
<path d="M 429.67 178.68 L 435.05 183.66 L 440.30 188.93 L 445.32 194.53 L 449.97 200.49 L 454.12 206.81 L 457.64 213.50 L 460.40 220.54 L 462.28 227.87 L 463.20 235.44 L 463.08 243.18 L 461.88 251.00 L 459.59 258.81 L 456.24 266.52 L 451.90 274.02 L 446.64 281.25 L 440.60 288.13 L 433.90 294.61 L 426.70 300.65 L 419.16 306.26 L 411.43 311.45 L 403.67 316.25 L 396.00 320.71 L 388.55 324.91 L 381.39 328.93 L 374.58 332.86 L 368.16 336.78 L 362.11 340.78 L 356.40 344.94 L 350.97 349.30 L 345.76 353.90 L 340.67 358.76 L 335.61 363.86 L 330.48 369.18 L 325.18 374.67 L 319.64 380.24 L 313.80 385.81 L 307.60 391.29 L 301.02 396.57 L 294.06 401.56 L 286.74 406.15 L 279.09 410.27 L 271.15 413.86 L 262.99 416.85 L 254.68 419.24 L 246.27 420.99 L 237.84 422.14 L 229.44 422.70 L 221.12 422.72 L 212.91 422.26 L 204.83 421.36 L 196.90 420.11 L 189.12 418.54 L 181.48 416.71 L 173.97 414.66 L 166.57 412.42 L 159.29 410.01 L 152.11 407.41 L 145.05 404.61 L 138.12 401.59 L 131.37 398.32 L 124.82 394.76 L 118.55 390.87 L 112.63 386.61 L 107.12 381.97 L 102.11 376.92 L 97.66 371.46 L 93.85 365.61 L 90.72 359.40 L 88.31 352.86 L 86.64 346.06 L 85.69 339.07 L 85.42 331.95 L 85.78 324.77 L 86.67 317.62 L 88.00 310.55 L 89.65 303.61 L 91.48 296.84 L 93.38 290.27 L 95.21 283.90 L 96.85 277.70 L 98.23 271.65 L 99.26 265.70 L 99.90 259.79 L 100.15 253.85 L 100.02 247.81 L 99.57 241.61 L 98.89 235.19 L 98.07 228.51 L 97.25 221.55 L 96.57 214.29 L 96.18 206.76 L 96.22 199.00 L 96.82 191.06 L 98.11 183.02 L 100.17 174.99 L 103.07 167.06 L 106.86 159.34 L 111.54 151.96 L 117.08 145.00 L 123.43 138.56 L 130.51 132.73 L 138.22 127.55 L 146.45 123.06 L 155.08 119.26 L 163.97 116.14 L 173.03 113.67 L 182.13 111.78 L 191.18 110.41 L 200.11 109.46 L 208.87 108.86 L 217.43 108.50 L 225.76 108.32 L 233.89 108.23 L 241.81 108.17 L 249.57 108.11 L 257.20 108.02 L 264.73 107.90 L 272.20 107.76 L 279.64 107.64 L 287.05 107.58 L 294.46 107.63 L 301.84 107.86 L 309.19 108.31 L 316.47 109.05 L 323.65 110.11 L 330.69 111.54 L 337.55 113.36 L 344.19 115.57 L 350.58 118.15 L 356.72 121.09 L 362.58 124.35 L 368.19 127.89 L 373.56 131.64 L 378.73 135.57 L 383.75 139.62 L 388.67 143.75 L 393.55 147.92 L 398.45 152.13 L 403.40 156.36 L 408.45 160.63 L 413.62 164.95 L 418.90 169.37 L 424.27 173.93 L 429.67 178.68 Z" stroke-opacity="0.44"/>
</g></g>
<circle cx="256" cy="256" r="74.10" fill="#0B1723"/>
<line x1="208.53" y1="109.92" x2="303.47" y2="402.08" stroke="url(#seam)" stroke-width="12.29"/>
<circle cx="256" cy="256" r="55.30" fill="url(#seam)"/>
</svg>

Colour

Five brand values, and neutrals chosen to sit under them

The neutrals are not grey. They carry a slight blue bias so they read as belonging beneath the ink rather than borrowed from a framework.

#0B1723

Ink

The ground. Headers, take-away panels, the whole page in dark mode.

#122232

Isoline

Contour lines on paper, and the raised surface on ink.

#FFC75C

Gold

Top of the seam. On ink only — 1.55:1 on white is not a colour for text.

#FF7A4D

Ember

Bottom of the seam, and the dark-mode accent. On ink only.

#C2410C

Copper

The accent that survives on paper. Every warm thing on a light ground is this.

#F6F7F9

Page

Light ground. Blue-biased, so it sits under the ink rather than beside it.

#5C6B7A

Muted

Secondary text on light. 5.5:1 — safe for body copy, unlike the faint tone.

#7A8896

Faint

Labels and eyebrows only. 3.63:1 — large or bold text, never a paragraph.

Contrast limits

Where each accent may actually be used

Measured, not estimated. This table is the reason the palette has a copper in it at all: the seam's own colours are unusable as text on anything light, and a brand guide that says "use the accent" without saying where produces unreadable pages.

Foreground	On	Ratio	Verdict	Use for
Ink #0B1723	White	18.09	AAA	All text
White	Ink	18.09	AAA	All text
Gold #FFC75C	Ink	11.69	AAA	Accent text on ink
Ember #FF7A4D	Ink	7.01	AAA	Accent text on ink
Copper #C2410C	White	5.18	AA	Accent text on paper
White	Copper	5.18	AA	Primary button on paper
Muted #5C6B7A	White	5.47	AA	Secondary body text
Faint #7A8896	White	3.63	Large only	Labels, eyebrows
Ember #FF7A4D	White	2.58	Never as text	Large graphics only
Gold #FFC75C	White	1.55	Never as text	Fills and strokes only

The practical rule that falls out of this: warm on ink, copper on paper. If a warm colour has to sit on something light and carry a word, it is copper or it is nothing.

Typography

Three faces, three jobs

Jost carries the geometry of the mark's arcs into the headings. Inter does the reading. JetBrains Mono holds anything that lines up in a column — which, in a payments product, is most of the interesting content.

Jost 500 · 3rem tracking −0.015em: Payment received
Jost 500 · 1.6rem tracking −0.01em: Settlement in three currencies
Inter 400 · 1rem leading 1.65: The payer sees one page, opens it once, and leaves it open. Everything the interface does after that has to happen without them reloading.
Inter 500 · 0.875rem: Reference: SYN-2026-0041 · Due today
JetBrains Mono 500 0.688rem · tracking 0.14em: Awaiting confirmation
JetBrains Mono 400 tabular-nums: 1,204.50 CHF · 0.84210 USDC

Token block

The whole theme, both grounds

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.

synterra.css

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

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

  /* semantic — separate from the accent, on purpose */
  --ok: #1F7A56;
  --warn: #8A5D10;
  --danger: #A3301A;

  /* type */
  --font-display: "Jost", "Avenir Next", Avenir, system-ui, sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  /* shape */
  --radius-card: 10px;
  --radius-control: 7px;
  --shadow: 0 1px 2px rgb(11 23 35 / .06), 0 8px 24px -12px rgb(11 23 35 / .18);
}

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

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

body {
  background: var(--bg);   /* explicit: a transparent body borrows its host's ground */
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.65;
}

Components

The same parts on both grounds

Shown side by side rather than behind a toggle, because the accent swap is the thing worth seeing: copper carries the light ground, ember carries the dark, and the gold is reserved for the seam and for small marks on ink.

On paper

Amount due 1,204.50 CHF

Beneficiary IBAN

Awaiting confirmation

On ink

Amount due 1,204.50 CHF

Beneficiary IBAN

Awaiting confirmation

Data colour

Series colours, and why the accent is not first

The categorical ramp starts cool and ends warm, so the accent lands on the series that matters rather than on whichever happens to be plotted first. Semantic colour stays out of it: a green line means a green line, not "good".

Order	Light ground	Ink ground	Use
1	#1E4C6B	#6FA8CC	Primary series
2	#4E7E8C	#8FC3C9	Comparison
3	#7A8896	#9BABB9	Context, prior period
4	#B4780F	#FFC75C	Attention
5	#C2410C	#FF7A4D	The series in question

Grid lines are the border token at 50% opacity, never a full-strength rule. Axis labels are faint; the emphasized endpoint of a line is a 3px dot in the accent. Do not fill an area chart with the seam gradient — it is a 3px rule's worth of colour, not a field's.

Voice

Say what happened

Name the thing the reader recognises

"Payment received", not "Inbound settlement event processed". The payer knows what a payment is and has never heard of an event.

A control says what it does

The button says Pay now; the message afterwards says Paid. Same verb, past tense — the reader should not have to check whether it worked.

Errors carry the fix

"That IBAN has 20 characters; Swiss accounts have 21." Not "Invalid input". No apology, no exclamation mark.

No reassurance theatre

Drop "Don't worry", "Simply", "Just". A payment page is read by someone about to part with money; breeziness reads as evasion.

Rules

The short list

Don't put the seam behind text

Gold on white is 1.55:1 and ember is 2.58:1. Both are unreadable. The gradient is for rules, edges and small marks on ink.

Don't recolour the mark

Three variants exist: white contours on ink, ink contours on paper, and the reduced three-line version. There is no fourth, and no single-colour flattening — the core has to stay warm or the idea goes.

Don't stretch or rotate it

The fault runs at 18° off vertical and the plates are offset along it. Rotating the mark rotates the fault, which is the one line in it that means something.

Don't add a second accent

Semantic colours exist for state and are not decoration. A page with a warm accent and a teal accent has no accent.

Do let the ink do the work

Most of this identity is a very dark blue and a lot of restraint. If a page feels flat, the answer is hierarchy and spacing, not more colour.

Do keep the seam thin

3px against a panel edge, a 1px underline, a small pill. Its power comes from how little of it there is.