Visibly

Overview

Visibly is a SaaS platform that transforms AI visibility from a black box into actionable intelligence. It monitors brand mentions across five major AI engines (ChatGPT, Claude, Gemini, Perplexity, Google AI Overviews) and delivers specific, implementable fixes to improve citation placement. The design aesthetic is 'Data-Driven Minimalism'—a clean, purposeful interface that prioritizes clarity and precision over decoration. The UI evokes trust and technical competence through a dark-mode-first palette (surface #16171a, on-surface #f4f7fb) anchored by a vibrant indigo primary (#4668e2) that signals actionable insights. Every interaction feels direct and consequential, never frivolous.

The brand voice is authoritative yet approachable, speaking to marketing leaders and brand strategists who understand that AI answers are the new search results. Tone: precise, data-informed, slightly urgent but never alarmist. Example sentence: 'Your brand appears in 34% of Perplexity answers for your category—here's how to reach 60% in 90 days.'

Colors

The color system is built on a dark-first foundation with a single, high-contrast accent. Surface colors form a tight stack: surface (#16171a) is the primary container, surface-container-low (#0f1013) for recessed elements, surface-container-high (#1f2023) for elevated cards, and surface-container-highest (#292a2d) for modals and overlays. On-surface (#f4f7fb) provides the primary text color with 95% contrast against the darkest surface. On-surface-variant (#c4c9d1) is used for secondary text and disabled states, reducing visual weight by ~25%.

Primary (#4668e2) is the signature indigo accent used exclusively for CTAs, active states, and brand-critical interactions. It appears on the 'Run my free scan' button (rgba(70, 104, 226, 1)), the primary navigation highlight, and focus rings (box-

Typography

The type system pairs Satoshi (a geometric, confident sans-serif) for headlines and display text with Inter (a neutral, highly legible humanist sans-serif) for body and UI labels. This pairing creates visual hierarchy through personality rather than weight alone. Display (74px, 700 weight, -0.04em tracking) is reserved for hero headlines and establishes brand presence; headline-lg (48px, 700, -0.03em) anchors section breaks; headline-md (32px, 700, -0.02em) introduces feature blocks. Body-lg (18px, 400, 0em) is used for hero copy and feature descriptions, while body-md (16px, 400) handles standard paragraph text. Label-md (14px, 600, 0.01em) is applied to button text and form labels, with label-sm (12px, 500, 0.02em) for badges and metadata. All headline text uses negative letter-spacing (

Layout

The layout follows a 12-column grid with a max-width of 1280px, centered on the viewport. The spacing scale is semantic: unit (4px) for micro-adjustments, sm (8px) for tight grouping, md (16px) for standard component padding, lg (24px) for section separation, and xl (32px) for major layout breaks. The hero section uses lg spacing (24px) for gutter margins and md (16px) for internal card padding. The navigation bar is fixed at top: 16px with a blur backdrop (backdrop-filter: blur(16px) saturate(140%)) and a semi-transparent background (rgba(15, 16, 19, 0.98)). Section rhythm alternates between full-width containers (1280px) and narrower content blocks (900px–1024px) to create visual breathing room. Input fields and buttons are consistently 44px tall with md (16px) horizontal padding, ensuri

Elevation & Depth

Depth is achieved through a layered shadow system and subtle border treatments rather than color shifts. Level 1 (Base): no shadow, surface color only. Level 2 (Standard Card): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.22), 0 2px 8px rgba(0, 0, 0, 0.18); border: 1px solid #303136. Level 3 (Elevated/Modals): box-shadow: 0 1px 2px rgba(0, 0, 0, 0.24), 0 6px 18px rgba(0, 0, 0, 0.22); border: 1px solid #3f4145. Hover states on interactive elements add a secondary shadow layer (0 4px 12px rgba(0, 0, 0, 0.15)) and shift the background to surface-container-high (#1f2023). Focus states use a 3px ring at r

Shapes

The shape philosophy is 'Functional Geometry'—rounded corners are used strategically to soften hard edges while maintaining a technical, data-driven aesthetic. Buttons and primary CTAs use full (9999px) border-radius for maximum approachability and click-target clarity. Cards and containers use lg (10px) or xl (14px) radius to balance softness with structure. Input fields use full (9999px) radius to match button styling and create a cohesive input ecosystem. Small UI elements (badges, tags, micro-interactions) use md (8px) or sm (4px) radius proportional to their visual weight. The 50% radius

Components

Action Elements Buttons are the primary interaction pattern. Button-primary uses background: #4668e2, text: #f7faff, padding: 12px 24px, height: 44px, border-radius: 9999px, font-weight: 600, font-size: 14px. On hover, shift to background: #5a7aff (primary-container) with a 150ms ease-out transition. On active/pressed, apply box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2). Button-secondary uses background: transparent, border: 1px solid #303136, text: #f4f7fb, with the same padding and height. On hover, background becomes #1f2023 (surface-container-high) and border shifts to #3f4145 (outline-variant). Button-ghost is a minimal variant with no background or border, text: #4668e2, used for tertiary actions and links. All buttons support a disabled state: opacity: 0.5, cursor: not-allowed,

Do's and Don'ts

**Do**

• Do use primary (#4668e2) exclusively for CTAs, active states, and brand-critical interactions—never for passive UI or backgrounds.
• Do maintain 44px minimum height for all interactive elements (buttons, inputs, list items) to ensure touch-friendly targets.
• Do apply negative letter-spacing (-0.02em to -0.04em) to all Satoshi headlines to reinforce the geometric, confident brand voice.
• Do use the full surface-container stack (lowest through highest) to create clear visual hierarchy—never skip levels or introduce custom grays.
• Do apply transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) to all interactive state changes (hover, focus, active) for consistent motion.
• Do pair Satoshi headlines with Inter body text to create a clear personality split between structural and informational content.

**Don't**

• Don't use secondary (#34ac9f) or tertiary (#ebd229) as primary accents—reserve them for status indicators and supporting roles only.
• Don't apply box-shadow to more than two layers of elevation—use border and background shifts instead to avoid visual noise.
• Don't use border-radius: 50% or 999px on cards or containers—reserve full radius for buttons, inputs, and badges only.
• Don't mix Satoshi and Inter weights arbitrarily—use Satoshi 700 for all headlines and Inter 400–600 for body and labels.
• Don't create custom color tokens outside the defined surface, on-surface, and accent stack—the system is intentionally constrained.
• Don't apply opacity or transparency to text below 70%—use on-surface-variant (#c4c9d1) for secondary text instead.