HelloData.ai Design System — Webflow Development Instructions

Purpose: Use this document as a setup prompt when creating web components, landing pages, or marketing content for HelloData.ai in Webflow. Paste this at the start of new AI chat sessions to ensure consistent, on-brand output.

Quick Start: Key Patterns

Colors

Purple (Primary): #6366F1 / Dark: #4338CA / Darker: #3730A3 / Mid: #5B52E5 / Light: #EEF2FF
Orange (Secondary): #F97316 / Dark: #EA580C
Fake Black: #18191A — used for dark backgrounds AND all button borders/shadows
Text: #111827 (not pure black)
CTA Gradient: Use var(--gradient-cta-purple) for all CTA section backgrounds

Buttons (3D Effect)

/* All 3D buttons use these values for border and shadow */
border: 2px solid #18191A;
box-shadow: 0 4px 0 #18191A;      /* static */
box-shadow: 0 2px 0 #18191A;      /* hover (+ translateY 2px) */
box-shadow: 0 0 0 #18191A;        /* active (+ translateY 4px) */

Primary: Purple #4338CA → never use arrows
Secondary: Orange #F97316 → never use arrows
White: White bg, #18191A text → never use arrows

Link-Style Buttons (No 3D Effect)

Ghost: Transparent bg, purple text → always use <span class="link-arrow">→</span>
White-Outline: For dark bgs → always use arrow
Arrow animates translateX(4px) on hover

Cards

Border radius: 6px (tight, technical)
No shadows at rest, 0 4px 12px rgba(0,0,0,0.08) on hover
NEVER use purple accent borders (top, left, right, or bottom)
Feature card explore links: full-width bar, no border
Bento explore links: 2px solid border, #C7D2FE on hover

Explore Links

/* All explore links have consistent hover effects */
.card-explore-link:hover {
  background-color: var(--color-purple-light);
  border-color: #C7D2FE;
  box-shadow: var(--shadow-card-hover);
}

.card-explore-link:hover .card-explore-link_topic,
.card-explore-link:hover .card-explore-link_arrow {
  color: var(--color-purple);
}

.card-explore-link:hover .card-explore-link_arrow {
  transform: translateX(4px);
}

Typography

Font: Nunito Sans
Labels: Uppercase, letter-spacing: 0.05em, weight 600-700

CRITICAL DESIGN RULES

⛔ Never Do These

NEVER add purple accent borders to cards (no top, left, right, or bottom colored borders)
NEVER use arrows on 3D CTA buttons (Primary, Secondary, White)
NEVER use shadows at rest on cards — only on hover
NEVER use large border radius (stick to 6px for technical aesthetic)
NEVER use 90vh hero heights — use standard SaaS hero heights (padding-based)
NEVER use dark overlay gradients on photo bentos — use captions below instead
NEVER let explore links "float" up in cards — lock them to bottom with flexbox

✅ Always Do These

ALWAYS use flexbox on feature cards to lock explore links to bottom
ALWAYS use the 3D button system with #18191A borders/shadows
ALWAYS use tabular-nums for statistics and numbers
ALWAYS use hover shadow 0 4px 12px rgba(0,0,0,0.08) on interactive cards
ALWAYS use uppercase labels with letter-spacing for eyebrow text
ALWAYS use the two-tone headline pattern (black text + purple accent phrase)

Brand Identity

Company: HelloData.ai (A Grace Hill Solution)
Industry: PropTech / Multifamily Real Estate Analytics
Tone: Professional, data-driven, modern, trustworthy
Target Audience: Real estate investors, property managers, developers, brokers

CSS Custom Properties (Design Tokens)

Design tokens are hosted centrally via a public GitHub Gist. This enables universal control — change one file, all pages update automatically.

Webflow Setup (One-Time)

Add this to your Webflow site's Site Settings → Custom Code → Head Code:

<link rel="stylesheet" href="https://gist.githubusercontent.com/goov373/c688f2706b480dcc6099944d1c38e135/raw/tokens.css">

This loads all design tokens site-wide. You no longer need to include :root blocks in each embed.

Updating Tokens

To change a token value (e.g., update the primary purple color):

Edit library/tokens.css locally
Update the gist: gh gist edit c688f2706b480dcc6099944d1c38e135 library/tokens.css
Commit to repo: git add library/tokens.css && git commit -m "Update tokens" && git push

Changes propagate to all Webflow pages within ~5 minutes (gist cache).

Full Documentation: See library/README.md for complete token reference, all available values, usage examples, and troubleshooting.

Key Token Categories

Category	Examples
Colors	`--color-purple`, `--color-purple-darker`, `--color-purple-mid`, `--color-text-primary`, `--color-btn-shadow`
Opacity Colors	`--color-white-10/20/30/60/70`, `--color-black-05/10/20`, `--color-purple-30`
Semantic Colors	`--color-bg-subtle`, `--color-border-light`, `--color-success-bg`, `--color-error-bg`
Gradients	`--gradient-cta-purple` — standard CTA background gradient
Typography	`--font-size-base`, `--font-weight-bold`, `--line-height-relaxed`, `--line-height-loose`
Spacing	`--space-1` through `--space-20`, `--space-section-sm/md/lg/xl`
Content Widths	`--content-width-narrow` (560px), `--content-width-medium` (680px), `--content-width-wide` (880px)
Radius	`--radius-sm` (6px), `--radius-md` (8px), `--radius-full`
Shadows	`--shadow-sm` through `--shadow-xl`, `--shadow-btn-*`
Transitions	`--transition-fast`, `--transition-normal`, `--transition-slow`

Spacing Deep Dive: See docs/spacing-token-system.md for the complete spacing token reference, including the 8px grid philosophy, all token values, usage guidelines, and intentional exceptions.

Content Width Constraints

For controlling the maximum width of text content blocks within containers:

Token	Value	Use For
`--content-width-narrow`	560px	Hero text blocks, tab content, mobile grids
`--content-width-medium`	680px	Section headers, CTAs, forms, integrations
`--content-width-wide`	880px	FAQ lists, comparison tables, wide content

Large Screen Override (1440px+): The --content-width-narrow token scales to 700px at 1440px+ for better use of screen space.

/* Hero text block - standard width */
.hero-content {
  max-width: var(--content-width-narrow);
  margin: 0 auto;
}

/* Section header - medium width */
.section-header {
  max-width: var(--content-width-medium);
  margin: 0 auto 48px;
}

/* FAQ list - wide content */
.faq-list {
  max-width: var(--content-width-wide);
  margin: 0 auto;
}

Image Aspect Ratios

Standardized aspect ratios for image containers. Use these tokens to maintain consistent visual rhythm across product screenshots, heroes, and feature visuals.

Token	Ratio	Use For
`--ratio-portrait`	3:4	Vertical images, team photos
`--ratio-square`	1:1	Avatars, icons, balanced blocks
`--ratio-landscape`	4:3	Default for most screenshots
`--ratio-landscape-wide`	16:10	Wide product showcases
`--ratio-hero`	16:11	Homepage hero mockup
`--ratio-cinema`	16:9	Video embeds, cinematic showcases

Image Height Scale:

Token	Value	Use For
`--image-height-sm`	180px	Cards, carousels, thumbnails
`--image-height-md`	280px	Feature panels, tab visuals
`--image-height-lg`	400px	Hero content areas
`--image-height-lg-desktop`	480px	Hero at 1440px+ viewports

/* Product screenshot - standard landscape */
.product-screenshot {
  aspect-ratio: var(--ratio-landscape);
  object-fit: cover;
}

/* Homepage hero - unique ratio */
.hero-mockup {
  aspect-ratio: var(--ratio-hero);
  min-height: var(--image-height-lg);
}

Using Tokens in Embeds

<style>
  .my-component {
    background-color: var(--color-purple);
    padding: var(--space-lg);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-base);
    transition: all var(--transition-normal);
  }
</style>

Typography Specifications

Font Setup

Primary Font: Nunito Sans
Webflow Font Source: Google Fonts (add via Project Settings → Fonts)

Fallback Stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif

Type Scale

Element	Font Size	Weight	Line Height	Letter Spacing
Hero H1 (Desktop)	56px	700	1.1	-0.02em
Hero H1 (Mobile)	36px	700	1.15	-0.02em
Section H2 (Desktop)	40px	700	1.2	-0.01em
Section H2 (Mobile)	28px	700	1.25	-0.01em
Card H3	24px	700	1.3	0
Body Large	18px	400	1.6	0
Body	16px	400	1.5	0
Caption	14px	400	1.5	0
Small/Label	12px	500	1.4	0.02em

Webflow Class Names for Typography

Class: "heading-hero"
- Font size: 56px (desktop), 36px (mobile)
- Font weight: 700
- Line height: 1.1
- Color: #111827

Class: "heading-section"
- Font size: 40px (desktop), 28px (mobile)
- Font weight: 700
- Line height: 1.2
- Color: #111827

Class: "heading-card"
- Font size: 24px
- Font weight: 700
- Line height: 1.3
- Color: #111827

Class: "text-body-large"
- Font size: 18px
- Font weight: 400
- Line height: 1.6
- Color: #4B5563

Class: "text-body"
- Font size: 16px
- Font weight: 400
- Line height: 1.5
- Color: #4B5563

Class: "text-muted"
- Font size: 16px
- Font weight: 400
- Line height: 1.5
- Color: #6B7280

Class: "text-purple" (combo class)
- Color: #6366F1

Two-Tone Headline Pattern

HelloData uses a signature style where headlines have black text with a purple accent phrase.

HTML Structure:

<h2 class="heading-section">
  Built for Data-Driven 
  <span class="text-purple">Multifamily Teams.</span>
</h2>

Button System

Button Categories

HelloData has two categories of buttons with different visual treatments:

Category	Types	Visual Style	Arrows?
3D CTA Buttons	Primary, Secondary, White	3D press effect with `#18191A` border/shadow	NEVER
Link-Style Buttons	Ghost, White-Outline	Flat, text-like appearance	ALWAYS

3D CTA Button Mechanics

All 3D buttons share the same mechanical behavior:

/* Base State */
border: 2px solid #18191A;
box-shadow: 0 4px 0 #18191A;
transform: translateY(0);
transition: all 150ms ease;

/* Hover State */
box-shadow: 0 2px 0 #18191A;
transform: translateY(2px);

/* Active/Click State */
box-shadow: 0 0 0 #18191A;
transform: translateY(4px);

Primary Button (Purple)

.button-primary {
  background-color: #4338CA;
  color: #FFFFFF;
  padding: 16px 32px;
  font-weight: 700;
  font-size: 16px;
  border: 2px solid #18191A;
  border-radius: 8px;
  box-shadow: 0 4px 0 #18191A;
  cursor: pointer;
  transition: all 150ms ease;
}

.button-primary:hover {
  background-color: #3730A3;
  box-shadow: 0 2px 0 #18191A;
  transform: translateY(2px);
}

.button-primary:active {
  box-shadow: 0 0 0 #18191A;
  transform: translateY(4px);
}

Use For: Primary CTAs (Schedule Demo, Get Started, Sign Up)

Secondary Button (Orange)

.button-secondary {
  background-color: #F97316;
  color: #FFFFFF;
  /* Same border/shadow/transition as Primary */
}

.button-secondary:hover {
  background-color: #EA580C;
  /* Same mechanics as Primary */
}

Use For: Secondary CTAs (Start Free Trial, Learn More)

White Button

.button-white {
  background-color: #FFFFFF;
  color: #18191A;
  /* Same border/shadow/transition as Primary */
}

.button-white:hover {
  background-color: #F9FAFB;
  /* Same mechanics as Primary */
}

Use For: CTAs on dark backgrounds, tertiary actions

Ghost Button (Link-Style)

.button-ghost {
  background: transparent;
  color: #6366F1;
  padding: 16px 32px;
  font-weight: 600;
  border: none;
  cursor: pointer;
}

.button-ghost:hover {
  color: #4338CA;
}

.button-ghost .link-arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 200ms ease;
}

.button-ghost:hover .link-arrow {
  transform: translateX(4px);
}

HTML Structure:

<a class="button-ghost">
  Learn More <span class="link-arrow">→</span>
</a>

Use For: Tertiary actions, inline links, "Learn more" style CTAs

White-Outline Button (Link-Style)

.button-outline-white {
  background: transparent;
  color: #FFFFFF;
  padding: 16px 32px;
  font-weight: 600;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 8px;
  cursor: pointer;
}

.button-outline-white:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.5);
}

.button-outline-white .link-arrow {
  display: inline-block;
  margin-left: 8px;
  transition: transform 200ms ease;
}

.button-outline-white:hover .link-arrow {
  transform: translateX(4px);
}

Use For: Secondary actions on dark backgrounds

Card Patterns

Feature Cards with Locked Bottom Links

Feature cards MUST use flexbox to ensure explore links stay at the bottom regardless of content height:

.card-feature {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;
  border-radius: 6px;
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.card-feature:hover {
  border-color: #EEF2FF;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-feature_content {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.card-feature_description {
  flex: 1;  /* Takes up remaining space, pushing link to bottom */
}

.card-feature .card-explore-link-wrapper {
  margin: auto -24px -24px -24px;  /* margin-top: auto locks to bottom */
  border-top: 1px solid #E5E7EB;
}

Testimonial Cards

Testimonial cards have NO colored borders:

.card-testimonial {
  padding: 32px;
  background-color: #FFFFFF;
  border: 1px solid #E5E7EB;  /* Simple gray border only */
  border-radius: 6px;
}

/* Dark variant */
.card-testimonial.is-dark {
  background-color: #2D2E2F;
  border-color: #3D3E3F;
}

/* Featured variant */
.card-testimonial.is-featured {
  padding: 48px;
  background: linear-gradient(135deg, #4338CA 0%, #7C3AED 100%);
  border: none;
}

Explore Link Component

.card-explore-link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px;
  border: 2px solid #E5E7EB;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.card-explore-link:hover {
  background-color: #EEF2FF;
  border-color: #C7D2FE;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.card-explore-link_label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6366F1;
}

.card-explore-link_topic {
  font-size: 14px;
  font-weight: 500;
  color: #111827;
}

.card-explore-link_arrow {
  margin-left: auto;
  color: #6B7280;
  transition: color 200ms ease, transform 200ms ease;
}

.card-explore-link:hover .card-explore-link_topic,
.card-explore-link:hover .card-explore-link_arrow {
  color: #6366F1;
}

.card-explore-link:hover .card-explore-link_arrow {
  transform: translateX(4px);
}

Section Layouts

Hero Section

Use standard SaaS hero heights with padding, NOT viewport heights:

.section-hero {
  padding: 96px 0 64px;
  background-color: #FFFFFF;
}

/* Taller variant for emphasis - still NOT 90vh */
.section-hero.is-tall {
  padding: 120px 0 96px;
}

.section-hero.is-centered {
  text-align: center;
}

.section-hero.is-dark {
  background-color: #18191A;
}

Testimonial Bento Grid

Uses flexbox with min-widths to prevent orphan cards:

.testimonial-bento-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.testimonial-bento-item {
  border-radius: 6px;
  border: 1px solid;
  box-sizing: border-box;
}

/* Flex sizing prevents orphan cards */
.testimonial-bento-item.is-wide {
  flex: 2 1 500px;
  min-width: 400px;
}

.testimonial-bento-item.is-narrow {
  flex: 1 1 250px;
  min-width: 200px;
}

.testimonial-bento-item.is-half {
  flex: 1 1 350px;
  min-width: 280px;
}

.testimonial-bento-item.is-third {
  flex: 1 1 200px;
  min-width: 180px;
}

@media (max-width: 767px) {
  .testimonial-bento-item.is-wide,
  .testimonial-bento-item.is-narrow,
  .testimonial-bento-item.is-half,
  .testimonial-bento-item.is-third {
    flex: 1 1 100%;
    min-width: 100%;
  }
}

Photo Bento Grid (Mixed Layout)

Photo bento sections mix product screenshots with text cards. NO dark overlays:

.bento-item.is-photo {
  padding: 0;
  overflow: hidden;
}

.bento-photo {
  width: 100%;
  min-height: 200px;
  background-size: cover;
  background-position: center;
  margin: 16px;
  border: 1px dashed #E5E7EB;
  border-radius: 6px;
}

/* Caption goes BELOW the photo, not overlaid */
.bento-photo-caption {
  padding: 16px 24px 24px;
}

.bento-photo-caption_title {
  font-size: 16px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.bento-photo-caption_text {
  font-size: 14px;
  color: #6B7280;
}

Tabs Content Area

Tabs content has no side/bottom borders:

.tabs-content {
  display: none;
  padding: 32px;
  background-color: #FFFFFF;
}

.tabs-content.is-active {
  display: block;
}

Dark Mode Components

Dark Card Hover Shadow

For cards on dark backgrounds, use a stronger shadow:

.card-feature.is-dark:hover {
  border-color: #4D4E4F;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

Dark Theme Colors

/* Background */
background-color: #18191A;

/* Card background */
background-color: #2D2E2F;

/* Card border */
border-color: #3D3E3F;

/* Hover border */
border-color: #4D4E4F;

/* Text */
color: #FFFFFF;            /* Primary */
color: #94A3B8;            /* Muted */

/* Purple accents work on dark */
color: #6366F1;            /* Links, highlights */

Component Library Reference

The companion HTML file hellodata-complete-library.html contains all implemented components organized into 15 sections:

Typography - Headings, body text, labels
Buttons - 3D CTAs, link-style, explore links
Badges & Tags - Status indicators, labels
Similarity Score Indicators - Progress bars, scores
Data Table - Sortable table with row hover
Stats Cards & Bars - Stat displays, full-width bars
Tabs - Interactive tab panels with content
Cards - Testimonial, feature, simple cards
Logo Bar - Trust indicators
Feature Split - Two-column layouts
Bento Grid - Mixed content grids
CTA Sections - Conversion sections
Hero Section - Page headers
FAQ Section - Grid and accordion layouts
Footer - Site footer

Scope Control Guidelines

When editing or extending this design system:

Only modify what is explicitly requested — do not expand scope
Preserve existing CSS — add new rules, don't modify working ones
Maintain class naming conventions — use existing patterns
Test all variants — light and dark modes
Document new components — add to this guide

Version History

v1.0 - Initial design system with core components
v1.1 - Added section layout variants (Z-pattern, F-pattern)
v2.0 - Expanded component library with 20+ variants
v2.1 - Final refinements:
- Removed purple accent borders from testimonial cards
- Added flexbox to feature cards for locked bottom links
- Updated testimonial bento to use flexbox with min-widths
- Removed tabs content side/bottom borders
- Replaced photo bento dark overlay with captions
- Standardized hero heights (removed 90vh)
- Added consistent explore link hover effects
- Added sticky section navigation to library
- Added dark mode card hover shadow variant
v2.2 - Content width tokens and hero standardization:
- Added content-width constraint tokens (--content-width-narrow, --content-width-medium, --content-width-wide)
- Standardized all hero text block widths to use var(--content-width-narrow) (560px base, 700px at 1440px+)
- Unified hero header text sizing to --font-size-6xl across all 15 landing pages
- Added 1440px+ large screen enhancements for typography and spacing
v2.3 - Image aspect ratio tokens:
- Added 6 aspect ratio tokens: --ratio-portrait, --ratio-square, --ratio-landscape, --ratio-landscape-wide, --ratio-hero, --ratio-cinema
- Added 4 image height tokens: --image-height-sm, --image-height-md, --image-height-lg, --image-height-lg-desktop
- Replaced all hardcoded aspect-ratio values across 15 landing pages with token variables
- Standardized image sizing for consistent SaaS product showcasing

FilesExpand file tree

hellodata-design-system-webflow.md

Latest commit

History