A bryn is a hill. From the high ground you see the whole field before you move, and every choice on this page serves that one job: a Bryn surface shows you what a buyer did and what to do about it, with nothing in the way. Every mark, token, and idiom here 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.
The mark is a figure on a hill, watching the horizon: the whole product in one glyph, someone who sees the field before they move. The hill fills with the stones gradient, the brand purple family stepped from soft to tint, and figure, ridge, and horizon line draw in brand purple on light and dark grounds alike. The mark goes white only when it sits on the brand drench.
One mark, one colour. Inline as <use href="#horizon">, it binds figure, ridge, and horizon line to currentColor, and that colour is brand purple on light and dark grounds, white on the drench. The standalone SVG pins the same paths in brand purple, the mark exactly as the lockups draw it, for places that live outside the page CSS.
symbol#horizon ⬩ 300 × 300
bryn-lockup-civic-ink.svg
bryn-lockup-civic.svgThe product leads and the company signs it. Glyph 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.
BRYN ⬩ by CivicThe company stands behind the product, so its mark rides the Company menu at 18px and links to civic.com. Use civic-mark.svg as it ships: it's drawn in currentColor, so it takes the ink of its surface.
civic-mark.svg ⬩ currentColorOne glyph, two cuts: in full, with its hill, it's brand purple on light and dark grounds in the header, footer and heroes; as its lines alone, it's border-strong when it fades into a watermark and white on the drench.
Bryn delivers revenue.
Watermark, border-strongBryn delivers revenue.
Drench glyph, on-brandThe mark reads as a figure watching, and it needs room to do that. The 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 the glyph's height, 4x, clear on every side.
x = head Ø 76 / 300 box = 0.25 × mark width ⬩ lockup clear = glyph height = 4xEach size is tied to a job on the page, so the mark is always as loud as its role and never louder.
.nav-civic__mark.brand__glyph.glyph-watermark.drench-glyphWhat you download is what shipped: every file here is the one the site serves. The SVGs carry explicit hex so they hold their colour anywhere, with or without the stylesheet.
horizon-mark.svg
civic-mark.svg
civic-mark.svgbryn-lockup-civic-ink.svgbryn-lockup-civic.svg
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.svg
icon-192.png
icon-512-maskable.png
apple-touch-icon.png
og-bryn.pngColor on a Bryn surface means something every time it appears. Warm paper carries the reading in the light register and deep violet-black carries it in the dark, and each accent does exactly one job: purple is the impact, teal is the signal Bryn caught, coral is the cost of waiting. Light is the base; dark applies through data-bryn-theme="dark" on .bryn-site, any band goes dark on its own with data-band="dark", and app figures carry data-scheme="site" to read in the site theme wherever they sit.
Bryn delivers revenue.
The outcome is the point, so the delivered word renders brand purple. Buttons, the drench, the hill fill, the noun the hero lands on.
--brandResolution, live data, the thing Bryn saw. Teal marks the moment a visitor becomes an account, so it lights the hit in a ledger, the numeral in a kicker, the tick in a progress track.
--signalEvery minute between the signal and the action costs pipeline. Coral names that cost: the watching clock, the template flag. Sparse by design.
--warnThe bright values carry fills and marks; the ink values carry text, so an accent stays readable on paper-light ground and steps up to the bright value on dark.
--brand#7C3AED--brand-hover#6D28D9--brand-soft#9993FF--brand-shade#3E1973--brand-tint#1E1033--brand-ink#5B1FA8text ink--signal#2FD9C2--signal-soft#7FF0E2--signal-ink#0C6D60text ink--warn#FF7E5F--warn-ink#A5330Etext ink--brand#7C3AED--brand-hover#6D28D9--brand-soft#9993FF--brand-shade#3E1973--brand-tint#1E1033--brand-ink#9993FF→ --brand-soft--signal#2FD9C2--signal-soft#7FF0E2--signal-ink#2FD9C2→ --signal--warn#FF7E5F--warn-ink#FF7E5F→ --warnThe ground is warm rather than white so a page reads like paper, and the ink steps from text to secondary to muted so hierarchy comes from weight of colour before it comes from size.
--bg#FAF9F5--bg-alt#F3F1EA--surface#FFFFFF--surface-alt#F1EFE7--border#E7E4DB--border-strong#C7C2B3--text#211B12--text-secondary#5B5541--text-muted#6A6249--bg#07050E--bg-alt#0C0918--surface#191327--surface-alt#120C20--border#2C2444--border-strong#3D3360--text#E2E8F0--text-secondary#94A3B8--text-muted#7B8794Purple is where a page lands, so everything on it reads white: text at full, secondary lines dimmed to 90%. The drench adds a radial white sheen at 18% from the lower right, which gives the close depth with one colour.
The split is the point: a reader should always know whether we're talking or Bryn is. Geist carries what we say, headings, ledes, prose, every stance. Geist Mono carries what the product says, readouts, cites, chips, stamps, Play names, log lines, byte-exact. The scale is fluid and ramps again above 90rem, body letter-spacing runs at -0.005em site-wide, and the numbers below are the 1440 landing.
See who's on your site. Act while they're still looking.
Run #0001 ⬩ demo.follow-up ⬩ 10:02 AM → 10:06 AM
Each stance tightens as it grows: the bigger the line, the heavier the weight and the closer the tracking, so a hero lands like a statement and body copy reads like a page.
Bryn.
See who's on your site.
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
A Bryn surface should feel like an instrument panel you trust: labelled, seamed, quiet. Mono uppercase stamps at 0.08em tracking name what you're looking at, 1px hairlines seam the bands, and the hill punctuates a section the way a horizon punctuates a view. Elevation is one hairline and a soft shadow, so the evidence carries the weight and the card stays out of its way.
A label in the product's own hand, so you know which register you're reading before you read it. Uppercase 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.
card-ord ⬩ fig-stamp ⬩ pg-stampThe panel frames evidence, so it holds the eye on what's inside it. Surface, 1px border, 20px radius, 24px padding, the small shadow. Adjacent bands seam with a 1px hairline; a dark band swallows the seams around it.
fig ⬩ radius-lg ⬩ shadow-smChips read the way a Play reads, behavior then window, left to right. Mono at step -2 with a border-strong edge and a teal arrow.
chip-pillOne action in a row gets the brand; the alternative stands beside it without competing. Semibold at step 0, 12px by 32px padding, 11px radius, 1px press. Primary is the brand fill; ghost is transparent with a border-strong edge.
btn--primary ⬩ btn--ghostThe hill is the brand's horizon, and it does a different job in each place it appears: atmosphere behind a hero, a divider between sections, texture across a quiet stretch. Each piece ships in light and dark. The divider is the cheap one and can repeat down a long page; the signal line traces the nearest ridge in teal, the caught signal drawn onto the landscape.
hill-horizon-hero-light.svg ⬩ hill-horizon-hero-dark.svghill-divider-light.svg ⬩ hill-divider-dark.svghill-texture-light.svg ⬩ hill-texture-dark.svgMotion on a Bryn surface means something arrived; it's a signal, so it plays once and then holds still. Content enters with a 22px rise over 600ms on the rise curve, staggered in four steps, and anything below the fold waits until it's 35% in view before it plays. Under prefers-reduced-motion every duration collapses to zero and the finished frame is the resting state.
Each duration is sized to what it carries: a state flip is instant, a hover is quick, an entrance takes long enough to register, and the hero ring breathes slowly enough to read as alive rather than busy.
--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 dotThings arrive decisively and leave quickly. The rise curve lands content with weight, the ring overshoots because a caught signal has energy, and the fall curve clears the way.
--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.Staggers let a section arrive in reading order, stamp first and evidence last, so the eye is led rather than flooded.
--stagger-150ms--stagger-2160ms--stagger-3300ms--stagger-4460msEvery Bryn surface has two speakers, and a reader should always know which one is talking. We write the stance: direct, plain-spoken, outcomes first. Bryn writes the record: Play names, readouts, log lines, byte-exact and in mono.
Identification without action is a dashboard you will stop checking.
Where Bryn sits, as shippedRun #0001 ⬩demo.follow-up ⬩watched 10:02 AM ⬩logged 10:06 AM
Audit log, Civic's own funnelBryn watches. You decide the Play. Bryn runs it.
Product h1, as shipped