A bryn is a hill. From the high ground you see the whole field before you move. Every mark, token, and idiom on this page is the one civic.com renders today: the swatches paint from the live tokens, the type is the live scale, the motion is the live contract.
One glyph carries the brand: a figure on a hill, watching the horizon. The hill fills with the stones gradient, the brand purple family stepped from soft to tint. Figure, ridge, and horizon line take the ink of the ground they sit on.
symbol#horizon ⬩ 300 × 300Inline as <use href="#horizon">, the mark inherits currentColor for figure, ridge, and horizon line, so it is brand purple in the header, ink in the footer, and white on the drench. The standalone SVG pins the same paths for places that cannot inherit page CSS.
bryn-lockup-civic-ink.svg
bryn-lockup-civic.svgBRYN ⬩ by CivicGlyph at 24px in brand purple, BRYN in Geist extrabold at 17px, a 1px hairline, then by Civic with Civic in medium weight. This is the header composition on every page. The SVG lockups ship with the type outlined, one drawn for light grounds and one for dark.
civic-mark.svg ⬩ currentColorThe company mark. It rides the Company menu at 18px and links to civic.com. Inline it with fill="currentColor" so it takes the ink of its surface.
Bryn delivers revenue.
Watermark, border-strongBryn delivers revenue.
Drench glyph, on-brandThe unit is x, the head of the figure: one quarter of the mark's width. The mark keeps at least 1x clear on every side. The lockup keeps at least the glyph's height, 4x, clear on every side.
x = head Ø 76 / 300 box = 0.25 × mark width ⬩ lockup clear = glyph height = 4x.nav-civic__mark.brand__glyph.mark.glyph-watermark.drench-glyphWarm paper in the light register, deep violet-black in the dark. Three accents, each with one job. The light theme is the base; dark applies through data-bryn-theme="dark" on .bryn-site, and any band can go dark on its own with data-band="dark".
Bryn delivers revenue.
--brandThe delivered word renders brand purple. Buttons, the drench, the hill fill, the noun the hero lands on.
--signalResolution, live data, the thing Bryn saw. It lights the hit in a sparkline, the numeral in a kicker, the tick in a progress track.
--warnThe watching clock, the template flag. Sparse by design.
--brand#7C3AED--brand-hover#6D28D9--brand-soft#9993FF--brand-shade#3E1973--brand-tint#1E1033--brand-on-light#5B1FA8text on the ground--signal#2FD9C2--signal-soft#7FF0E2--signal-on-light#0C6D60text on the ground--warn#FF7E5F--warn-on-light#A5330Etext on the ground--bg#FAF9F5--bg-alt#F3F1EA--surface#FFFFFF--surface-alt#F1EFE7--border#E7E4DB--border-strong#C7C2B3--text#211B12--text-secondary#5B5541--text-muted#6A6249--brand#7C3AED--brand-hover#6D28D9--brand-soft#9993FF--brand-shade#3E1973--brand-tint#1E1033--brand-on-light#9993FFtext on the ground--signal#2FD9C2--signal-soft#7FF0E2--signal-on-light#2FD9C2text on the ground--warn#FF7E5F--warn-on-light#FF7E5Ftext on the ground--bg#07050E--bg-alt#0C0918--surface#191327--surface-alt#120C20--border#2C2444--border-strong#3D3360--text#E2E8F0--text-secondary#94A3B8--text-muted#7B8794Text on purple is white, dimmed to 90% for secondary lines. The drench adds a radial white sheen at 18% from the lower right.
Headings and prose set in Geist. Everything the product itself says sets in Geist Mono: readouts, cites, chips, stamps, Play names, log lines. Body letter-spacing runs at -0.005em site-wide. The scale is fluid and ramps again above 90rem, so the numbers below are the 1440 landing.
Buyers send signals. Bryn delivers pipeline.
Run #0001 ⬩ demo.follow-up ⬩ 10:02:11 → 10:06:46 UTC
Bryn.
Buyers send signals.
Bryn watches. You decide.
Bryn Watches, Scores, Acts, Logs
Under 10 minutes to your first identified, scored and recorded visitor.
A rule set once: when this happens, on an account like this, do that.
Bounded writes. Only the channels the Play names.
S3 ⬩ BOUNDED WRITES
The instrument-panel voice: mono uppercase stamps at 0.08em tracking, 1px hairline seams between bands, and the hill as section punctuation. Elevation is one hairline and a soft shadow, never a heavy card.
card-ord ⬩ fig-stamp ⬩ pg-stampUppercase Geist Mono at step -2, muted ink, a ⬩ separator, and a hairline that runs out to the right. Section ordinals, figure stamps, and metadata rows all wear it.
fig ⬩ radius-lg ⬩ shadow-smSurface, 1px border, 20px radius, 24px padding, the small shadow. Adjacent bands seam with a 1px hairline; a dark band swallows the seams around it.
chip-pill ⬩ kicker__numChips are mono at step -2 with a border-strong edge and a teal arrow. The kicker is a sans label whose numeral sets tabular in teal ink.
btn--primary ⬩ btn--ghostSemibold at step 0, 12px by 32px padding, 11px radius, 1px press. Primary is the brand fill; ghost is transparent with a border-strong edge.
Three pieces in light and dark: a hero atmosphere, a section divider, and an ambient texture. The divider is the cheap one; it can repeat down a long page. The signal line traces the nearest ridge in teal.
hill-horizon-hero-light.svg ⬩ hill-horizon-hero-dark.svg
hill-divider-light.svg ⬩ hill-divider-dark.svg
hill-texture-light.svg ⬩ hill-texture-dark.svgContent enters with a 22px rise over 600ms on the rise curve, staggered in four steps. Anything that starts below the fold holds its entrance until it is 35% in view, then plays once. Under prefers-reduced-motion every duration collapses to zero and nothing moves.
--dur-instant80msState flips--dur-fast150msHover, border, color--dur-base220msSegment entrance--dur-slow400msSignal bounce and ping--dur-reveal600msSection reveal--dur-sweep2400msSweep across a panel--dur-hero-ring6500msHero ring, breathing dot--easecubic-bezier(0.4, 0, 0.2, 1)Default--ease-risecubic-bezier(0, 0.55, 0.45, 1)Reveal, ping--ease-ringcubic-bezier(0.34, 1.56, 0.64, 1)Overshoot--ease-fallcubic-bezier(0.55, 0, 1, 0.45)Exit.reveal rises 22px over --dur-reveal on --ease-rise; .seg rises 10px over --dur-base. .s1 to .s4 add the staggers below.--stagger-150ms--stagger-2160ms--stagger-3300ms--stagger-4460msBryn watches. You decide the Play. Bryn runs it.
Product h1, as shipped
Every file below is the one the site serves. SVGs carry explicit hex for places that cannot read the tokens.
