Internal
Design system
The living catalog of this site's tokens, primitives, brand marks, and chrome. Internal reference; not linked from public navigation.
Color pairings
Every foreground/background pairing the site uses, rendered as real text and controls.
Body text on paper ground.
Muted secondary copy on paper.
Accessible slate accent text on paper.
Body text on a white surface.
Muted secondary copy on surface.
Color tokens
| Token | Value | Use |
|---|---|---|
| --color-paper | #f7f7f7 | Page ground - soft off-white |
| --color-stone | #eef1f4 | Alternate section wash, pale blue-grey |
| --color-surface | #ffffff | Forms, cards, elevated panels |
| --color-ink | #1d1d1f | Near-black: headings, skip link |
| --color-slate | #9dacb5 | Signature powder slate (decorative only) |
| --color-slate-deep | #5c6f7d | Accessible slate: text, fills, bands |
| --color-slate-deeper | #4e5f6b | Hover, active nav |
| --color-text | #1d1d1f | Body + headings |
| --color-muted | #5b6166 | Secondary copy |
| --color-on-dark | #ffffff | Text on slate-deep bands |
| --color-on-brand | #ffffff | Text on slate-deep buttons |
| --color-line | rgba(29, 29, 31, 0.12) | Dividers, cards, inputs |
| --color-line-strong | rgba(29, 29, 31, 0.28) | Emphasized rules |
| --color-overlay | rgba(29, 29, 31, 0.5) | Mobile nav scrim |
Typography
Hero, tracked
Display for bands
Section titles
Subheading: quiet sentence-case structure
Lead body text in light Inter, sized for thoughtful prose.
Base body text at sixteen pixels with a 1.75 line height.
Small muted captions and notes.
01Eyebrow label
Spacing & layout
| Token | Value | Use |
|---|---|---|
| --container-max | 72rem | Page container |
| --prose-max | 42rem | Readable prose column |
| Section padding | clamp(2.75rem, 7vw, 6rem) | Vertical rhythm |
Radius
--radius-card: 2px
--radius-control: 2px
--radius-frame: 2px
Motion
| Token | Value | Use |
|---|---|---|
| --dur-hover | 0.3s | Button and link hovers |
| --dur-reveal | 0.55s | Once-per-section fade-up |
| --ease-calm | cubic-bezier(0.4, 0, 0.2, 1) | All transitions |
All motion collapses to essential state changes under prefers-reduced-motion.
Layering
| Token | Value | Use |
|---|---|---|
| --z-header | 40 | Sticky header |
| --z-dropdown | 45 | Nav dropdown panels |
| --z-drawer | 50 | Mobile drawer + scrim |
| --z-skip | 60 | Skip link |
Buttons
Eyebrows & text
02Areas of focus
Lead paragraph text used for hero supporting lines.
Muted body text for secondary copy and quiet captions.
Cards & callouts
A quiet card
Cards hold interaction: focus areas, policies, resources, and listings.
A calm callout
Crisis and policy notes use this informational treatment rather than alarming red UI.
Accordion
How do I know if we will be a good fit?
Fit matters in therapy. The simplest way to explore it is to ask about a complimentary 15-minute consultation through Solid Ground Psychotherapy, PLLC. A brief conversation can give you a feel for how I work and whether it seems like the right match for what you are looking for.
Do you meet in person or virtually?
Both. I see clients in person at the Solid Ground Psychotherapy office in Arlington, Virginia, and virtually with clients located anywhere in the Commonwealth of Virginia.
Form controls
Live forms render through the platform form widget; these are the base field styles.
Wordmark
The brand mark is the name itself, set in tracked Cormorant Garamond capitals.
Miriam Merin, LCSW
Psychotherapy in Arlington, Virginia
Miriam Merin, LCSW
Psychotherapy in Arlington, Virginia
Palette
Slate
#9dacb5
Slate deep
#5c6f7d
Slate deeper
#4e5f6b
Ink
#1d1d1f
Stone
#eef1f4
Paper
#f7f7f7
Typefaces
Cormorant Garamond
Display and headlines: graceful, quiet, meditative.
Inter
Body and UI, in light weights: clear, calm, accessible.
Header & navigation
Header · 390px
Header · 834px
Header · 1000px
Header · 1600px
Footer
Footer · 390px
Footer · 1600px