Skip to content
DesignMunkDesignMunk Submit a site

Hubble AI

hubble.ai
One integration for healthcare AI agents: context, governance, quality.
AI Health Tailwind Homepage Fraunces Inconsolata
Share Visit site
hubble.ai DESKTOP · 1440
Hubble AI

AI Breakdown

Design export

---
version: alpha
name: Hubble AI
description: "One integration for healthcare AI agents: context, governance, quality."
colors:
  primary: "#1b1818"
  secondary: "#8c9cac"
  tertiary: "#0b2672"
  neutral: "#f0efeb"
  brand-bunting: "#2c344c"
  brand-sweet-juliet: "#b8c1d3"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Fraunces
    fontSize: 60px
    fontWeight: 400
    lineHeight: 1
    letterSpacing: -0.02em
  headline-md:
    fontFamily: Fraunces
    fontSize: 44px
    fontWeight: 400
    lineHeight: 1.09
    letterSpacing: -0.022em
  headline-sm:
    fontFamily: Fraunces
    fontSize: 33px
    fontWeight: 400
    lineHeight: 1.09
    letterSpacing: -0.018em
  headline-xs:
    fontFamily: Inconsolata
    fontSize: 24px
    fontWeight: 400
    lineHeight: 1.21
    letterSpacing: 0.083em
  body-md:
    fontFamily: Inconsolata
    fontSize: 18px
    fontWeight: 400
    lineHeight: 1.6
    letterSpacing: -0.009em
rounded:
  sm: 8px
  full: 9999px
spacing:
  xs: 6px
  sm: 16px
  md: 28px
  lg: 48px
  xl: 84px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "#ffffff"
    rounded: "{rounded.full}"
    padding: 8px 16px
    height: 38px
  button-secondary:
    textColor: "{colors.tertiary}"
    rounded: "{rounded.full}"
    padding: 8px 16px
    height: 38px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Hubble AI: Editorial Serif Headlines, Monospace Body Copy

## Overview

A healthcare-first brand with a calm, trustworthy tone. The UI is spacious, centered, and copy-led, with generous line spacing and editorial headlines. Monospace body text gives a technical voice without losing warmth. Use the warm neutral surface for most sections; reserve strong blues for actions and emphasis.

## Colors

- **primary (#1b1818):** Core ink for headlines, body text, and icons on light backgrounds.
- **secondary (#8c9cac):** Subdued blue-gray for secondary text, helper labels, and muted icons.
- **tertiary (#0b2672):** Accent and action blue for primary buttons, links, and interactive focus.
- **neutral (#f0efeb):** Warm bone background for pages and large surfaces.
- **brand-bunting (#2c344c):** Deep slate for dense bands, strong text on light cards, or hover states.
- **brand-sweet-juliet (#b8c1d3):** Soft periwinkle tint for dividers, subtle borders, and empty-state washes.
- **surface (#f0efeb):** Surface color for cards and panels; matches Neutral.
- **on-surface (#1b1818):** Default readable text color on Surface; matches Primary.

## Typography

- Fraunces (headline-lg 60/1, -0.02em; headline-md 44/1.09, -0.022em; headline-sm 33/1.09, -0.018em) handles display and section headings. Source: Google Fonts (freely loadable). Appropriate substitutes if needed: Playfair Display, Lora.
- Inconsolata (headline-xs 24/1.21, +0.083em; body-md 18/1.6, -0.009em) covers eyebrows, labels, and all running copy. Source: Google Fonts (freely loadable). Close substitutes: Source Code Pro, JetBrains Mono.
- Usage: headline-lg for the primary hero claim; headline-md for major section entries; headline-sm for subheads inside cards/sections; headline-xs for uppercase-eyebrow style labels; body-md for paragraphs, lists, and FAQ content.

## Layout

A single main column with generous air. Use xl (84px) for section padding, lg (48px) for block spacing within a section, md (28px) for element groups, sm (16px) for card insets, and xs (6px) for micro-gaps between labels and text. Cards stack in 1–2 columns depending on viewport; keep consistent gutters using md (28px).

## Elevation & Depth

Depth is subtle. Cards use the same #f0efeb as the page surface, so separation comes from light shadows: sm for small elements and md for prominent containers (logo bar, demo card). Large, dramatic shadows are not used; hierarchy also relies on typographic scale and whitespace.

## Shapes

Two radii define the language: sm (8px) for cards and panels to suggest stability; full (9999px) for pills, chips, and the 38px-high buttons, signaling clickability and modern softness. Avoid mixing in new radii.

## Components

Buttons and cards are the core primitives.
- Button — Primary: background #0b2672, text #ffffff, height 38px, padding 8px 16px, rounded full (9999px). Use for main CTAs like "Book a Demo".
- Button — Secondary: text #0b2672, height 38px, padding 8px 16px, rounded full (9999px). Keep background transparent; pair with the primary as the alternate action.
- Button — Link: text #1b1818, unrounded (0px). Use inline at the end of paragraphs or within cards.
- Card: background #f0efeb, text #1b1818, rounded 8px, padding 16px; add sm or md shadow to lift from the identical page surface.

Distinctive components on this page:

### Hero with dual CTAs
- Centered headline using headline-lg, body-md intro below. Primary and secondary buttons sit side by side with md (28px) gap.

### Assurance Pills Row
- Three chips ("Live in production", "Patient-mediated access", "HIPAA compliant") using Inconsolata body-md and rounded full; small sm (16px) horizontal padding and xs (6px) gaps.

### Integration Logos Bar
- A wide card with sm (8px) radius, md shadow, and 16px padding presenting partner logos. Use body-md for the caption.

### Solutions Cards (two-up)
- Two cards labeled with headline-xs for status (e.g., LIVE, BETA), headline-sm for titles, body-md for lists, and a trailing link-style action. Spacing: sm padding inside, md gap between cards.

### Assembled Record Demo
- Composite card showing fields mapped to sources. Use headline-sm for the title, body-md for field rows, and md shadow to focus attention.

### "How it works" Stepper (1-2-3)
- Three steps in a row; numbers as pills (rounded full) and labels in headline-sm with body-md descriptions. Use lg vertical spacing between rows.

### Stats Strip
- Three metrics ("40+ Tools live", "Day 1", "Audit-ready") set in headline-md for the figure and body-md for the label, separated by md gaps.

### Team Bios
- Compact profile blocks: name in headline-sm, role and bio in body-md, stacked with sm padding inside an 8px card.

### FAQ Accordion
- Question in headline-sm, answer in body-md. Keep 16px insets and use sm shadow when expanded to maintain separation on the matching surface.

## Do's and Don'ts

- Do reserve #0b2672 for interactive accents and the primary button; don't apply it to long body text blocks.
- Do set all paragraphs in Inconsolata 18px/1.6; don't use Fraunces for running copy.
- Do keep buttons at 38px height with full radius; don't introduce square or tall variants.
- Do use sm (8px) corners for cards and md (28px) gaps between major blocks; don't mix additional radii or ad-hoc spacing.
- Do separate same-color cards from the page with sm/md shadows; don't add heavy colored glows or oversized blurs.
- Do keep the surface to #f0efeb; don't switch backgrounds mid-page without a clear sectioning purpose.

## Agent Prompt Guide

Quick color reference: text #1b1818, background #f0efeb, border/tint #b8c1d3, accent #0b2672.

1) Build the hero
- Canvas: background #f0efeb; base text #1b1818.
- H1: Fraunces, 60px, weight 400, line-height 1, letter-spacing -0.02em.
- Intro: Inconsolata, 18px, line-height 1.6.
- Primary button: 38px height, 8px 16px padding, background #0b2672, text #ffffff, radius 9999px.
- Secondary button: 38px height, 8px 16px padding, text #0b2672, transparent background, radius 9999px.
- Spacing: md (28px) between headline, intro, and buttons; xl (84px) top/bottom section padding.

2) Integration logos bar
- Wrap logos in a card: background #f0efeb, radius 8px, padding 16px, shadow rgba(0,0,0,0.05) 0 1px 2px.
- Caption: Inconsolata 18px.
- Place 6 logos spaced using md (28px) horizontally.

3) Two solution cards
- Grid: two columns with md (28px) gap.
- Each card: background #f0efeb, radius 8px, padding 16px, shadow rgba(0,0,2,0.3) 0 10px 30px for emphasis.
- Status eyebrow: Inconsolata, 24px, letter-spacing 0.083em.
- Title: Fraunces, 33px, line-height 1.09.
- Body: Inconsolata, 18px/1.6. Add a link-style action in #1b1818.

4) Three-step process
- Layout: three items in a row with md (28px) gaps.
- Step number: pill 32px circle, background #b8c1d3, text #1b1818.
- Step title: Fraunces 33px; description: Inconsolata 18px/1.6.
- Outer padding: lg (48px) top/bottom.

## Similar Brands

- Redox: API-first healthcare brand with partner logos and step flows; Hubble diverges by using a serif–monospace pairing instead of all-sans.
- Particle Health: Similar integration story and trust chips; Hubble's warmer #f0efeb surface feels softer than Particle's crisper neutrals.
- Ribbon Health: Clean, engineering-forward layouts and stats; Hubble leans more editorial with Fraunces.
- Plaid: Familiar API narrative with logo bars and clear CTAs; Hubble's healthcare palette and monospace body set a more clinical tone.

More like this

Browse AI →
lev8.com
Lev8 AI
Lev8
Turn the live web into people and business intelligence.
Homepage · 5 hours ago
blogcms.io
BlogCMS AI
BlogCMS
Static blogs built to rank higher—SEO and speed built in.
Homepage · 6 hours ago
humblytics.com
Humblytics AI
Humblytics
Revenue-based analytics and A/B testing with Stripe-verified results.
Homepage · 21 hours ago
adapt.com
Adapt AI
Adapt
One agent. Full control on the full-stack AI platform.
Homepage · 22 hours ago