Skip to content
DesignMunkDesignMunk Submit a site

Creative Connection

creativeconnection.au
Let your true colours shine—artful, evidence-based counselling.
Education Health Webflow Homepage Monigue Rebondgrotesque
Share Visit site
creativeconnection.au DESKTOP · 1440
Creative Connection

AI Breakdown

Design export

---
version: alpha
name: Creative Connection
description: Let your true colours shine—artful, evidence-based counselling.
colors:
  primary: "#125742"
  secondary: "#ccf44c"
  tertiary: "#ffd122"
  neutral: "#fbf8f5"
  surface: "{colors.neutral}"
  on-surface: "{colors.primary}"
typography:
  headline-lg:
    fontFamily: Monigue
    fontSize: 96px
    fontWeight: 400
    lineHeight: 1.2
  headline-md:
    fontFamily: Monigue
    fontSize: 61px
    fontWeight: 400
    lineHeight: 1.13
  headline-sm:
    fontFamily: Rebondgrotesque Webfont
    fontSize: 39px
    fontWeight: 400
    lineHeight: 1.21
  headline-xs:
    fontFamily: Monigue
    fontSize: 25px
    fontWeight: 400
    lineHeight: 1.61
  body-md:
    fontFamily: Rebondgrotesque Webfont
    fontSize: 16px
    fontWeight: 400
    lineHeight: 1.5
rounded:
  sm: 8px
  md: 32px
spacing:
  xs: 8px
  sm: 16px
  md: 32px
  lg: 44px
  xl: 96px
components:
  button-primary:
    backgroundColor: "{colors.tertiary}"
    textColor: "{colors.primary}"
    rounded: "{rounded.md}"
    padding: 12px 32px
    height: 54px
  button-secondary:
    textColor: "#ffb2d0"
    rounded: "{rounded.md}"
    padding: 12px 32px
    height: 54px
  button-link:
    textColor: "{colors.primary}"
    rounded: 0px
  card:
    backgroundColor: "{colors.neutral}"
    textColor: "{colors.primary}"
    rounded: "{rounded.sm}"
    padding: 16px
---

# Creative Connection: Loud Geometry for a Gentle Practice

## Overview

Creative Connection is a counselling and cognitive-assessment practice serving children, tweens, teens and adults, and the UI is built to reassure parents while staying approachable to younger clients. The personality is playful but not childish: bold display type and saturated shapes signal creativity and warmth, while dense body copy carrying clinical credentials and statistics keeps the tone credible. Density is moderate — generous whitespace around short paragraphs, broken up by colour-blocked callout tags rather than long unbroken text.

## Colors

- **Primary (#125742):** Deep forest green used for all headline and body text, nav links, and as the text colour inside buttons — it is the system's ink.
- **Secondary (#ccf44c):** Lime green used for decorative shapes and background accents, never for text.
- **Tertiary (#ffd122):** Marigold yellow used for the primary CTA background and for the announcement bar, plus decorative shapes.
- **Neutral (#fbf8f5):** Warm off-white base surface for the page background and card surfaces.
- **Surface / On-surface:** Aliases of neutral and primary respectively — surface is the card/background canvas, on-surface is the text that sits on it.

## Typography

Monigue is a rounded, bold, all-caps-leaning display face used for headline-lg (96px), headline-md (61px) and headline-xs (25px) — it carries almost all of the personality on this page, from the hero to section titles like "Growing Up Is Hard To Do." It is a proprietary custom font (not on Google Fonts), so an agent should substitute something with a similarly chunky, slightly quirky grotesque-display character — try Cooper, Fredoka, or Baloo 2 as obtainable stand-ins. Rebondgrotesque Webfont is also proprietary/self-hosted and handles headline-sm (39px) and all body-md text (16px, line-height 1.5); reasonable substitutes are Inter, General Sans, or Switzer, which share its clean, geometric-grotesque neutrality.

## Layout

Spacing runs on a fairly wide scale — 8px, 16px, 32px, 44px, 96px — favoring large section gaps (xl at 96px) over fine-grained control, which matches the page's big blocky sections separated by generous vertical breathing room. Content sits in a centered, single-column-per-section rhythm with occasional two-column splits (e.g. the "Growing Up" text block beside the tag-list card), and decorative shapes are layered outside the main content grid rather than constrained by it.

## Elevation & Depth

Only one shadow is measured (sm: a soft green-tinted drop shadow under the announcement bar); md, lg, xl and inner are all none. Hierarchy is instead carried by colour blocking — bright tertiary/secondary shapes and pill tags against the neutral background — and by the sharp scale jump between headline-lg and body-md, rather than by layered elevation.

## Shapes

Two radii only: sm (8px) for cards and small pill tags, and md (32px) for buttons, giving buttons a fully-rounded pill shape against the tighter, near-square corners of cards and content blocks. The decorative background shapes (diamonds, half-circles, rectangles) are hard-edged and unrounded, deliberately contrasting with the soft pill buttons.

## Components

Button-primary uses the tertiary yellow (#ffd122) background with primary green text, 32px rounded corners, 54px height and 12px/32px padding — this is the "Join the Waitlist" CTA repeated across the page. Button-secondary uses pink (#ffb2d0) text with no filled background, functioning as a lower-emphasis link-style CTA (seen as "Find Out More"). Button-link has zero rounding and primary-green text, used for inline text links in copy. Cards use the neutral background, primary text, 8px rounding and 16px padding, seen in the program cards and the tag-list module.

### Announcement Bar
A full-width marigold (#ffd122) strip at the very top with bold primary-green text and a dismiss (×) icon, carrying the "We have moved" notice and casting the page's only measured shadow beneath it.

### Struggle Tag List
A stacked list of short, bold-caps phrases ("FEELING CONSTANTLY ANXIOUS OR WORRIED," "STRUGGLING TO COPE WITH CHANGE OR TRANSITIONS") each on its own colour-blocked pill — pink, yellow, lime — inside a neutral card, translating clinical symptoms into a scannable, colour-coded checklist.

### Program Card Trio
Three cards under "Next at Creative Connection" (Group Programs, Individual Support, Cognitive Assessment), each tagged "In Studio" and paired with a waitlist CTA plus a secondary "Find Out More" link, giving every service the same two-action pattern.

### Credential Strip
A row of plain-text academic qualifications (Master of Clinical Neuropsychology, Bachelor of Education, Master of Education, Bachelor of Psychological Science) set beside a "2023 Winner" badge, used as a trust signal without imagery.

### FAQ Accordion
A list of expandable questions ("What's different about Creative Connection?", "What is emotional literacy?") rendered as plain text blocks in body-md, prioritising legibility over decoration.

## Do's and Don'ts

- Do pair Monigue headlines with Rebondgrotesque body copy — never run body-md in the display face, it isn't built for paragraph legibility.
- Do reserve the 32px pill radius for buttons only; keep cards and tag pills at the tighter 8px radius to preserve the contrast between soft CTAs and structured content.
- Do use the tertiary yellow for primary actions and reserve secondary pink for lower-emphasis links, never swap them.
- Don't add shadows to cards or content blocks — depth here comes from colour blocking, not elevation.
- Don't let the decorative geometric shapes (diamonds, half-circles) overlap actual text or buttons; they're a background layer, not a content layer.
- Do keep the announcement bar's marigold background reserved for time-sensitive notices, not general content.

## Agent Prompt Guide

Quick reference — Text: #125742 (primary). Background: #fbf8f5 (neutral). Accent 1: #ffd122 (tertiary, CTAs). Accent 2: #ccf44c (secondary, decorative). Accent 3: #ffb2d0 (secondary-button text, pink pills).

1. Build a hero with a 96px Monigue (or Fredoka/Baloo 2 substitute) headline in #125742 on a #fbf8f5 background, centered, with a 54px-tall pill button in #ffd122 background and #125742 text, 32px corner radius.
2. Create a stacked tag list of short bold-caps phrases, each on its own colour-blocked pill (#ffb2d0, #ffd122, #ccf44c backgrounds), 8px radius, inside a #fbf8f5 card with 16px padding.
3. Design a three-card program grid, each card #fbf8f5 background, #125742 text, 8px radius, 16px padding, paired with a filled #ffd122 primary button and a text-only #ffb2d0 secondary link.
4. Set an announcement bar in #ffd122 background with bold #125742 text and a subtle drop shadow (rgb(18,87,66) 0 12px 16px -4px) beneath it.
5. Write body paragraphs in Rebondgrotesque (or Inter/General Sans substitute) at 16px, line-height 1.5, colour #125742, against the #fbf8f5 surface.

## Similar Brands

- **Calm / Headspace marketing pages:** share the mental-health-for-a-broad-audience mission but lean pastel and soft-illustrated rather than hard-geometric — Creative Connection is louder.
- **Duolingo:** similar instinct to make a serious subject (learning, here mental health) feel playful through bold saturated colour and chunky type, though Duolingo's mascot-driven illustration replaces geometric shapes.
- **Mailchimp (early brand era):** shared use of a quirky display headline face over a neutral cream background with primary-colour accents for a friendly-but-professional service brand.
- **Frank Body / other DTC wellness brands:** similar willingness to use hot pink and yellow together against a soft neutral, though those skew retail rather than clinical.

More like this

Browse Education →
livetheresidency.com
The Residency Business
The Residency
Live and grow with ambitious builders through 3-month residencies.
Homepage · 6 days ago
brilliant.org
Brilliant AI
Brilliant
A world-class tutor for every home
Homepage · 6 days ago
hannahsenesh.org
Hannah Senesh Education
Hannah Senesh
Live with conviction—open, inclusive Jewish day school for K-8.
Homepage · 6 days ago
inspire360.com
Inspire 360 AI
Inspire 360
Elevating the industry together
Homepage · 7 days ago