Brand Style Guide

01 — Overview

About This Guide

Everything needed to build, extend, or recreate singerwellness.org. Use the designer/developer toggle throughout each section to reveal technical details.

For Designers

Use this guide for color values, typeface specifications, spacing scale, and visual tone. All hex values are click-to-copy.

For Developers

Toggle developer mode in each section to reveal WordPress block class names, CSS variables, REST API media IDs, and the full custom CSS applied to global styles.

For AI Prompts

The AI Prompts section at the bottom contains copy-paste prompts describing the brand’s visual language, tone, and design system for use in image generation or code tasks.

Keeping It Updated

Open this HTML file in any text editor. Add new assets under the relevant section. New icons, illustrations, or pages should include: name, description, dimensions, and WordPress media ID.

02 — Identity

Brand Identity

The brand’s name, mission, and voice guide every design and copy decision.

Name

Singer Equity & Wellness

Abbreviation: SEW
Operator: Kris Singer (They/Them)

Mission

LGBTQ+ and TGNC-affirming clinical therapy, training, and community support. Grounded in equity, lived experience, and the CARE Framework.

Voice & Tone

Warm, direct, and inclusive
Clinical credibility without jargon
Gender-expansive, community-first
Professional but never cold

CARE Framework

Contextual Assessment for Relational Ethics — a proprietary clinical framework developed by Kris Singer for gender-affirming care. Central to the brand’s thought leadership.

Core Values (Brand)

Witness
Protector
Nurturer
Co-Conspirator

Primary CTA

“GET STARTED” — links to /request/ (intake/contact form page). Used site-wide as the primary action button, including in the navigation header.

03 — Color

Color Palette

Six primary brand colors plus two text/utility values. All section backgrounds use these colors as block-level inline styles.

SLATE BLUE

Slate Blue

#5C7387

Primary buttons, footer bg, bio-quote section, navigation links

SAGE GREEN

Sage Green

#8FA79A

CARE Framework section bg (is-style-section-2), accent highlights

TERRACOTTA

Terracotta

#C77D63

Hero/bio section bg (is-style-section-3), warm accent color

WARM CREAM

Warm Cream

#F7F5F2

Thought Leadership, Connect, footer default sections, page background

NEAR WHITE

Near White

#FAFAFA

Services section background, light card surfaces

WHITE

White

#FFFFFF

Reviews section, card backgrounds, button text, footer text

INK

Ink (Dark)

#1E1E1E

All body text, headings on light backgrounds, navigation links

BLACK

Black

#000000

WordPress theme-5, pure black for high-contrast needs

Designer Developer

      
/* ── WordPress Theme Color Presets ── */
–wp–preset–color–theme-1: #FFFFFF;   /* white */
–wp–preset–color–theme-2: #EEEEEE;   /* light gray */
–wp–preset–color–theme-3: #BBBBBB;   /* mid gray */
–wp–preset–color–theme-4: #1E1E1E;   /* ink/dark */
–wp–preset–color–theme-5: #000000;   /* black */

/* ── Brand Colors (set as inline block styles) ── */
/* Not registered as WP presets — applied as custom hex values */
Slate Blue:     #5C7387   style.color.background / style.color.text
Sage Green:     #8FA79A   style.color.background on .is-style-section-2 blocks
Terracotta:    #C77D63   style.color.background on .is-style-section-3 blocks
Warm Cream:    #F7F5F2   style.color.background on .is-style-default blocks
    

04 — Typography

Typography

Two typefaces: Lora (serif) for body and reading; Rubik (sans-serif) for headings, labels, and UI. Both served via Google Fonts.

H1 — Page Title

Hi, I’m Kris (They/Them)

H1 Rubik
49px / 600
capitalize

H2 — Section Heading

Guiding Clinical Judgement in Gender-Affirming Care

H2 Rubik
29px / 300
normal case

H3 — Subsection / Label

MY APPROACH

H3 Rubik
22px / 600
UPPERCASE

Body Copy

My approach is grounded in current research, therapeutic frameworks, and evolving ideas drawn from my clinical practice, community work, research, and lived experience.

Body Lora (serif)
19px / 400
line-height 1.65

Eyebrow / Label (Uppercase Rubik)

THOUGHT LEADERSHIP

Eyebrow Rubik
11px / 700
UPPERCASE · 0.2em

Navigation Link

SERVICES | ABOUT | RESOURCES

Nav Rubik
14px / 500
normal/uppercase

Designer Developer

      
/* ── Google Fonts Import ── */
@import url(‘https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;1,400&family=Rubik:wght@300;400;500;600;700&display=swap&#8217;);

/* ── WordPress Font Preset CSS Vars ── */
–wp–preset–font-family–lora: Lora, serif;
–wp–preset–font-family–rubik: Rubik, sans-serif;

/* ── Global Styles (set in WP editor → Styles) ── */
body     { font-family: Lora, serif; font-size: 19px; font-weight: 400; }
h1       { font-family: Rubik; font-size: 49px; font-weight: 600; text-transform: capitalize; }
h2       { font-family: Rubik; font-size: 29px; font-weight: 300; text-transform: none; }
h3       { font-family: Rubik; font-size: 22px; font-weight: 600; text-transform: uppercase; line-height: 1.2; }
headings { font-family: Rubik; font-weight: 600; text-transform: uppercase; font-style: normal; }

/* ── WordPress Fluid Font Size Presets ── */
–wp–preset–font-size–small:    clamp(14px, 0.875rem + ((1vw – 3.2px) * 0.179), 16px);
–wp–preset–font-size–medium:   clamp(20px, 1.25rem + ((1vw – 3.2px) * 0.357), 24px);
–wp–preset–font-size–large:    clamp(23px, 1.44rem + ((1vw – 3.2px) * 1.335), 38px);
–wp–preset–font-size–x-large:  clamp(33px, 2.089rem + ((1vw – 3.2px) * 2.373), 60px);
–wp–preset–font-size–xx-large: clamp(40px, 2.5rem + ((1vw – 3.2px) * 3.571), 80px);
    

05 — Spacing

Spacing & Layout

WordPress fluid spacing presets plus standardized heading rhythm applied via global CSS overrides. Section padding is set to 60px top/bottom via CSS (overriding the WP preset). Heading margins create consistent vertical rhythm across all pages.

spacing-20
25px at 1000px viewport
Small gaps, compact padding

spacing-30
50px at 1000px viewport
Medium padding

spacing-40
75px at 1000px viewport
WP preset (overridden for sections — see below)

spacing-50
100px at 1000px viewport
Large section spacing

spacing-60
125px at 1000px viewport
Extra-large / hero spacing

★ Section pt/pb (CSS override)
60px fixed
Applied to all .is-style-section* groups via global CSS

Heading Rhythm (Global CSS)

H3 eyebrow: margin-bottom 4px
H1 title: margin-bottom 10px
H2 subtitle: margin-bottom 32px
Applied to all .wp-block-group headings
Creates consistent eyebrow → title → subtitle → content rhythm

Icon Card Grid

Class: .icon-card-grid on the columns wrapper
Icon display size: 120px × 120px (max-width, auto height)
Icon → label gap: 12px (figure margin-bottom)
All column content: center-aligned
H3 forced to full column width for correct centering

Designer Developer

      
/* ── WordPress Fluid Spacing Presets ── */
–wp–preset–spacing–20: min(calc(10 * (2.5 * 1) * 1px), calc(2.5 * 1 * 2vw));  /* ~25px */
–wp–preset–spacing–30: min(calc(10 * (2.5 * 2) * 1px), calc(2.5 * 2 * 1vw));  /* ~50px */
–wp–preset–spacing–40: min(calc(10 * (2.5 * 3) * 1px), calc(2.5 * 3 * 1vw));  /* ~75px ← PRIMARY */
–wp–preset–spacing–50: min(calc(10 * (2.5 * 4) * 1px), calc(2.5 * 4 * 1vw));  /* ~100px */
–wp–preset–spacing–60: min(calc(10 * (2.5 * 5) * 1px), calc(2.5 * 5 * 1vw));  /* ~125px */

/* ── Section Padding Override (global CSS) ── */
.wp-block-group[class*=”is-style-section”] {
  padding-top:    60px !important;
  padding-bottom: 60px !important;
}

/* ── Heading Rhythm (global CSS) ── */
.wp-block-group h3.wp-block-heading { margin-top: 0 !important;  margin-bottom: 4px !important;  }
.wp-block-group h1.wp-block-heading { margin-bottom: 10px !important; }
.wp-block-group h2.wp-block-heading { margin-bottom: 32px !important; }

/* ── Icon Card Grid ── */
.icon-card-grid .wp-block-image {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}
.icon-card-grid .wp-block-image img {
  width: auto !important;
  max-width: 120px !important;
  height: auto !important;
}
.icon-card-grid .wp-block-column          { text-align: center !important; }
.icon-card-grid .wp-block-column h3.wp-block-heading {
  width: 100% !important;
  text-align: center !important;
}

/* ── Site max content width ── */
/* Constrained layout max: ~1200px (theme default) */
/* Alignfull = full viewport width */
/* Alignwide = slightly narrower than full */
    

06 — Layout

Section Patterns

The five recurring section background styles used across the site. Each is a full-width (alignfull) WordPress Group block. Section padding is standardized to 60px top/bottom via global CSS (overriding individual block settings).

MY APPROACH

The CARE Framework

Sage — Section 2

CARE Framework, methodology sections. Dark-mode feel with white text.

.is-style-section-2 #8FA79A

ABOUT

Hi, I’m Kris

Terracotta — Section 3

Bio/personal sections. Warm, inviting tone.

.is-style-section-3 #C77D63

“My approach is grounded in current research and lived experience.”

Slate — Dark Quote

Pull quotes, bio text, footer. White text on slate.

custom style bg #5C7387

THOUGHT LEADERSHIP

Thinking Out Loud

Warm Cream — Default

Thought Leadership, Connect, general content sections.

.is-style-default #F7F5F2

SERVICES

Who I Work With

Near White — Light

Services section, card grids on light background.

custom #FAFAFA #FAFAFA

07 — Components

Buttons & CTAs

One primary button style used consistently across the site. All CTAs use the same label: “GET STARTED”.

GET STARTED GET STARTED

Primary Button

Background: #5C7387 (Slate)
Text: #FFFFFF
Padding: 16px 24px
Border radius: 10px
Font: Rubik, 14px, 600
Letter-spacing: 0.06em
Text: UPPERCASE

CTA Text

Always “GET STARTED”

Links to: /request/

Secondary button is in the header navigation (styled separately with rounded border)

Designer Developer

      
/* ── Primary Button (WP Block Button) ── */
.wp-block-button__link {
  background-color: #5C7387;
  color: #ffffff;
  padding: 16px 24px;
  border-radius: 10px;
  font-family: Rubik, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ── Nav Header CTA Button ── */
/* Set in Navigation block → button style → custom colors */
/* bg: #5C7387, text: #fff, rounded border, same specs above */
    

08 — Iconography

Core Values Icons

Four custom icons representing Kris Singer’s core values as a clinician. Used on the About page. Each is 180×180px PNG with transparent background.

Witness

Seeing and holding space for another’s full experience without agenda or judgment.

WP ID: 1186 · 180×180px

Protector

Advocating for safety, boundaries, and systemic equity in clinical and community spaces.

WP ID: 1183 · 180×180px

Nurturer

Creating conditions for growth, healing, and authentic self-expression.

WP ID: 1184 · 180×180px

Co-Conspirator

Actively working alongside clients and communities toward liberation and equity.

WP ID: 1185 · 180×180px

Designer Developer

      
/* ── Core Values Icon URLs (WP Media Library) ── */
Witness:        ID 1186  icon-witness.png         180×180
Protector:      ID 1183  icon-protector.png       180×180
Nurturer:       ID 1184  icon-nurturer.png        180×180
Co-Conspirator: ID 1185  icon-co-conspirator.png  180×180

/* ── Base URL ── */
https://singerwellness.org/wp-content/uploads/2026/06/

/* ── Used on: About page (ID 52) ── */
/* Block: 4-column wp:columns group, each with wp:image ── */
/* Display size: 120px recommended, centered in column ── */
    

09 — Iconography

Service Icons

Three icons representing the primary service populations. Used on the Services page and individual service pages. Redesigned to match core values icon visual language: flat fills, bordered inner shapes, tile border.

Individuals

LGBTQ+, TGNC, and affirming-care-seeking adults in individual therapy.

Tile: #D8E8E2 · Border: #7AADA0

Youth, Families & Schools

School counseling, caregiver workshops, and youth-focused affirming care.

Tile: #C4D2DA · Border: #7898A8

Clinicians & Orgs

Clinical training, supervision, and organizational consultation.

Tile: #EDCFBE · Border: #B07840

Designer Developer

      
/* ── Service Icon Spec (redesigned to match Core Values visual language) ── */
ViewBox:  0 0 180 180   tile rx=28   content zone x=18–162, y=32–150
Strokes:  major shapes 4px   medium 3px   details 2px   tile border 5px

Individuals       tile #D8E8E2  border #7AADA0  — slate + terracotta figures, white heads, sage plant
Youth/Families    tile #C4D2DA  border #7898A8  — house + 3 stepped figures + school arch
Clinicians & Orgs tile #EDCFBE  border #B07840  — two figures + sage dome table + focus symbol

/* ── Used on ── */
Services page (ID 48), individual service pages (IDs 279, 315, 312)
Export as SVG or 192×192px PNG · replace WP Media IDs 1099, 1100, 1101
    

10 — Illustrations

Illustration Library

Custom illustrated scenes of a therapy office. The primary brand illustration. Multiple versions for different contexts. Style: flat vector, muted tones matching brand palette.

Office Scene — Full (with Kris)

Complete therapy room illustration with Kris seated in armchair. Black border, full scene including bookshelves, plants, posters (“YOU BELONG AS YOU ARE”, CARE Framework values, “I AM ENOUGH”). Primary social sharing / LinkedIn image.

WP ID: 1207 · 1548×1236px · PNG

Office Scene — Hero (with Kris)

Square crop of the therapy room with Kris. Used as homepage hero and page featured images. No black border — crops to the interior scene.

WP ID: 672 · 1254×1254px · PNG

Office Scene — Empty Room

The same therapy room without Kris in the chair. Used for contexts where the empty, welcoming space is the focus rather than the clinician.

WP ID: 228 · 1402×1122px · PNG

Illustration Visual Style

Flat vector illustration style. Muted, warm palette matching the brand colors. The room features:

Three arch-shaped background panels (sage, blue, peach)
White armchair with slate-blue throw blanket
Posters with affirming messaging
Bookshelf with titles: “Beyond Binary”, “Gentle Transitions”
Cards/signs: “Care Without Conditions”, “I Am Enough”
Plants, round coffee table, mug
CARE Framework values listed: Identity · Safety · Exploration · Affirmation · Growth

Designer Developer

      
/* ── Illustration Media IDs ── */
Full scene (w/ Kris):  ID 1207  sew_kris-office-graphic-1.png       1548×1236
Hero crop (w/ Kris):   ID 672   sew_kris-office-graphic_hero-2.png  1254×1254
Empty room:            ID 228   sew_office-graphic_wo-kris.png      1402×1122

/* ── Variant series (sew_graphics-*) ── */
IDs 248–263: sew_graphics-{0-7}.png  — 1548×1236px each
/* Additional illustration variants in the same style ── */

/* ── Fetching via REST API ── */
GET /wp/v2/media/{id}          → returns source_url, dimensions, alt_text
GET /wp/v2/media?per_page=100  → full library listing
    

11 — Structure

Navigation

Primary navigation with two dropdown submenus (Services and Resources) and a highlighted CTA button.

HOMEsingerwellness.org/

ABOUTsingerwellness.org/about-2/

SERVICES ▾singerwellness.org/services/

Individual Care → /affirming-therapy/

Schools & Caregivers → /school-counseling-caregiver-workshops/

Training & Education → /clinical-training-org-support/

THOUGHT LEADERSHIPsingerwellness.org/thought-leadership/

RESOURCES ▾singerwellness.org/lgbtq-tgnc-affirming-resources/

Legislation Tracker → /#legislation-tracker

Youth, Families & Schools → /#youth-families-schools

Educational Videos → /#educational-videos

Essential Reading → /#essential-reading

Clinical Research → /#clinical-research

RESUMEsingerwellness.org/resume/

★ GET STARTED (CTA)singerwellness.org/request/

12 — Structure

Site Pages

All published pages with their WordPress page IDs. IDs are stable and used in REST API calls and page-specific CSS targeting.

Core Pages

Home — ID 1 · /about/
About — ID 52 · /about-2/
Services — ID 48 · /services/
Thought Leadership — ID 34 · /thought-leadership/
Resources — ID 350 · /lgbtq-tgnc-affirming-resources/
Resume — ID 746 · /resume/
Get Started — ID 984 · /request/

Service Sub-pages

Individual Care — ID 279 · /affirming-therapy/
Schools & Caregivers — ID 315 · /school-counseling-caregiver-workshops/
Training & Education — ID 312 · /clinical-training-org-support/

Page-Specific CSS

WordPress adds a .page-id-{N} class to the body element. Use this to scope page-specific CSS overrides without affecting global styles.

Example: .page-id-52 .wp-block-group { ... }

13 — Developer Reference

WordPress Specifications

Platform, theme, and key technical configuration for the site.

Platform

WordPress.com (hosted)
Theme: Assembler (FSE)
Site ID: 255058468
Admin: singerwellness-pajsi.wordpress.com
Public domain: singerwellness.org

Global Styles

REST: GET /wp/v2/global-styles/2
Custom CSS lives in styles.css
When POSTing: always include typography and elements alongside css
Changes apply instantly (bypasses CDN cache)

Block Style Names

.is-style-section-2 — Sage bg
.is-style-section-3 — Terracotta bg
.is-style-default — Cream bg
.alignfull — full viewport width
.alignwide — wide (slightly inset)
.has-background — custom bg set
.has-global-padding — uses theme padding

Key REST Endpoints

GET/POST /wp/v2/pages/{id}
GET/POST /wp/v2/global-styles/2
GET /wp/v2/media/{id}
GET /wp/v2/template-parts
GET /wp/v2/settings

CDN / Caching Notes

Page content updates cached by WP.com CDN
CSS (global styles) applies instantly
Force-publish with status: 'publish'
OG images served via i0.wp.com CDN

Limitations

Query Loop blocks don’t render on static pages
Use static post cards instead
Template parts: footer slug = footer
Cannot add custom plugins on .com plan

14 — Developer Reference

CSS Variables Reference

    
/* ══════════════════════════════════════════
   SINGER EQUITY & WELLNESS — CSS VARIABLES
   WordPress Assembler Theme · singerwellness.org
   ══════════════════════════════════════════ */

/* ── Brand Colors (custom inline values) ── */
–sew-slate:      #5C7387;  /* primary — buttons, footer, dark sections */
–sew-sage:       #8FA79A;  /* CARE section, accents */
–sew-terracotta: #C77D63;  /* bio section, warm accent */
–sew-cream:      #F7F5F2;  /* page bg, default sections */
–sew-near-white: #FAFAFA;  /* services section bg */
–sew-white:      #FFFFFF;  /* cards, reviews, button text */
–sew-ink:        #1E1E1E;  /* all body text */

/* ── WordPress Theme Color Presets ── */
–wp–preset–color–theme-1: #FFFFFF;
–wp–preset–color–theme-2: #EEEEEE;
–wp–preset–color–theme-3: #BBBBBB;
–wp–preset–color–theme-4: #1E1E1E;
–wp–preset–color–theme-5: #000000;

/* ── Typography ── */
–wp–preset–font-family–lora:  Lora, serif;
–wp–preset–font-family–rubik: Rubik, sans-serif;

–wp–preset–font-size–small:    clamp(14px, 0.875rem + ((1vw – 3.2px) * 0.179), 16px);
–wp–preset–font-size–medium:   clamp(20px, 1.25rem + ((1vw – 3.2px) * 0.357), 24px);
–wp–preset–font-size–large:    clamp(23px, 1.44rem + ((1vw – 3.2px) * 1.335), 38px);
–wp–preset–font-size–x-large:  clamp(33px, 2.089rem + ((1vw – 3.2px) * 2.373), 60px);
–wp–preset–font-size–xx-large: clamp(40px, 2.5rem + ((1vw – 3.2px) * 3.571), 80px);

/* ── Spacing ── */
–wp–preset–spacing–20: min(50px, 2vw);    /* ~25px at 1000px viewport */
–wp–preset–spacing–30: min(50px, 5vw);    /* ~50px */
–wp–preset–spacing–40: min(75px, 7.5vw);  /* ~75px  ← PRIMARY SECTION PADDING */
–wp–preset–spacing–50: min(100px, 10vw); /* ~100px */
–wp–preset–spacing–60: min(125px, 12.5vw);/* ~125px */
  

15 — Developer Reference

Custom Global CSS

All custom CSS added to WordPress Global Styles (lives in /wp/v2/global-styles/2 → styles.css). Do not remove existing rules when updating.

    
/* ══════════════════════════════════════
   SEW GLOBAL STYLES — Custom CSS
   Applied via: WP REST API → global-styles/2
   ══════════════════════════════════════ */

/* ── Global nav fix ── */
.wp-block-navigation {
  flex-wrap: nowrap !important;
}

/* ── Singer Wellness — Spacing Standardization ── */
.wp-block-group h3.wp-block-heading { margin-top: 0 !important; margin-bottom: 4px !important; }
.wp-block-group h1.wp-block-heading { margin-bottom: 10px !important; }
.wp-block-group h2.wp-block-heading { margin-bottom: 32px !important; }
.wp-block-group[class*=”is-style-section”] {
  padding-top: 60px !important;
  padding-bottom: 60px !important;
}

/* ── Icon Card Grid (Resources block on Home + TL pages) ── */
/* Add class “icon-card-grid” to the wp:columns block + HTML div */
.icon-card-grid .wp-block-image {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}
.icon-card-grid .wp-block-image img {
  width: auto !important;
  max-width: 120px !important;
  height: auto !important;
}
.icon-card-grid .wp-block-column { text-align: center !important; }
.icon-card-grid .wp-block-column h3.wp-block-heading {
  width: 100% !important;
  text-align: center !important;
}

/* ── About page: CARE section button margin ── */
.page-id-52 .wp-block-group.is-style-section-2 .wp-block-buttons {
  margin-top: var(–wp–preset–spacing–40) !important;
}

/* ── About page: hero mobile fix ── */
@media (max-width: 781px) {
  .page-id-52 .wp-block-cover.alignfull .wp-block-cover__inner-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* ── About page: icon alignment in CARE columns ── */
.page-id-52 .wp-block-group.alignwide.has-theme-1-background-color .wp-block-column .wp-block-image {
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ── About page: section padding overrides ── */
.page-id-52 .wp-block-group.is-style-section-2 {
  padding-left: var(–wp–preset–spacing–40) !important;
  padding-right: var(–wp–preset–spacing–40) !important;
}
.page-id-52 .wp-block-group.alignfull.is-style-default {
  padding-left: var(–wp–preset–spacing–40) !important;
  padding-right: var(–wp–preset–spacing–40) !important;
}
.page-id-52 .wp-block-group.alignfull.has-background:not([class*=”is-style”]) {
  padding-left: var(–wp–preset–spacing–40) !important;
  padding-right: var(–wp–preset–spacing–40) !important;
}

/* ── About page: TL section background ── */
.page-id-52 .entry-content .wp-block-group.alignfull.is-style-default {
  background-color: #f7f5f2 !important;
}

/* ── About page: Connect section background ── */
.page-id-52 .entry-content .wp-block-group.alignfull.has-background:not([class*=”is-style”]) {
  background-color: #ffffff !important;
}

/* ── Footer: restore correct bg after about-page override ── */
.page-id-52 .wp-block-template-part .wp-block-group.alignfull.is-style-default.has-background {
  background-color: #5c7387 !important;
}
  

16 — AI Reference

AI Prompts & Brand Descriptions

Copy-paste prompts for AI image generation, code tasks, and brand extension work.

Brand Visual Description

Singer Equity & Wellness is a queer-affirming therapy and wellness practice. Visual brand: warm, modern, grounded. Palette of muted sage green (#8FA79A), terracotta (#C77D63), slate blue (#5C7387), and warm cream (#F7F5F2). Typography uses Rubik (sans-serif, uppercase labels and headings) paired with Lora (serif, body copy). Flat vector illustration style. Soft, earthy tones. No harsh contrasts. Welcoming without being clinical.

Illustration Style Prompt

Flat vector illustration of a cozy therapy office. Muted warm palette: sage green, terracotta, dusty blue, warm beige, soft white. Three arched background panels in different muted colors. White armchair with slate-blue throw blanket. Round wooden coffee table. Bookshelf with books and plants. Wall posters with affirming messages. Illustrated plants: monstera, succulent, pothos. Style: modern flat illustration, no outlines on fills, subtle shadows. Inclusive, gender-affirming, safe-space atmosphere.

Icon Style Prompt

Simple flat icon, minimal line weight, rounded edges. Muted sage green (#8FA79A) and slate blue (#5C7387) on transparent background. Consistent style across a set of 4 icons representing: Witness, Protector, Nurturer, Co-Conspirator. 180×180px. No gradients. Single-color fills. Clean and modern.

Developer Context Prompt

I’m working on singerwellness.org, a WordPress.com FSE site using the Assembler theme. Site ID: 255058468. All edits are made via the WordPress REST API using wp.apiFetch() from an authenticated browser tab on the admin editor. Key technical facts: – Global styles: POST to /wp/v2/global-styles/2, ALWAYS include typography and elements alongside css: { styles: { typography, elements, css } } – Section padding: 60px top/bottom via CSS override on .wp-block-group[class*=”is-style-section”] – Heading rhythm: H3 mb:4px, H1 mb:10px, H2 mb:32px (all inside .wp-block-group) – Icon card grid: .icon-card-grid class on columns, icons 120px max-width centered, text center-aligned – Brand colors: Slate #5C7387, Sage #8FA79A, Terracotta #C77D63, Cream #F7F5F2 – Fonts: Rubik (headings), Lora (body) – Page IDs: Home=1, About=52, Services=48, Resources=350, Request/CTA=984 – Page-specific CSS scoped with .page-id-{N} on body – Query Loop blocks do NOT render on static pages — use static post cards – CSS changes (global styles) apply instantly; page content changes are CDN-cached

Brand Voice / Copywriting Prompt

Write in the voice of Kris Singer (they/them), a licensed clinical therapist specializing in LGBTQ+ and TGNC-affirming care. Tone: warm, direct, credible, and inclusive. Clinical without jargon. Gender-expansive language. Community-first perspective. Never cold or corporate. Grounded in lived experience and research. The CARE Framework (Contextual Assessment for Relational Ethics) is proprietary — reference it as a signature methodology, not a general concept. CTAs always say “GET STARTED” and link to /request/.