CareIntel · Starry Ward

Active implementation contract · Owner: Beck / CareIntel product design

Clinical command, agency-grade precision.

A shareable brand and styling guide for CareIntel’s Starry Ward visual system: calm, exact, premium, operational, and built on semantic tokens rather than page-by-page styling.

225Shared Button usages verified in source

56Browser viewport checks in source evidence

0Navigation / overflow / non-square button failures

Source of truth

Canonical implementation contract

This document is derived from STARRY_WARD_BRAND_AND_STYLE_GUIDE.md. Runtime implementation remains public/globals.css plus src/components/atoms/button.tsx.

Generated: 2026-07-14T14:06:43Z

01 · Purpose

Not another SaaS skin.

Starry Ward is CareIntel’s clinical-command visual system. It should reduce cognitive load, make operational state legible, and prevent teams from drifting into candy-colored generic AI styling.

Clinical

Precise labels, restrained color, stable hierarchy, explicit state.

Premium

Rich navy depth, fine cyan borders, serif display titles, deliberate spacing.

Calm

Quiet backgrounds, low motion, clear recovery, no visual shouting.

Operational

Dense-but-readable content, scan-first metadata, obvious next action.

Trustworthy

Semantic color, visible focus, consistent controls, no hidden meaning.

Never use

PlaySkool/candy palettes: hot pink, saturated purple, orange, or arbitrary yellow tabs.
White-on-white or dark-on-dark text combinations.
Rounded “AI card” styling on CareIntel command surfaces.
Color alone for critical, warning, success, or clinical meaning.
Page-local hex values for standard buttons.
Multiple primary actions competing inside one decision region.

02 · Semantic color

Name roles, not colors.

The guide uses roles like action-primary, text-muted, and surface-raised. The public artifact shows exact values and intent, but implementation should keep referencing variables.

--starry-deep

#020817
Main canvas

--starry-night-2

#081429
Deep secondary background

--starry-surface

rgba(15, 23, 42, .74)
Standard panel / card

--starry-surface-strong

rgba(15, 23, 42, .88)
Dense or important panel

--starry-surface-raised

#132035
Menus and elevated controls

--starry-ink

#f1f5f9
Primary text

--starry-muted

#a8bad3
Secondary text

--starry-subtle

#7f93ae
Tertiary metadata only

--starry-cyan

#67e8f9
Focus, links, active state

--starry-teal

#2dd4bf
Positive action and success

--starry-gold

#f4c542
Brand emphasis and warning

--starry-danger

#e11d48
Destructive / critical only

--starry-line

rgba(165, 243, 252, .16)
Standard border / divider

--starry-focus

#67e8f9
Keyboard focus indicator

03 · Typography

Serif authority. Sans-serif operations.

Starry Ward pairs premium serif display titles with practical UI/body text. The system is deliberately restrained: readable line lengths, sentence-case headings, short uppercase labels only, and no muted text for required instructions.

Text rules

Button labels begin with a verb. Body lines target 45–75 characters where practical. Labels use short tracked uppercase; prose does not.

Display

clamp(2.55rem, 4.8vw, 4.7rem)

400

.95

One page title; major identity moments.

Heading

clamp(1.5rem, 2.4vw, 2.25rem)

400

1.1

Major sections and operational page headers.

Body

14–16px

400

1.5–1.6

Reading and operational content.

UI emphasis

14–16px

600

1.2–1.5

Actions and key values.

Label

12px

700

1.4

Short uppercase metadata only.

04 · Component contract

Buttons carry consequence.

All application buttons must render through src/components/atoms/button.tsx. Native buttons are prohibited by the Starry audit; variants communicate priority, reversibility, and clinical consequence.

State contract

Default, hover, active, focus, disabled, loading, selected, destructive, and reduced-motion behavior belong in the shared component contract — not individual pages.

Save changes

default

Primary action
One dominant action per decision region

Secondary

secondary

Neutral alternative
Secondary action with visible surface

Outline

outline

Reversible / lower priority
Cancel, view, filter, alternate path

Ghost

ghost

Quiet contextual action
Toolbars and compact icon actions

Link

link

Navigational text action
Inline action behaving like a link

Success

success

Explicit completion
Confirmed positive completion

Warning

warning

Attention required
Consequential warning, not decoration

Destructive

destructive

Irreversible / damaging
Delete, revoke, close destructive state

Unstyled

unstyled

Legacy/layout adapter
Temporary adapter only

Hover

Border/surface may shift; movement max 1px.

Active

Returns to base position.

Focus

Cyan 2px outline plus visible outer ring.

Disabled

Readable, identifiable, no pointer events.

Reduced motion

Disables translation and decorative transition effects.

05 · Surfaces and layout

Depth from luminance, not decoration.

Starry Ward uses zero-radius panels, 4/8/12/16/24/32px spacing, and 1px translucent cyan borders. It should never rely on rounded cards, generic AI gradients, or arbitrary shadows to feel modern.

Acceptance floor

No horizontal overflow at 390px or 1440px. Button radius computes to 0px. Text contrast meets WCAG floor. Meaning is never color-only.

Starry route shell

Clinical dashboard

Square surfaces, active state, precise hierarchy.

Active case

Orders

Alerts

PatientStatusAction

Scan-first metadataReadyReview

Clinical noteAttentionResolve

06 · Accessibility

Release infrastructure, not polish.

Accessibility is part of the product contract: contrast, focus, keyboard behavior, target size, responsive wrapping, and non-color meaning are audited before release.

AA

Text contrast: 4.5:1 normal; 3:1 large/bold.

FX

Visible keyboard focus at 3:1 state contrast or better.

44

Interactive target: 40px preferred; 44px for primary/touch-heavy actions.

RM

Reduced-motion behavior for decorative animation.

NC

Meaning is not carried by color alone.

07 · Governance

Change the system. Not the page.

The guide’s highest-value rule is operational: a token or shared-component change must cascade across routes without page-by-page color edits.

01

Change semantic tokens in public/globals.css.

02

Change component behavior and variants in src/components/atoms/button.tsx.

03

Update the authenticated /style-guide state examples.

04

Run pnpm audit:starry and the production build.

05

Run node scripts/verify-starry-pages.mjs <base-url> <evidence-dir>.

06

Capture desktop/mobile evidence and update the page audit.

08 · Research basis

Backed by current design-system practice.

Beck’s source guide grounded Starry Ward in WCAG, USWDS, GOV.UK, IBM Carbon, Storybook, Atlassian tokens, and Material Design token evidence.

WCAG 2.2 — Contrast (Minimum)Contrast floor: 4.5:1 normal text; 3:1 large text.

WCAG 2.2 — Focus AppearanceKeyboard focus must be visibly detectable.

U.S. Web Design System — ButtonImportant actions need clear surfaces and states.

GOV.UK Design System — ButtonButton labels describe the action; variants communicate priority and consequence.

IBM Carbon — Color TokensTokens organize reusable roles: background, layer, text, link, border, focus, support.

Storybook — Why StorybookIsolated component examples prevent page-only drift.

Atlassian Design — TokensTokens serve as the single source of truth across design and code.

Material Design 3 — Design tokensUsed as corroborating design-token index evidence in the source guide.

Implementation boundary: This HTML/PDF is a shareable documentation artifact. It does not deploy or modify the CareIntel application. The canonical app implementation remains the authenticated CareIntel route /style-guide and code files listed above.

Generated UTC: 2026-07-14T14:06:43Z. Canonical source SHA256: 85a19eb67f0f4a56cc37cc99203a4ee204e3a4a395e92e3b29888eb6913dfaef.