Profound

Profound

Profound helps brands gain visibility in AI-generated answers, optimize their presence in LLM-based answer engines, and stay competitive in the zero-click world.

4.0
14
Visits
Visit

Available Pages

Version History

Design Analysis

Profound Home design analysis

Build a black-stage product experience that feels technical, current, and enterprise-ready. The design should be sparse around major messages and dense only inside proof objects such as product windows, workflow builders...

Key Takeaways

  • Use 000000 and 0D0D0D as the page and section base.
  • Use EDF2F5 for primary text and 9F9F9F or 828282 for secondary copy and inactive navigation.
  • Use 232323 for hairline borders, vertical grid lines, dividers, and product-window outlines.
  • Use a variable grotesk such as Inter for display, body, labels, and navigation.
  • Headlines are large, clean, and medium weight. They should rely on scale, balance, and line breaks rather than heavy weight.
  • Body copy is short, muted, and close to the UI object it supports.

Overview

Build a black-stage product experience that feels technical, current, and enterprise-ready. The design should be sparse around major messages and dense only inside proof objects such as product windows, workflow builders, pricing matrices, data panels, and FAQ rows. The core mood is controlled intensity: dark canvas, crisp white typography, muted gray support text, thin grid structure, and one electric signal accent per section. It should feel like a serious product team showing real machinery, not a generic SaaS landing page.

Colors

  • Use 000000 and 0D0D0D as the page and section base.
  • Use EDF2F5 for primary text and 9F9F9F or 828282 for secondary copy and inactive navigation.
  • Use 232323 for hairline borders, vertical grid lines, dividers, and product-window outlines.

Typography

  • Use a variable grotesk such as Inter for display, body, labels, and navigation.
  • Headlines are large, clean, and medium weight. They should rely on scale, balance, and line breaks rather than heavy weight.
  • Body copy is short, muted, and close to the UI object it supports.

Layout

  • Center content inside a visible or implied grid with generous left and right margins.
  • Let thin vertical dividers continue through hero and pricing sections to create a technical frame.
  • Put one dominant proof object beneath or beside each major claim.

Design.md

System Overview

Core identity and authoring metadata from the refto.one design model.

Black Signal Marketing System

A high-contrast dark product marketing system with technical grid structure, crisp grotesk typography, restrained borders, and electric signal accents.

Black, precise, technical, enterprise-grade, and product-led.

Primary mode: darkAI marketing and search visibility softwareui-rich

Theme

Fields outside the primary renderer remain visible here as structured fallback content.

Visual atmosphere
Summary
Black, precise, technical, enterprise-grade, and product-led.
Density
5
Variance
3
Motion
3
Signals
black stage with subtle vertical grid lines · white and muted-gray typography · large embedded product windows · single electric accent per section · thin borders instead of shadows

Colors

Primitive palettes and resolved token colors for the active preview mode.

Palette colors
Black Canvas
#000000
Graphite Section
#0D0D0D
Panel Charcoal
#141414
Raised Charcoal
#212121
Grid Border
#232323
Primary Text
#EDF2F5
Muted Text
#9F9F9F
Navigation Muted
#828282
White Action
#FFFFFF
Signal Teal
#23FFBD
Signal Blue
#5DABFF
Signal Purple
#935DFF
Usage rules
Use black and near-black as the default canvas; avoid light page sections.
Let borders and grid lines carry structure before adding filled cards.
Use one bright signal accent per view or section.
Reserve pure white fills for the highest-priority action.

Token Spacing

Spacing scales rendered as tokens with a simple length specimen.

page_margin
clamp(1.25rem, 10vw, 8rem)
section_gap
clamp(5rem, 10vw, 9rem)
panel_padding
1.5rem
card_padding
2rem
control_gap
0.5rem

Token Radii

Corner radii tokens with a live surface sample.

control
8px
small
6px
panel
0px
product_window
0px
pill
999px

Typography Families

Font families from the current design YAML, including fallback stacks and usage character.

Display
Inter Variable
clean variable grotesk with compact enterprise confidence
Body
Inter Variable
neutral product marketing voice
Mono
System Mono
reserved for data labels, code-like values, and workflow nodes

Typography Scale

Top-level typography scale rendered as live text specimens.

Display
clamp(2.5rem, 5.2vw, 3.5rem)/—
Display
Headline
clamp(2rem, 4vw, 3rem)/—
Headline
Subhead
1.5rem/—
Subhead
Body
1rem/—
Body
Small
0.875rem/—
Small

Typography Rules

Fields outside the primary renderer remain visible here as structured fallback content.

Rules
Use medium-weight display headlines; avoid heavy poster weights. · Keep body copy short, muted, and close to the object it explains. · Use scale and line breaks to create drama; avoid decorative type treatments.

Borders

Border tokens with resolved values.

Hairline
1px solid #232323
Subtle
1px solid rgba(255, 255, 255, 0.10)
Active
1px solid #23FFBD

Motion

Motion tokens rendered as resolved values for timing and personality.

Duration
180ms-300ms
Easing
cubic-bezier(0.22, 1, 0.36, 1)
Rules
["Prefer subtle fades, line reveals, and product-state changes.","Avoid bouncy movement, parallax spectacle, and constant decorative motion."]

Borders

Resolved border token values.

PropertyValue
hairline1px solid #232323
subtle1px solid rgba(255, 255, 255, 0.10)
active1px solid #23FFBD

Motion

Resolved motion token values.

PropertyValue
duration180ms-300ms
easingcubic-bezier(0.22, 1, 0.36, 1)
rules["Prefer subtle fades, line reveals, and product-state changes.","Avoid bouncy movement, parallax spectacle, and constant decorative motion."]

Layout Principles

Stage pages on a black canvas with a constrained central grid.
Use thin vertical dividers to imply columns even when content is sparse.
Anchor major sections with one dominant proof object: product window, pricing matrix, workflow, or data panel.
Leave generous empty space around hero copy; density belongs inside product surfaces.
On mobile, keep the same black stage, stack actions, and crop product evidence rather than shrinking everything equally.

Component Preview

Low-complexity component tokens rendered as design-system specimens.

Buttons primary light
Base Attributes
Background
#FFFFFF
Text
#222222
Border
none
Radius
{tokens.radii.control}->8px
Padding
0.375rem 0.75rem
Min height
32px
Shadow
none
Typography
label
Buttons primary accent
Base Attributes
Background
#23FFBD
Text
#222222
Border
none
Radius
{tokens.radii.control}->8px
Padding
0.375rem 0.75rem
Min height
32px
Shadow
none
Typography
label
Buttons secondary dark
Base Attributes
Background
#333333
Text
#EDF2F5
Border
1px solid #333333
Radius
{tokens.radii.control}->8px
Padding
0.375rem 0.75rem
Min height
32px
Shadow
none
Typography
label
Buttons ghost
Base Attributes
Background
transparent
Text
#EDF2F5
Border
none
Radius
{tokens.radii.control}->8px
Padding
0.375rem 0.75rem
Min height
32px
Typography
label
Navigation desktop
OverviewFeaturesDocs
Base Attributes
Background
rgba(0, 0, 0, 0.70)
Text
#828282
Border
1px solid #232323
Height
56px
Active text
#FFFFFF
Item height
32px
Item padding
0 0.75rem
Item radius
0px
Navigation mobile
OverviewFeaturesDocs
Base Attributes
Background
#000000
Border
1px solid #232323
Height
56px
Action height
32px
Menu icon
#FFFFFF
Cards flat panel
Feature Card
Component preview content
Base Attributes
Background
#0D0D0D
Text
#EDF2F5
Border
{tokens.borders.hairline}->1px solid #232323
Radius
{tokens.radii.panel}->0px
Padding
{tokens.spacing.card_padding}->2rem
Shadow
none
Cards pricing column
Feature Card
Component preview content
Base Attributes
Background
#0D0D0D
Text
#EDF2F5
Border
{tokens.borders.hairline}->1px solid #232323
Radius
0px
Padding
1.25rem
Shadow
none
Cards feature tile
Feature Card
Component preview content
Base Attributes
Background
transparent
Text
#EDF2F5
Border
1px solid #232323
Radius
0px
Padding
1rem
Shadow
none
Product windows default
Base Attributes
Background
#050505
Text
#EDF2F5
Border
{tokens.borders.hairline}->1px solid #232323
Radius
0px
Padding
0
Shadow
none
Internal grid
dotted or hairline dark grid
Segmented controls default
Base Attributes
Background
transparent
Text
#9F9F9F
Border
1px solid #232323
Radius
{tokens.radii.control}->8px
Padding
0
Min height
36px
Item padding
0.5rem 0.75rem
Toggles default
Base Attributes
Background
#505050
Border
2px solid transparent
Radius
{tokens.radii.pill}->999px
Height
20px
Knob
#FFFFFF
Width
32px
Accordions default
Base Attributes
Background
transparent
Text
#EDF2F5
Border
1px solid #232323
Radius
0px
Padding
1.5rem 2rem
Icon
#9F9F9F

Hero stage

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Summary
Large sparse headline on black, framed by hairline grid columns and followed by a real product surface.

Responsive guidance

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

  • -
    Below 768px, use 32px side margins, stacked hero actions, and cropped product windows.
  • -
    Keep header height compact and preserve one primary CTA in the mobile top bar.

Iconography

Schema-agnostic optional blocks from the design YAML. New option keys render here automatically.

Summary
Small utility icons, mostly monochrome, with teal/blue/purple only for section signals and state markers.

Anti Patterns

Compact list of patterns the design system explicitly avoids.

  • -
    No pastel SaaS gradients as page backgrounds.
  • -
    No oversized rounded cards floating on soft shadows.
  • -
    No multi-accent confetti; one signal color should lead each section.
  • -
    No playful illustration style when a product surface can provide proof.
  • -
    No dense copy blocks inside heroes.
  • -
    No glossy glassmorphism, blurred orbs, or decorative bokeh.

Additional Tokens

Fields outside the primary renderer remain visible here as structured fallback content.

Status
Success
Text
#05DF72
Background
rgba(5, 223, 114, 0.12)
Border
1px solid rgba(5, 223, 114, 0.28)
Info
Text
#5DABFF
Background
rgba(93, 171, 255, 0.10)
Border
1px solid rgba(93, 171, 255, 0.24)
Highlight
Text
#23FFBD
Background
rgba(35, 255, 189, 0.12)
Border
1px solid rgba(35, 255, 189, 0.32)