Most AI products in 2026 sound the same — Inter, purple gradient, breezy marketing voice, a rounded icon tile over every heading. ETS serves pastors, and pastors notice when something has nobody home. v3 is the rebuild: warm surface, editorial type, color used like it means something, and a voice that can sit at a kitchen table.
ETS is a tool for the small communications team behind a local-church pastor. We turn one sermon — the Sunday sermon — into the blog, the email, the five social posts, the discussion guide, and the kids' sheet that the team would have rebuilt by hand on Tuesday. We do it in twelve minutes. We do it in your pastor's voice. We do it because the message was already good — it shouldn't need to be made from scratch every Monday.
The brand serves the same purpose. It's designed to feel like a thoughtful neighbour, not a SaaS pitch. Warm cream, not electric purple. A serif that reads like a book, not a system font that reads like a setup screen. A small accent of warm red that does what punctuation does — one mark, in the right place, to make the sentence land.
“Your pastor already did the hard work. We just keep it working all week.”
ETS sounds like a thoughtful church-comms director who knows the pastor personally. Plain words. No SaaS vocabulary. No exclamation points. Specific instead of general. Warm without being twee.
We're on your Monday with you, not pitching at you.
Direct sentences. No hedging. No qualifiers we don't mean.
We respect the work of the pulpit. We never replace it.
Numbers, names, exact times. “Twelve minutes,” not “quick.”
“If a pastor wouldn't say it from a pulpit, ETS doesn't say it on a screen.”
The logo is a fixed, professionally-designed asset — wordmark plus icon, locked. It ships in two color ways: the primary (stacked, lime + charcoal) and the horizontal header (violet + charcoal, with a dark variant for use on charcoal / violet / spark surfaces). Always use the supplied PNG.
The logo holds up across the palette. Use the primary (lime/dark) on light surfaces; switch to the dark-mode variant on charcoal and deep-violet panels.
Color in ETS is a role, not a decoration. Every value below earns its place by meaning something on the page — violet means brand, lime means “the one thing,” the cream surface means “you are home.” All values specified in OKLCH so lightness is perceptually uniform across hues.
Every hue is tied to a specific meaning — violet for brand, lime for the one accent, spark for section rules. Decoration is reserved for illustration.
The base palette is warm cream and tinted neutral on purpose. When violet or lime show up, they land — not because they're loud, but because the rest of the page is quiet.
Every text pairing in the system clears WCAG AA at minimum (4.5:1 body, 3:1 for ≥24px text). Never use color alone to convey meaning.
Designers pick a role, not a hex. The role maps to a token, which maps to a value that can change without breaking the page. The table below is the canonical assignment.
Violet is the brand. Lime is the punch — one moment per surface, never more. Below: how each plays the role it owns.
The full perceptual range of the brand hue. 500 is canonical; 700 is the hover; 900 is the editorial deep panel.
On a 75° axis with low chroma (0.005–0.025) so they read as neutral but carry the brand quietly. Every “gray” in ETS has hue.
Every text-on-color pair below has been measured against WCAG 2.1 AA. The right column is the actual ratio, the badge is the tier it clears. AA is the floor; we hit AAA wherever we can.
What it looks like when paragraphs land on each colored panel. Body always uses the matching --c-on-* token — never gray, never a guess.
Drop in your sermon. Twelve minutes later, nine pieces of content land in your team's review queue.
Drop in your sermon. Twelve minutes later, nine pieces of content land in your team's review queue.
Drop in your sermon. Twelve minutes later, nine pieces of content land in your team's review queue.
Outfit Variable carries everything — display, headlines, body, UI. Fraunces appears in italic only, for flourish words and the single pull-quote per section. JetBrains Mono is reserved for editorial metadata (bylines, version stamps).
Fraunces shows up here, in the soft places — italic words that warm a headline, a pull-quote that asks to be read slowly. Two per section, maximum.
Visual language is the grammar that connects every screen — the fingerprints that tell a pastor “this is ETS” before the wordmark loads. Five signatures, one imagery policy, one composition rule.
Repeating moves that show up in every section. None is loud alone, but together they read like one hand made the whole page.
A short warm-toned rule under every section headline. The brand's exclamation mark — used once per section.
A row of mono text above every section. Section number, group, and one editorial fact.
The one dark surface per section. Pull-quotes, testimonials, the closing CTA.
One italic accent word per headline, set in violet-700 or lime depending on surface. Earns the eye's attention without shouting.
Three big numbers across the bottom of editorial sections. Tabular figures so the columns line up — the data carries because the type behaves.
A row of mono metadata under a figure — file name, dimension, source. Editorial detail, never decoration.
Four layers, never more. Page sits at the bottom. Section alt breaks rhythm without leaving the family. Cards lift on top. Deep panels are the rare, intentional moment.
Real moments, not stock. A pastor mid-sentence, a comms director at a laptop on a Tuesday morning, a kid bringing the discussion guide home. Photos sit inside flat color plates with a 16px radius. Type never lands directly on a photo — it lands on the plate beside or below.
A real moment, on a plate. Real teaching moment, inset 24px inside a paper-deep plate, mono caption below. Type lands beside the photo, never on it.
Stock shoot, full-bleed. Stock-photo “diverse smiling team,” full-bleed, headline overlaid on the face. Every AI app does this. ETS doesn't.
ETS doesn't use illustration. It's the second-most-overused AI tell after the violet gradient — a friendly squiggle, a floating laptop, a hand holding an iPhone. The brand is built on real type, real photography, and the icon system. If a moment can't be told in those three, it probably shouldn't be on the page.
Dividers do the work of paragraphs — they pace the page. ETS ships five, ordered from quietest to loudest. The rule: start at hairline and only escalate when meaning requires.
The same five dividers, doing their actual jobs inside a fragment of editorial copy.
ETS turns one sermon into nine pieces. Drop in the file. Twelve minutes later, the week is in your review queue.
The dividers ETS doesn't use. If you find yourself reaching for one of these, the answer is more whitespace, not more decoration.
Motion in ETS does one of four jobs: standard (in-view change), entrance (arrival), exit (departure), or emphasized (the one big moment). Each has a curve, a duration, a use case. Nothing decorates. Nothing loops in the background.
The motion the user barely notices. Button press, toggle flip, dropdown open. Designed to stay out of the way.
The motion that earns its weight — significant arrivals, success moments, the rare hero reveal. Used sparingly.
Each card shows the cubic-bezier curve plotted, a live demo of the curve in motion, the CSS token, and the use case. Click any demo to replay it.
Element stays visible from start to finish. Use for moving rows, expanding tiles, sorting, color shifts, focus rings.
Element appears, then settles. Use for fade-in, modal-in, toast-in, dropdown-open, anything that wasn't there a moment ago.
Element accelerates out of view. Use for modal-close, toast-dismiss, route-exit — anything leaving permanently.
Reserved for the few moments worth pausing for — first-run reveal, success state, the one big motion per page. Earns attention.
Five steps, perceptually scaled. Larger movements take longer — but never longer than 480ms unless the motion is the moment (hero, success, first-run). Bars below are scaled to actual ms.
The same tokens, applied to real ETS UI. Each demo runs the exact easing + duration shown in its caption.
cubic-bezier(0.68, -0.55, 0.265, 1.55)ease-elastictransform: scale(1.02) on hoveranimation-iteration-count: infiniteduration > 480ms (except hero)bounce / spring / overshootany ambient motion that runs without user inputv1 ran six concurrent ambient animations — pulse, breathe, drift, float, shimmer, marquee. v3 ships zero. Motion happens when a user does something, not when the page exists.
Before shipping any new transition, run it through these four questions. If any answer is no, the motion gets cut or fixed.
Does the motion solve a problem the user has? (Show state, hint at what's next, confirm an action.) If it's only decoration, cut it.
User-input motion (button press, toggle) must use a fast-* duration. The user shouldn't have to wait for the UI to catch up.
Same family of motion uses the same curve and duration. A modal closing should match the modal opening. Don't mix.
The best motion goes unnoticed. If users mention it, it's probably too much. Test it three times in a row — does it start to annoy?
Every motion in ETS respects prefers-reduced-motion: reduce. When that media query matches, all transitions become instant. Toggle macOS System Settings → Accessibility → Display → Reduce Motion and every demo on this page will skip the animation entirely. No exceptions.
A 4px base unit. Every measurement collapses to a token — no 17px, no 22px, no eyeballed value. Type, space, radius, and breakpoint all share the same grid. The system below is the load-bearing skeleton beneath every screen in ETS.
Eleven tokens on a 4px base, grouped into small (0–8px, inside components), medium (12–32px, between components in a card), and large (48–192px, layout-level breaks).
Four radii. Pills (r-pill) are reserved for buttons and badges. Cards and inputs use r-3; section panels use r-4.
Four breakpoints, named for the device, sized for the content. Content never exceeds 1280px — the page breathes past that point.
Boxes constrain to one of these four ratios. Anything else and the page loses its key lines.
The tokens above are the vocabulary. These five rules are how to compose with them.
Elements that share spacing read as a unit. A table of rows uses one consistent gap; a nav bar uses one consistent item gap.
Distance creates meaning. Place related content closer together, related-but-distinct content further apart.
Larger margins around heavier elements pull the eye. Use whitespace as part of the hierarchy, not just type weight.
Repeating spacing patterns (in a list, a grid) build a scanable cadence. Vary spacing only when meaning requires it.
Tokens get you 95% there. The last 5% is the human eye — a 1px nudge is fine if it makes the page balance.
Components are categorized by what they do for the user. Buttons don't scale on hover. Inputs don't glow violet. Cards don't nest. Every component below is built on the tokens above — no inline magic numbers, no decoration.
Primary action of the surface. Maximum one per view. Color shifts on hover, no scale.
When the icon carries the meaning. Always include an aria-label.
Inline link, always within or directly after a sentence.
Drop in your sermon and we'll handle the rest. See how processing works.
Label sits above as a mono byline. Focus state uses violet-500 ring.
Always with a label. Tap target wraps the label.
Pricing slider — 1 to 9 streams self-serve, contact for 10+.
Inline status label. Always paired with an icon or context, never color-alone.
Status dot. Lime for live/ready, violet for processing, spark for error.
Linear progress. Pair with mono spec row showing step + ETA.
Inline message in flow. Three tones: info (violet), success (lime), critical (spark).
Your sermon will finish processing in about eight minutes.
All nine pieces are in your review queue.
Your YouTube link came back as private. Try again with a public link.
Transient confirmation. Never blocks. Always dismissible by hover-to-pause.
When a list / page has no data. Always offers the next-step CTA, never just “Empty.”
Drop in your first sermon and we'll have your week back in 12 minutes.
One-elevation card. Never nest a card inside a card.
From Sunday, March 24 · Pastor Mark's sermon on Hebrews 11. Ready to post.
Two or more sibling views. Active is violet, inactive is body. No background fills.
The marketing-site header. Logo left, nav center-right, primary CTA right-most.
Sidebar nav row — mono section number on left, label center, indicator right.
The canonical icon mark — the S with its input dot and output arrow — works at 128px and at 16px. Below 32px, the input/output ports become visual noise, so the favicon set drops them and uses a simplified violet square with just the S.
Same asset (/brand-guide/icon-01.png), rendered at seven sizes. Notice how the input/output ports stay legible down to 32px, where they begin to disappear into pixel noise.
Each platform applies its own mask. The PNG files below are the production assets — they ship with the app at the exact dimensions shown.
The canonical icon mark on a flat violet tile. Saturated violet against the grays and bright colors that dominate the iOS home screen is the entire reason the tile reads from across a room.
Stroke-based, 24×24, consistent terminals. Click any tile to copy its filename. Search to filter, toggle dark to preview on the deep panel.
Four mocks of real ETS screens, with the tokens that drive them called out alongside. The brand isn't the brand guide — it's how the product feels under a pastor's hand on a Tuesday morning at 9:14am.
The first impression. Type-led, no photography in the hero, the italic flourish word carrying the brand voice in one moment.
Drop in your sermon. Twelve minutes later, you have five social posts, a blog, a discussion guide, and an email — in your pastor's voice, on your church's brand.
The single input. Either paste a YouTube URL or drop a file. The dashed violet plate signals interactivity without shouting.
The honest progress moment. We tell the user where they are, what's happening right now, and roughly when they'll have it back.
What lands in the team's queue twelve minutes after upload. Each piece is its own row with a status badge and a primary action — no decoration, no card-on-card.
Every screen above uses the same tokens as the brand guide you're reading — same surface colors, same type scale, same buttons, same hairlines, same easings. The brand isn't something we apply to the product after the fact. It is the product, made of the same parts wherever a pastor lands.
Six brands under one roof. Each has its own palette and its own job. The compass is shared: take the operational weight off the people who serve the church. Founded September 2017. 3,000+ churches served cumulative. Zero outside investment.
“Ten years of custom media solutions”
640+ churches by 2036, $18M ARR, 87% retention. The full media + marketing operation that gives every church on the roster back a pastoral FTE's worth of time per year.
“Ten years of Mondays that work harder.”
Drop in a sermon. Twelve minutes later, nine pieces of content land in your team's review queue, in the pastor's voice. Launching August 2026.
“Ten years of quality church templates”
20,000+ browser-editable assets, generated mostly by AI from Squad designs. The obvious starting point for any church doing media on a budget. Funnels 150+ churches/year up to TheSquad.
“Your church deserves a brand that matches its calling.”
AI brand-guide generator. $97 one-time + $7/mo Hub or $97/mo Pro. Funnels to GlowBryt or TheSquad as churches grow. Live at churchmrk.vercel.app.
“Ten years of websites churches don't outgrow.”
Personality-driven site generator. 254 Stitch templates rebuilt at tokenizer_v3 quality. Funnel handoff from ChurchMrk in at least 25 churches by Phase A end.
“An AI designer trained on your church”
The 6th TheSquad product (locked May 2026). AI in-house designer that learns each church's brand from website + IG. Weekly graphics, social, chat-based generation. Domain ChurchCreate.com purchased.
“Give the people who serve the church more time for people ministry.”
The system is the system, not the document. The brand lives in every product surface the moment we apply these tokens. Compare this register against v1 (Inter, gradient) and v2 (impeccable, flat) to see why v3 lands — and feel free to push back on anything that doesn't.