Design system

Nyra runs on the Care design system. It is flat and quiet: a near-black void canvas, cream ink, olive hairlines, and a single green accent used sparingly. No glass, no gradient, no shadow, no decorative backdrop. Type does the work. The rules below are short on purpose. When in doubt, do less.

Color

Six tokens, all defined as CSS variables in :root and re-exported as Tailwind utilities (bg-void, text-cream, border-olive, text-ash, text-ash-dim, text-green).

Token	Value	Role
--void	#0e100f	Canvas. The body background, behind everything.
--cream	#fffce1	Ink. Primary text, headings, strong copy.
--olive	#42433d	Hairlines. Every border, rule, and divider.
--ash	#7c7c6f	Muted text. Body copy that recedes, mono labels.
--ash-dim	#565649	Dimmest. Separators inside labels, lowest contrast marks.
--green	#0ae448	The single accent. Links, the .mark underline, the selection fill, the focus ring.

Green is the only chromatic color on the site. Everything else is the void-to-cream range. There are no light surfaces. Body copy is --cream mixed down toward transparent (roughly 82 percent) so it sits just under the headings.

Type

Two families, both loaded as Next.js font variables.

• Inter Tight (--care-sans): set hard for running text, UI, labels, inline code, and compact data. It carries the product voice without switching into a terminal register.
• Newsreader (--care-serif): reserved for the wordmark, hero voice, section titles, and editorial headings.

One tracking value carries the body: letter-spacing: -0.014em on body, with .prose-care close behind at -0.012em. Labels stay sentence case, 500 weight, and only open to 0.01em. Avoid all-caps label styling unless the source content is naturally an acronym.

Primitives

These live in src/app/globals.css and are the whole vocabulary. Build from them rather than inventing one-off styles.

• .prose-care: the markdown wrapper for docs articles, blog posts, and changelog notes. Cream ink, green links with a hairline underbar, olive-bordered code and tables, green bullet dots. Table heads use the main sans face.
• .care-eyebrow: sans, 11px, 500 weight, 0.01em tracking, ash. The small label that sits over a section.
• .care-display: the big editorial title. Newsreader, 500 weight, normal tracking, line-height 1.04. Set like the home hero.
• .care-rule: a 1px olive hairline. The only divider.

And three components that wrap the inline patterns:

• <Term> (.term / .term--hinted): the clinical-terms chip. An inline sans token for proper nouns like PHQ-9, GAD-7, PHI, HIPAA, 988. Pass a hint and it renders as an <abbr> with a CSS-only tooltip on hover and focus, no JS and no portal. Underline offset 4px, olive border, ash text that lifts to cream on hover.
• <Mark> (.mark): inline emphasis with a thin green underline. At most one per sentence, for a key claim or action. Keeps the cream text and adds a 1px green border-bottom.
• <SectionLabel> (.section-label): a numbered section header. An olive hairline, then a small index in ash, a dim slash, and the title in cream, reading like 02 / diagnostic loop.

Surfaces

• Flat fills only. Cards and panels are bg-void with a 1px border-olive. No card shadow, no inner glow, no backdrop blur.
• Code blocks sit on a near-void #0b0d0c with an olive border and 4px radius. Inline code is a cream token on a faint cream wash with an olive hairline.
• Tables are borderless except for a per-row border-bottom: 1px solid var(--olive). Heads are sans, sentence case, ash. No per-row chrome.
• Tooltips and popovers are void panels with an olive border and a 2px radius. Same vocabulary as everything else.

Chrome

The shared nav and footer are flat by the same rules: void canvas, mono technical group labels, olive hairline panels, ash links that lift to cream on hover, and the green accent only on the active persona dot.

• src/components/care-nav.tsx: the full site nav. A wordmark, hover-dropdown groups (Product, Resources, Company), a persona switch (For Clinicians, Patients, Agents), and the mobile menu. No glass, no icons.
• src/components/care-footer.tsx: the full footer. Product, Resources, Company, and Safety columns, plus the legal row. The 988 and 911 links stay plain text.

Both pull their styles from care-chrome.module.css.

Tone

• No em dashes anywhere. Use commas, periods, colons, semicolons, parentheses, and " - " hyphen-space.
• 988 and 911 always render as plain readable text. Never behind an icon, never replaced by a phrase like "crisis line."
• Compliance lines (Not medically approved, Not an emergency service) stay text. They are not decorative.

What lives where

• src/app/globals.css: every token, the :root Care palette, the @theme Tailwind mapping, .prose-care, .care-eyebrow, .care-display, .care-rule, and the .term / .mark / .section-label styles.
• src/components/care-nav.tsx and src/components/care-footer.tsx: the shared chrome.
• src/components/section-label.tsx: the numbered section header.
• src/components/term.tsx: the clinical-terms chip with its optional hint tooltip.
• src/components/mark.tsx: the inline green-underline emphasis.

If a rule above is wrong, fix the doc and the token together. The doc is the source of truth, the CSS is the implementation.