Skip to content
StrictThemes

Themes / 22

Solace

A soft, steady theme for therapists, coaches and private practices. Blush paper, indigo ink, and mauve greys with no signal color.

Install into a shadcn project
npx shadcn@latest add https://strictthemes.com/r/solace.json

01 / Preview

Stock shadcn components, this theme.

Solace

Ship the page, keep the system.

Every color, corner and typeface in this box comes from the theme's tokens. The components are stock shadcn.

NewDraftv1.2.0Failed
Invite a reviewer
They get read access to this project.
Colors on token96%
x
Spacing on scale88%
x
Type on scale100%
x

02 / Page prompts

Paste one into your agent. Get that page.

Each prompt is a full brief for one page in this theme: its sections, layout, behavior, and a checklist the agent goes through before it says it is done. The rules in every prompt are generated from the theme's strict block. Each preview is the page built from the prompt, shown as it came out.

  • Home

    The home page of a private therapy practice of one therapist, with a quiet opening, what people bring as a short list, how it starts in three steps, the therapist in brief with a round portrait, the fee in one line and one action.

    42.4k characters

    Strict Check 100%

    Preview the Home pageRead the prompt: Home

  • Approach

    A therapist's page on how sessions work, a long page read in one column, with a short list of contents that links to its sections, what happens before and in a first session, what comes after, one thing a client said set in the italic, what the therapist does not offer and one action.

    41.9k characters

    Strict Check 100%

    Preview the Approach pageRead the prompt: Approach

  • Profile

    The profile page of one therapist in private practice, with a round portrait beside her name, her training and registration as a list, her areas of work, her languages, a table of the days and times sessions are held and whether each is in person or online, and one action.

    42.0k characters

    Strict Check 100%

    Preview the Profile pageRead the prompt: Profile

  • Fees

    A therapist's page of fees and questions, with a table of session types with their length and fee, how to cancel and how to pay as two cards, eight questions that open and close, and one action.

    43.1k characters

    Strict Check 100%

    Preview the Fees pageRead the prompt: Fees

  • Appointment

    A therapist's page for requesting a first session, with a note that the practice is not an emergency service, a form for a name, an email address, an optional phone number, how to be contacted, in person or online, the times that suit, an optional message and consent, checked in code and replaced by a confirmation, with what happens next and a few lines on confidentiality beside it.

    43.7k characters

    Strict Check 100%

    Preview the Appointment pageRead the prompt: Appointment

03 / Colors

Every color the theme allows.

  • primary

    #22223B / #C9ADA7

  • on-primary

    #F2E9E4 / #22223B

  • secondary

    #C9ADA7 / #4A4E69

  • on-secondary

    #22223B / #F2E9E4

  • tertiary

    #9A8C98

  • on-tertiary

    #22223B

  • neutral

    #4A4E69 / #B8ADB6

  • background

    #F2E9E4 / #191929

  • surface

    #FAF5F2 / #22223B

  • foreground

    #22223B / #F2E9E4

  • border

    #DFD0C9 / #3A3B57

  • error

    #9B2C2C / #F0A3A3

Left: light mode. Right: dark mode.

04 / Typography

Five sizes. Nothing in between.

  • display

    Literata · 56px · weight 400 · line 1.1

    The quick brown fox

  • h1

    Literata · 38px · weight 400 · line 1.2

    The quick brown fox

  • h2

    Literata · 24px · weight 500 · line 1.3

    The quick brown fox

  • body

    Mulish · 17px · weight 400 · line 1.7

    The quick brown fox

  • label

    Xanh Mono · 14px · weight 400 · line 1.3

    The quick brown fox

05 / Shape and space

Corners and spacing.

  • sm

    6px

  • md

    12px

  • lg

    20px

  • xs

    4px

  • sm

    8px

  • md

    16px

  • lg

    28px

  • xl

    48px

  • 2xl

    112px

06 / Rules

What the strict block enforces.

Contrast
WCAG AA
Colors
Tokens only, within 0.02 of a token
Spacing
Scale only, plus 0, 1px, 2px
Corners
Scale only, full rounds up to 72px
Type
Scale only, declared fonts only
purple gradient
Not allowed
emoji icons
Not allowed
nested cards
Flagged
glow shadows
Not allowed

07 / Guidance

What your agent reads.

Overview

Solace is for people whose work is listening: a therapist, a counsellor, a coach, a small group practice. A visitor may arrive anxious, so the page is calm before it is anything else: blush paper, indigo ink, greys with mauve in them, and no color that shouts. There is one thing to do on a page, and it is never urgent.

Colors

  • Primary (#22223B) is indigo ink, for the one main action: "Request a first session". In dark mode the main action is rose taupe with ink text. Links are the text color, underlined.
  • Secondary (#C9ADA7) is rose taupe, with ink on it, for every other button.
  • Tertiary (#9A8C98) is mauve grey, with ink on it, for one badge: "Online", "In person", "Evenings".
  • Neutral (#4A4E69) sets durations, fees and captions.
  • Background (#F2E9E4) is blush paper. Surface (#FAF5F2) is a paler blush for cards.
  • Error (#9B2C2C) is used only with a message, and the message says how to put it right.

There is no accent color. Emphasis comes from size, from space and from the italic.

Typography

Literata sets headings at weight 400: a book serif with a warm italic. A phrase in a heading, and anything a client said, may be set in the italic. Never set a heading bold. Mulish sets body text at 17px with open leading, in short paragraphs. Xanh Mono sets labels in sentence case: times, lengths of sessions, fees, days of the week.

Layout

A 12-column grid, 1080px at its widest, with 28px gutters. Most pages are one column of seven or eight, with the other columns empty or holding one short note. Spacing comes from the scale (4, 8, 16, 28, 48, 112): 28px inside a card, 112px between sections. Sections are divided by space alone.

Elevation & Depth

Flat and soft. A card is a paler blush with a 1px border and no shadow. Menus and dialogs float on one soft, mauve-tinted shadow.

Shapes

Soft: 6px for badges and checkboxes, 12px for buttons and inputs, 20px for cards. A portrait, a switch and a radio button are fully round.

Components

  • Buttons: indigo for the one main action (rose taupe in dark mode), rose taupe for the rest (slate in dark mode). Sentence-case labels in the body font, weight 500.
  • Cards: paler blush, 20px corners, 28px padding, a 1px border.
  • Badges: mauve grey with ink text, one or two words, sentence case.
  • Questions and answers: a question in the heading font, an answer in body text, a hairline between pairs.
  • Portraits: round, drawn large beside a name and a line of training.
  • Icons: 1.5px stroke line icons with round caps, few. Never emoji.

Do's and Don'ts

  • Do write as one person speaks to another: short sentences, plain words, "you" and "I".
  • Do give one action on a page and say what happens after it.
  • Do say fees, lengths and how to cancel plainly.
  • Don't use urgency: no countdowns, no "limited places", no pop-ups.
  • Don't promise results, and don't decorate with leaves, waves or sunrises drawn in code.
  • Don't use gradients, glows or a card inside a card.
  • Don't introduce a color, size or radius that is not a token above.