Brand Guidelines
The SaasBliss identity, in full.
Logo, color, type, and the design principles behind every page, deck, and deliverable we ship. Use this as the single source of truth when building anything under the SaasBliss name.
Name
SaasBliss
SaasBliss Growth Agency
Tagline
Architecting Exponential Growth for Software, Apps & SaaS.
Positioning
SaasBliss fuses Lead Generation, Performance Marketing, Fractional CMO, and Fractional CTO leadership to scale software companies.
01 / Logo
The mark
The mark is a rounded square containing an ascending trend line that resolves into an arrowhead, literally “up and to the right.” It is drawn as a single continuous stroke and, in interactive contexts, animates as a looping draw-in to reinforce compounding growth.
Primary mark — Foreground on Background
Reversed mark — Background on Foreground
Clear space = mark height on all sides. Minimum size: 20px.
Standard lockup: mark + wordmark, set in Geist Mono Semibold, baseline-aligned, 8px gap between mark and text.
Use the mark on Background (#FAFAFA) or Surface (#FFFFFF) only.
✕Never place the mark on busy photography or gradients.
Maintain clear space equal to the height of the mark on all sides.
✕Never stretch, skew, rotate, or recolor the mark outside the palette.
Pair the wordmark with Geist Mono, semibold tracking-tight.
✕Never substitute another typeface for the wordmark.
Use the single-color foreground mark for all standard placements.
✕Never recreate the trend-line glyph freehand, it must trace the source SVG path.
02 / Color
A restrained, high-contrast palette
Seven tokens, no more. The system is deliberately monochrome so that product screenshots, client logos, and data visualizations remain the most colorful thing on any page.
Foreground
#141414--foreground
Primary text, headings, logo fill, primary buttons.
Background
#FAFAFA--background
Page canvas. Slightly off-white, never pure white, to keep contrast soft.
Surface
#FFFFFF--surface
Elevated panels and alternating section bands over the background.
Muted
#5C5C5C--muted
Secondary copy, captions, eyebrow labels, inactive nav states.
Line
#E4E4E4--line
All borders, dividers, and the 48px background grid.
Accent
#141414--accent
Interactive emphasis; mirrors Foreground for a monochrome system.
Accent Soft
#F0F0F0--accent-soft
Hover states and subtle fills behind nav items and chips.
Usage rule
Foreground and Accent are the same value (#141414) by design, there is one interactive color in the system, not a separate brand color. Reserve pure white (Surface) for cards and panels that need to lift off the Background; never use it as the page canvas itself.
03 / Typography
Quicksand for voice, Geist Mono for structure
Quicksand carries every headline and paragraph, rounded, approachable, and legible at large display sizes. Geist Mono is reserved for structural elements: eyebrows, labels, step numbers, code, and the wordmark, signaling “system” wherever it appears.
Primary — Quicksand
Aa Bb Cc 123
Google Font, variable weight, used for all headings and body copy.
Structural — Geist Mono
Aa Bb Cc 123
Used for eyebrows, the wordmark, nav labels, stat counters, and code.
Architecting Exponential Growth.
Designed for the Tech Era.
Four disciplines, one growth team.
Lifecycle & RevOps
Systems-led marketing built for ARR and NRR, not vanity metrics.
Brand Guidelines
400
Regular
Body copy, long-form paragraphs.
500
Medium
Nav links, buttons, form labels.
600
Semibold
H2–H4 headings, card titles.
700
Bold
H1 / display headlines only.
04 / Design Principles
How we design
Systems, not decoration
Every visual element maps to a real system: the logo trend line is an actual growth curve, the grid background mirrors a dashboard canvas. We don't add ornament that doesn't carry meaning.
High-contrast monochrome
The palette is intentionally restrained, near-black on near-white, so that data, charts, and client logos supply the color. This keeps the brand credible next to enterprise software UI.
Precision over noise
Generous whitespace, 2xl radii, and 1px hairline borders (var(--line)) give every surface room to breathe. Density is reserved for data, never for chrome.
Operator tone
Motion, copy, and layout all read as built-by-operators: sparse, confident, no stock-photo gloss. Diagrams animate only to demonstrate a mechanism (a funnel dropping, a radar sweeping).
Layout & component defaults
Container
max-w-6xl, 24px side padding
Radius
rounded-2xl (16px) for cards, rounded-full for pills/buttons
Borders
1px solid var(--line), never a shadow-only edge
Section rhythm
py-20, border-t between stacked sections, alternating Background / Surface
Motion
Animation is purposeful, never decorative: a draw-in trend line, a funnel dot falling through stages, bars growing to a value, a radar sweep. Every motif illustrates a real mechanism from the product or the funnel it represents. All motion respects prefers-reduced-motion and falls back to a static, fully legible state.
05 / Voice & Tone
How we sound
SaasBliss writes the way its operators talk to clients: direct, specific, and allergic to filler.
Direct
Lead with the outcome or the number. Avoid throat-clearing openers like "In today's landscape..."
Operator-credible
Write like someone who has run the funnel, not advised on it. Prefer concrete mechanisms over buzzwords.
Evidence-led
Back claims with a metric, timeframe, or named framework wherever possible.
No filler
Cut hedging language, exclamation points, and generic SaaS marketing clichés ("game-changing," "synergy").
Free Growth Audit
Building something with the SaasBliss brand?
Reach out for logo files, extended assets, or a co-marketing review.