Source of truth for all product brands — February 2026
SYMPH (Master Brand)
├── Overture by Symph (Dashboards & Analytics)
├── Worklane by Symph (Workflow & Approvals)
├── Clocklane by Symph (POS & Timesheets)
├── Vector by Symph (Project Management)
├── Alignly by Symph (HR & People Ops)
├── Encore by Symph (Client Portal)
└── The Agency by Symph (Custom / Catch-all)| Aspect | Implementation |
|---|---|
| Visual Identity | Each product is INDEPENDENT (own fonts, colors, voice) |
| Endorsement | All use "[Product] by Symph" attribution |
| Mission | All united by "Software that fits" promise |
| Pricing | Each is standalone, NOT a bundled suite |
Do NOT frame products as:
Each product stands alone with individual pricing and identity.
For decades, businesses had two choices:
We're creating a third option: Personalized SaaS. Software that fits how you work. Built fast. Paid monthly.
| Principle | Requirement |
|---|---|
| Breathing room | Minimum 24px padding on containers, 16px between elements |
| Typography-led | Headlines do the work, minimal decorative elements |
| Honest UI | No dark patterns, clear action labels, obvious outcomes |
| Calm confidence | No unnecessary animation, no attention-grabbing gimmicks |
| Immediate clarity | User knows what the product does in < 3 seconds |
| Behavior | Standard |
|---|---|
| Transitions | 200-300ms, ease-out curve |
| Loading | Skeleton screens, not spinners |
| Hover states | Subtle shift (opacity or slight lift), never dramatic |
| Error messages | Human language, suggest fix, never blame |
| Success states | Brief confirmation, then get out of the way |
| Empty states | Illustrated, encouraging, clear next action |
| Principle | Standard |
|---|---|
| Verb-forward | "Track time" not "Time tracking solution" |
| Short > long | If 3 words work, don't use 10 |
| Human | Read aloud test — would a person say this? |
| Specific | Numbers and examples, not "many" or "various" |
| No jargon | A smart 16-year-old should understand |
Never use: seamless, robust, comprehensive, leverage, cutting-edge, streamline, optimize, synergy, holistic, ecosystem, "Unlock your potential", "take it to the next level", exclamation points in UI copy.
| Element | Hex Value |
|---|---|
| Background | #0a0a0a |
| Surface/Cards | #1a1a1a |
| Primary Accent | #0077FF (Symph Blue) |
| Text Primary | #ffffff |
| Text Secondary | #a0a0a0 |
| Borders | #2a2a2a |
Format: [Product name] by Symph
Typography: Product's own font, Regular weight, 14px
Placement: Website footer, Product settings/about page
Clear space: Minimum 16px on all sides
All CSaaS products use one easing curve:
/* The Symph Easing — use everywhere */
cubic-bezier(0.16, 1, 0.3, 1)Why this curve: Fast start (feels responsive), gentle land (feels polished), never bouncy (bouncy undermines premium).
| Interaction Type | Duration | Use Case |
|---|---|---|
| Micro | 150-200ms | Button states, toggles, small feedback |
| Standard | 200-300ms | Hovers, reveals, panel opens |
| Emphasis | 400-500ms | Page transitions, modal opens |
| Dramatic | 600-800ms | Hero reveals, scroll animations |
| Stagger delay | 50-100ms | Between sequential items |
| Element | Hover Behavior | Don't |
|---|---|---|
| Buttons | Lift 2-4px + subtle shadow | Scale up, color flash |
| Cards | Lift 4-8px + border highlight | Dramatic shadow, bounce |
| Links | Underline slide or color shift | Flash, blink |
| Icons | Subtle scale (1.05x) or color | Spin, bounce, shake |
| Images | Slight zoom (1.02x) or overlay | Heavy zoom, blur |
/* Standard button hover */
.button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.12);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Standard card hover */
.card:hover {
transform: translateY(-4px);
border-color: var(--brand-color);
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}| Rule | Specification |
|---|---|
| Trigger point | 20-30% element visibility |
| Direction | Always UP (translateY), never sideways |
| Distance | 20-40px translate (subtle, not dramatic) |
| Combine | Fade + translate together |
| Once only | Don't re-animate on scroll up |
| Stagger | 50-100ms between sibling elements |
| State | Behavior | Never |
|---|---|---|
| Page load | Skeleton screens matching layout | Spinners, blank screens |
| Button loading | Subtle pulse or inline spinner | Disable without feedback |
| Data fetch | Skeleton + subtle shimmer | "Loading..." text |
| Form submit | Button shows progress | Full-page overlay |
| Principle | Application |
|---|---|
| Drama & Impact | Bold typography, dramatic reveals, pause moments |
| Storytelling | Scroll = narrative progression |
| Speed | Fast load (<3s), smooth interactions |
| Emotion first | Make them FEEL before they think |
| Scarcity | Every element earns its place |
| Element | Specification |
|---|---|
| Backgrounds | Dark by default (#000 or #18181b) — signals premium |
| Typography | Large, confident (48-120px headlines) |
| Letter-spacing | Tight (-0.03em to -0.05em) on headlines |
| Whitespace | 50%+ of viewport should be empty |
| Section padding | 120-180px vertical minimum |
| Imagery | Real photos, candid, no stock |
1. HERO — One statement, one action, price anchor
Background: Black
2. THE SHIFT — Old way vs our way (cost comparison)
Background: White
3. SOCIAL PROOF — Clients, numbers, trust signals
Background: Dark (#18181b)
4. HOW IT WORKS — 3 steps, visual, simple
Background: Black
5. BOLD STATEMENT — Full viewport, single powerful message
Background: White
6. TEAM (optional) — Real humans, candid photos
Background: White
7. PRICING — Clear, subscription-based
Background: Dark (#18181b)
8. CTA — "What would you build?" / Contact
Background: BlackIf your page has 3+ of these, it looks AI-generated:
| Pattern | Why It's Bad |
|---|---|
| Gradient blobs/orbs | Screams "AI template" |
| Purple + blue gradients | #1 AI cliché |
| Floating UI mockups | Every SaaS template |
| Feature grids with icons | Looks templated |
| "Revolutionize your workflow" | Empty, overused |
| Generic stock illustrations | Faceless, untrustworthy |
| Bouncy animations | Undermines premium |
| "Sign up" / "Learn more" CTAs | No value proposition |
| Dense text blocks | Nobody reads them |
Headlines:
✓ "Software that fits your business."
✓ "That system you never had time to build?"
✓ "Stop adapting to your software."
✗ "The ultimate software solution for your enterprise needs"
✗ "Revolutionize your workflow with our platform"CTAs:
✓ "Start building →"
✓ "Tell us your problem →"
✓ "Get a quote →"
✗ "Learn more"
✗ "Sign up"
✗ "Submit"| One Word | Clarity |
| Personality | The Conductor |
| Belief | Data should illuminate, not overwhelm |
| Logo Concept | The Lens — aperture/viewing lens that reveals clarity |
| Primary Color | #0891b2 (Cyan) |
| Font | Fraunces (display) + Inter (UI) |
| Primary Tagline | "Your business at a glance." |
| Voice | Confident, composed, clear, elegant |
| Vocabulary | clarity, signal, insight, surface, illuminate |
| One Word | Flow |
| Personality | The Traffic Controller |
| Belief | Work shouldn't get stuck |
| Logo Concept | The Gate — ajar portal representing approval workflows |
| Primary Color | #9333ea (Purple) |
| Font | DM Sans (single font family) |
| Primary Tagline | "Approvals on autopilot." |
| Voice | Direct, efficient, active, confident |
| Vocabulary | route, flow, move, assign, automate, done |
| One Word | Momentum |
| Personality | The Forward Scout |
| Belief | Projects fail from lost momentum, not bad ideas |
| Logo Concept | The Stack — three offset layers (NOT an arrow) |
| Primary Color | #ea580c (Orange) |
| Font | Space Grotesk |
| Primary Tagline | "Move fast. Ship faster." |
| Voice | Bold, action-biased, forward, encouraging |
| Vocabulary | ship, forward, momentum, milestone, velocity |
| One Word | Belonging |
| Personality | The Culture Keeper |
| Belief | HR is about humans, not headcount |
| Logo Concept | The Team — three organic figures with elevated center |
| Primary Color | #059669 (Emerald) |
| Font | Nunito |
| Primary Tagline | "Your people, organized." |
| Voice | Warm, human, thoughtful, grounded |
| Vocabulary | people, team, belong, grow, connect, thrive |
| One Word | Fairness |
| Personality | The Timekeeper |
| Belief | Accuracy enables fairness |
| Logo Concept | The Tick — bold checkmark with tally notch (NOT a clock) |
| Primary Color | #dc2626 (Red) |
| Font | IBM Plex Sans + IBM Plex Mono (for data) |
| Primary Tagline | "Every dollar. Every hour." |
| Voice | Reliable, precise, honest, fair |
| Vocabulary | track, count, accurate, fair, log, reliable |
| One Word | Return |
| Personality | The Host |
| Belief | Client relationships begin at delivery, not end |
| Logo Concept | The Threshold — two overlapping frosted glass planes |
| Primary Color | #0d9488 (Teal) |
| Font | Cormorant Garamond (display) + Inter (UI) |
| Primary Tagline | "The front door for your clients." |
| Voice | Polished, welcoming, anticipatory, premium |
| Vocabulary | welcome, return, experience, space, invite |
| One Word | Possibility |
| Personality | The Builder |
| Belief | When it doesn't exist yet, we build it |
| Logo Concept | The Living Wordmark — typography-only with elevated "The" + gradient dot |
| Primary Color | None (Black/White only) |
| Font | Geist + Geist Mono |
| Primary Tagline | "Software that fits your business." |
| Voice | Confident, direct, human, premium |
| Vocabulary | build, ship, create, customize, personalize |
| Product | Essence | Color | Font | Tagline |
|---|---|---|---|---|
| Overture | Clarity | #0891b2 | Fraunces + Inter | "Your business at a glance." |
| Worklane | Flow | #9333ea | DM Sans | "Approvals on autopilot." |
| Vector | Momentum | #ea580c | Space Grotesk | "Move fast. Ship faster." |
| Alignly | Belonging | #059669 | Nunito | "Your people, organized." |
| Clocklane | Fairness | #dc2626 | IBM Plex | "Every dollar. Every hour." |
| Encore | Return | #0d9488 | Cormorant + Inter | "The front door for your clients." |
| The Agency | Possibility | B&W | Geist | "Software that fits your business." |
| Product | Style | Concept | Key Element | Motion |
|---|---|---|---|---|
| Overture | Geometric + Glass | The Lens | Aperture with reveal dot | Iris opens on hover |
| Worklane | Minimal Geometric | The Gate | Ajar gate with hinge | Gate swings open/closed |
| Vector | Stacked Layers | The Stack | Three offset rectangles | Layers slide on hover |
| Alignly | Organic + Hierarchy | The Team | Elevated center figure | Breathing animation |
| Clocklane | Bold Symbol | The Tick | Checkmark with notch | Draws itself on complete |
| Encore | Layered Depth | The Threshold | Two frosted planes | Parallax on hover |
| The Agency | Typography-Only | Living Wordmark | Elevated "The" + gradient dot | Pulse + letter-spacing |
| Standard | Implementation |
|---|---|
| Morph-Marks | Each logo has defined states (idle, hover, loading, action) |
| Tactile Materiality | Liquid glass (Overture), frosted (Encore), gradient (Agency) |
| Kinetic Motion | Every logo has motion specification — not static |
| Micro Detail Anchor | Each has ONE memorable element that aids recognition |
| Responsive System | 4 versions per logo (Full → Compact → Micro → Minimal) |
| Z-Axis Ready | Depth specified for AR/VR contexts |
| Product | Primary | Hover | Light |
|---|---|---|---|
| Overture | #0891b2 | #0e7490 | #22d3ee |
| Worklane | #9333ea | #7e22ce | #c084fc |
| Vector | #ea580c | #c2410c | #fb923c |
| Alignly | #059669 | #047857 | #34d399 |
| Clocklane | #dc2626 | #b91c1c | #f87171 |
| Encore | #0d9488 | #0f766e | #2dd4bf |
| The Agency | #000000 | #18181b | #ffffff |
| Font | Source |
|---|---|
| Fraunces, Inter, DM Sans, Space Grotesk, Nunito, IBM Plex Sans/Mono, Cormorant Garamond, JetBrains Mono | Google Fonts |
| Geist, Geist Mono | Vercel (vercel.com/font) |
Logo Files:
Brand Assets:
Marketing Templates: