The crossover
One line goes down. The other goes up. That’s the whole business.
The SIUX Studio mark is two strokes that cross: load time falling, revenue rising. It is the X in SIUX, the × in “speed × revenue”, and the chart every customer wants to see.
Concept
Drawn from the chart we sell
Every SIUX report ends in the same picture: as a page gets faster, the money it makes goes up. Plot load time and revenue on the same axis and they cross. We kept only that crossing.
Three readings, one shape
Contextual on purpose
The X in SIUX
The mark is the last letter of the name, so the symbol and the word reinforce each other instead of competing.
The × in speed × revenue
Our whole pitch is a multiplication: performance times analytics. The mark is that operator.
The before / after
A falling line and a rising one is the shape of a good fix. Customers see it in the product, then in the logo.
Construction
Simple enough to draw from memory
- 40 × 40
- Grid. Both strokes span 22 × 18 units and cross at the exact centre.
- 5.5 u
- Stroke weight, about 14% of the grid: heavy enough to survive at 16 px.
- 39°
- Angle from horizontal. Shallower than 45°, so it reads as a trend, not a plus or a cross-out.
- 1.75 u
- Gap on each side where revenue passes over load time. Enough to read as a weave, small enough to hold together at 16 px.
Versions
One mark, every surface
Primary lockup
Default on light backgrounds.
On brand green
Inverse mark for green surfaces.
On dark
AI and product screens.
Monochrome
Print, stamps, one-colour uses.
Mark only
When the name is already on screen.
App icon
Avatars, app stores, integrations.
Scale
Legible from favicon to billboard
At 16 px the gap nearly closes, but the two tones keep the X readable. No detail relies on the gap alone.
Colour & type
Two greens with a job each
siux studio
Plus Jakarta Sans · 600 / 400 · −0.05em
Wordmark in lowercase: “siux” in semibold, “studio” in regular and muted. Lowercase keeps it approachable, closer to a product people use daily than an agency letterhead, and lets the X in the mark carry the weight.
In context
Where people will actually meet it
Favicon & product header
SIUX Studio
@siuxstudio
Speed analytics, in dollars.
Social avatar
App icon & integrations
Explored and dropped
Why not the obvious ideas
A speedometer
Every performance tool uses one. It says “speed” and nothing about money, which is the half that makes us different.
A dollar sign
Says money, but reads as fintech or get-rich-quick, and ignores the performance side entirely.
Rising bars
Our placeholder. Fine, but any analytics product could use it; nothing about it is ours.
Graphic device
The crossing, beyond the logo
The two strokes work on their own as a brand asset: a texture, a loader, a divider and a way to mark the moment that matters in a chart.
Texture
Repeated crossings on brand green, for covers and social.
Loader
The strokes draw and undraw while data loads.
Divider
A small crossing interrupts a hairline between sections.
Chart highlight
Marks the point where speed and revenue cross.
Surfaces & shape
Calm paper, one loud green, one night mode
Default page background.
Secondary panels and quiet fills.
Hero and showcase stages only.
The one loud surface: results, pricing, calls to action.
Reserved for AI.
Corner radius
Borders on paper, shadows only above the grid
Cards sit flat with a hairline border. Only elements floating over graph paper or imagery get a soft shadow, so depth always means “this is on top of something”.
Iconography
Light lines, round ends
Lucide at 1.5 px with round caps and joins. Icons stay thin so the mark is always the boldest stroke on the page. They sit in soft pastel circles, never loose on colour.
- 1.5 px stroke, round caps
- 18 px inside a 36 px circle
- Pastel tint per meaning
- No filled or duotone icons
Data visualisation
Red means today. Green means where you could be.
Bands
Bars
TodayTarget
Numbers
+$1.2k
per month at stake · LCP 4.1 s
Colour has a job
Red only for the problem or “today”, green for the target and gains, neutrals for everything in between.
Always in money
Every chart ends in a dollar figure. Milliseconds are supporting detail, never the headline.
Slim and quiet
Thin rounded bars, hairline axes, no gridlines. The data is the only loud thing.
Motion
Everything moves like a line being drawn
Draw900 ms · ease-in-out
Logo and hand-drawn underlines trace in.
Reveal700 ms · ease-out · 14 px
Sections rise gently as they scroll in.
Stream~1 s · 3 chars / 18 ms
AI answers type out after a short “thinking”.
Progress6 s · linear
Story bars fill; hover pauses.
All motion respects “reduce motion”: it jumps to the final state instead.
Voice
Plain, honest, in dollars
Talk in dollars, not milliseconds
This page costs you about $1,200 a month.
LCP p75 is 4,120 ms on mobile.
Show the assumption
+0.5% to +1.5% more conversions for every 0.1 s, based on Deloitte × Google.
Boost your sales by 300%!
One next step
Fix #1: compress the 1.8 MB hero image on /checkout.
Here are 47 things to optimise.
Why it works
Modern, contextual, memorable
Contextual
It is literally the product’s core insight (speed down, revenue up) and the X in the name.
Memorable
One gesture: two lines, one crossing. Easy to recall, easy to sketch on a napkin or a whiteboard.
Modern
Geometric, round-capped, two-tone flat colour. No gradients or effects needed to look finished.
A system, not just a logo
The crossing becomes a graphic device: chart highlights, loaders that draw the two strokes, section dividers.