The rules for how Loomstrat looks, sounds and ships, across the site, Labs products, Studio proposals and anything with our name on it.
Who it's for
Our team, contractors, partners and press. If you're making something that says Loomstrat, start here.
Logo files
Every approved logo, as SVG and PNG, is in Downloads.
01
Foundation
What Loomstrat is, who we build for, and the beliefs every design and writing decision comes back to.
We work backward from the decision. Everything else is structure built to make that decision easy.
Company
Loomstrat, a software holding company with two arms: Labs and Studio.
Tagline
Strategy, made structural.
Positioning
Editorial-grade software built on one discipline. We skip vanity dashboards and build the tool, or the product, that leads to the next action.
Primary audience
Technical founders and operators who need production-grade software shipped fast and owned outright.
Secondary audience
Teams in B2B SaaS, PropTech, fintech, e-commerce and professional services who use our Labs tools.
Personality
Precise, calm, candid, quietly confident. A senior partner, never a hype machine.
Brand architecture
One master brand, two arms
Loomstrat is always the lead name. The arm follows as a plain descriptor and never gets its own mark.
Loomstrat Labs
The products we own and operate
A portfolio of 6 live SaaS products, plus free decision solvers
Focused, decision-first tools with no signup to try them
Each product carries its own name, endorsed "by Loomstrat Labs"
Loomstrat Studio
The software we build for founders
Production-grade MVPs and custom software
Fixed-scope sprints of 3 to 6 weeks: Brief, Build, Ship
100% repository and IP ownership, zero-technical-debt guarantee
Principles
Four beliefs behind every choice
Decision first
Start with the action a person needs to take, then design back from it. If a chart, page or feature doesn't help that decision, cut it.
Structure over decoration
Grids, hairlines and clear hierarchy do the work. Ornament has to earn its place, and one accent is enough.
Real, sourced, specific
Real numbers, named sources and dated examples. We never pad with claims we can't back up.
You own it
Clients own their code, IP and data. That candour about ownership runs through how we talk, too.
02
Logo
A woven mark and a SemiBold wordmark. Use the supplied files exactly as drawn. Never retype the wordmark or redraw the mark.
2.1 · Anatomy
Three threads on a loom
Two warp threads and one weft, set inside a soft violet tile. Strategy, made structural, reduced to a glyph.
1
TileA 24-unit square with a 7-unit corner radius, filled Loom Violet.
2
Long warpA full-height vertical thread at x 8.5. It stands for the plan.
3
Short warpA half-height thread at 55% opacity. It stands for work still in progress, the part we haven't woven yet.
4
WeftThe horizontal thread that ties the plan to the work. All threads are 2.2 units wide with round caps.
5
Wordmark"Loomstrat" in Manrope SemiBold at −0.03em tracking, outlined. The mark is 1.15× the font size and sits 0.4× away.
2.2 · Versions
Pick the version that suits the background
The full-color logo is the default. Switch to reverse on dark or violet backgrounds, and to one-color only when the medium has a single ink.
Primary · light backgrounds
Reverse · dark backgrounds
Reverse · Loom Violet
One-color ink · stamps, engraving
Stacked · square spaces
Mark · favicon, app, avatar
Wordmark · mark already nearby
2.3 · Clear space
Give it room equal to half the mark
Keep clear space of x on every side, where x is half the mark's height. No text, edges or other logos inside that area.
2.4 · Minimum size
Smaller than this, use the mark alone
200px140px100px · min
Horizontal logo: 100 px wide on screen, 26 mm in print. Below that the wordmark's counters close up.
48px32px24px16px · min
Mark: 16 px on screen, 6 mm in print. At 16 px, keep the 55% short warp. Don't simplify it.
2.5 · Misuse
Don't change the logo
If a layout seems to need one of these, the layout needs fixing, not the logo.
Don't stretch or squash
Don't recolor
Don't rotate
Don't add effects
Loomstrat
Don't retype the wordmark
Don't rearrange the parts
Don't place on busy images
Don't use full color on dark
2.6 · Writing the name
One word, capital L
Correct
Loomstrat
Loomstrat Labs
Loomstrat Studio
Built by Loomstrat Studio
loomstrat.com (only in URLs)
Incorrect
LoomStrat, Loom Strat, Loom-strat
LOOMSTRAT, in copy or as a logo
Loomstrat Lab (singular, use Labs)
Loomstrat's Studio, The Loomstrat Studio
LS or LST as a short form
2.7 · Co-branding
Partner logos sit at equal visual weight
Match the partner logo's optical height to the Loomstrat wordmark's cap height, separate them with a 1 px hairline in Ink at 15%, and keep 2x of space on either side of it. Loomstrat goes first unless the partner is the host.
Partner
Example partner placeholder
03
Color
Deep-navy ink on white, with one violet accent. Use violet with restraint. It marks the one thing on the page that matters most.
3.1 · Core palette
Three colors carry the brand
Click any value to copy it. CMYK values are converted from screen colors, so approve a press proof before any print run.
Accent · actions, the markLoom Violet
HEX
RGB
HSL
CMYK
Text, wordmark, structureInk
HEX
RGB
HSL
CMYK
Primary backgroundPaper
HEX
RGB
HSL
CMYK
3.2 · Proportion
Mostly white, firmly ink, a little violet
Paper 60%
Surfaces 15%
Ink 17%
Violet 6%
3.3 · Supporting palette
Neutrals, surfaces and two signal colors
The neutrals lean slightly violet so they sit naturally next to the accent. Sky and Highlight are for small accents only.
Hover, small violet textViolet Deep
HEX
RGB
HSL
CMYK
Tints, tags, icon tilesViolet Soft
HEX
RGB
HSL
CMYK
Dark heroes, footersNight
HEX
RGB
HSL
CMYK
Cards on nightNight 2
HEX
RGB
HSL
CMYK
Secondary textMuted
HEX
RGB
HSL
CMYK
Captions, labelsFaint
HEX
RGB
HSL
CMYK
Cards on paperSurface
HEX
RGB
HSL
CMYK
Plates, wellsSurface 2
HEX
RGB
HSL
CMYK
Gradient end, dataSky
HEX
RGB
HSL
CMYK
Quote highlightsHighlight
HEX
RGB
HSL
CMYK
3.4 · Gradient
One gradient, for headline accents only
Violet into sky, at 92°. Use it on two or three words of a headline, never on buttons, backgrounds or body text.
Headlines get tighter as they get bigger. Body copy keeps default tracking, a line height of 1.6 and about 65 characters per line.
Display72 / 1.02 · 600 · −0.05em
Strategy, made structural.
Heading 156 / 1.05 · 600 · −0.045em
Ship the MVP in six weeks
Heading 240 / 1.1 · 600 · −0.04em
Brief, build, ship
Heading 328 / 1.2 · 600 · −0.03em
You own the repository
Heading 422 / 1.3 · 600 · −0.02em
Fixed scope, fixed price
Body large19 / 1.6 · 400
We work backward from the decision you need to make, then build only what leads to it.
Body16 / 1.6 · 400
A lead strategist replies to every build brief within 24 hours, with a scoped plan and a fixed price.
Small14 / 1.5 · 500
Updated October 2026 · 9 min read
Label12 · Instrument Sans 600 · +0.12em caps
Loomstrat Studio
Data13 · Fragment Mono 400
CAC payback 7.4 mo · LTV:CAC 4.1
4.2 · Rules
Setting type
Sentence case everywhere
Headlines, buttons and nav use sentence case. Only the small Instrument Sans labels are uppercase.
SemiBold is the headline weight
Use 600 for headings. Save 700 and 800 for numbers in stat blocks, never for long headlines.
Mono means data
Use Fragment Mono for figures, timestamps, tokens and code. Never for whole paragraphs.
05
Visual system
The pieces that make a page feel like Loomstrat without the logo on it: soft cards, hairline grids, flat violet buttons and calm motion.
5.1 · Buttons
One primary action per view
Flat violet with a soft top highlight. Hover darkens it to Violet Deep and slides the arrow 2 px.
Start a build See the Lab
On light
Book a call Run a solver
On night
5.2 · Corner radius
Five radii, matched to size
Bigger surfaces get rounder corners. The mark's own tile uses 7/24, about 29%.
sm · 10px buttons, inputsmd · 13px chips, small cardslg · 20px cards, platesxl · 29px heroes, panelspill · 999px tags, status
5.3 · Graphic motifs
Hairline grids and a single glow
The grid echoes the loom. Use it at 7 to 9% opacity and fade it toward the edges. One soft violet glow per hero at most.
Night grid · 64px, 9%
Light grid · 56px, 8%
Glow · violet at 28–45%
5.4 · Iconography
Line icons on a tile, one stroke weight
Use Lucide line icons. Feature icons always sit on the icon tile: a squircle in the mark's proportions with a soft violet fill, drawn at a 1.75 px stroke. They fill violet on hover. Inline UI icons such as arrows use a 2 px stroke, and check marks 2.5 px. Each service and industry has one icon, used the same way everywhere.
5.5 · Motion
Three easing curves, three speeds
Hover or focus a card to see each curve. Every animation respects the visitor's reduced-motion setting.
Functional · 180ms
cubic-bezier(0.4, 0, 0.2, 1)
Hovers, toggles, buttons. Quick and predictable.
Organic · 320ms
cubic-bezier(0.22, 1, 0.36, 1)
Panels, cards, drawers. Settles gently.
Emotional · 600ms
cubic-bezier(0.16, 1, 0.3, 1)
Page entrances, the logo reveal. Used once per view.
5.6 · Imagery
Show the product and the people
Real product UI
Screenshots of real Labs tools and Studio builds, cropped tight on the part that answers a question. No stock dashboards.
Real people, natural light
Founders and team in their real workspaces. Neutral grade, no heavy filters, no violet color washes over faces.
Diagrams over illustration
Explain with flows, timelines and grids drawn in the brand palette. Avoid 3D blobs, mascots and generic AI art.
06
Voice & tone
We write like a senior partner explaining a plan across the table: specific, plain and confident enough to say no.
Specific
Name the number, the week, the source. "3 to 6 weeks", not "fast".
Plain
Short sentences, active voice, everyday words. Jargon only when the reader uses it.
Candid
Say what we won't do and what something really costs. Trust comes from the trade-offs.
Calm
No hype, no exclamation marks, no countdowns. Confidence comes from proof.
6.1 · In practice
Before and after
Avoid
We leverage cutting-edge AI to supercharge your digital transformation journey!
Vague, inflated and says nothing a reader can check.
Write
We scope, build and ship your MVP in 3 to 6 weeks. You own every line of code on day one.
A number, a promise and a benefit, all checkable.
Avoid
Unlock powerful insights with our robust analytics dashboard.
A dashboard is a means. What decision does it help?
Write
See which channel to cut this month, and what that frees up for the one that works.
Starts from the decision the reader is trying to make.
Avoid
Oops! Something went wrong. Please try again later.
Cute, unhelpful and gives no next step.
Write
We couldn't send your brief. Check your connection and resend it. Nothing you typed was lost.
What happened, what to do, and what's safe.
6.2 · Lexicon
Words we use, and words we don't
Use
decision-firstproduction-gradefixed scopeyou own itbuild briefsprintsolvershipstructuralsourced
Brand guidelines · v1.0
Primary · light backgrounds
One-color ink · stamps, engraving
Stacked · square spaces
Mark · favicon, app, avatar
Wordmark · mark already nearby
LinkedIn, X
App, favicon
