A little more calm.
In everything we make.

StillWellWebsite mark + typographic signature

The native app icon

A distinct asset, used for the app.

• Write StillWell with a capital S and W. Use The StillWell Program for the named program; use sentence case elsewhere.
• Use the supplied assets. The website favicon, Apple touch icon and native app icon are distinct existing assets; do not silently substitute one for another or redraw their waveforms.
• For new layouts, leave clear space of at least one quarter of the icon width on each side. Show the website mark at 24 px or larger; use the native icon at appropriate platform resolution.
• Keep marks proportional, upright and unaltered. Do not recolour, stretch, add shadows to, or place busy imagery behind the mark. The wordmark uses a clean semibold sans-serif alongside the supplied mark.

• The /design reference supports Light, Dark and System themes. System follows the device preference; an explicit choice is remembered in this browser. The light canvas is #f6f8f5 with #172e22 text and #08734e accents. Other marketing routes currently retain their dark presentation.
• Use the designThemes light/dark semantic pairs in /design/tokens.json for the guide’s interface. Controls, surfaces and text change together. The native preview has its own theme selector; fixed colour swatches and labelled dark artwork specimens keep their original colours.
• Website foundations: bg-canvas (#0a0f0d), bg-panel (#0d1210), white primary text and neutral-300/400 supporting text. Use emerald-400 for links and emphasis on dark surfaces.
• Asset colours: #10b981 and #2dd4bf come from the existing favicon. Tailwind v4 emerald/teal utilities use OKLCH values and are not exact aliases for these legacy hex values.
• The website highlight gradient runs emerald-400 → teal-300 → cyan-400. Keep gradients to short display text, icon tiles or soft ambient glows. Set body text in a solid colour.
• Mobile defaults to the mint palette and follows the system light/dark preference. Use semantic roles: background, foreground, surface, surface-foreground, accent, accent-foreground, muted, divider, success, warning and danger.
• Mint and alpha light/dark variants are defined and registered in Metro. Default light/dark come from HeroUI. Lavender and sky names appear in the context type but are not currently registered palettes; do not treat them as supported themes.
• Preserve exact native OKLCH source values. Some colours require gamut mapping on sRGB output. Check actual rendered contrast, particularly muted text and light-mode accents; a token is not an accessibility guarantee.

• Website: use the bundled Mona Sans variable font (200–900). The font-display utility sets the width axis to 125 for editorial headings. Do not stretch ordinary body text.
• Mobile: use React Native system typography, including San Francisco on iOS. No custom UI font is loaded by the app. Allow font scaling and flexible text height.
• Marketing: use Mona Sans for designed artwork; use the platform system sans-serif if Mona Sans is unavailable. Use one type family per creative.
• The scale above is contribution guidance based on existing usage. Tailwind v4 text-* utilities use its --text-* scale; the legacy --font-size-* variables in globals.css are used explicitly by rich-text styles and do not redefine those utilities.

• Use a 4-unit spacing base. Web units are CSS pixels; native dimensions are logical points. Prefer Tailwind spacing utilities over arbitrary values.
• Website content uses a centred max-w-7xl container (1280 px), 24 px side padding and 64–96 px section spacing. Collapse grids as space decreases.
• Mobile cards typically use 16 px padding and a 16 px radius. Respect safe areas, keyboard insets and large text settings.
• Use a fully rounded shape for badges and play controls. Hairline white borders at 5–10% opacity separate dark web surfaces; essential control boundaries need stronger contrast.
• Web cards commonly use white at 2–5% over the canvas, with a subtle emerald hover border. Native cards use bg-surface, not copied web hex colours. Native dark shadows are transparent; light-mode shadows come from the theme.

Web specimens demonstrate visual and interaction guidance. They are not native components, live audio controls or captures of the app.

Motion

• Use a calm pace: 150–300 ms for interaction feedback. Existing web entrance animations use a 600 ms ease-out fade with up to 30 px upward travel; stagger steps by 100 ms when appropriate.
• Respect prefers-reduced-motion on the web and the native reduced-motion preference. Remove decorative movement and repeating waves; all content must remain visible without animation or JavaScript.
• Waveforms communicate sound, not measured clinical change. Never flash, pulse urgently, simulate tinnitus with piercing tones, or autoplay audio in marketing.

Accessibility acceptance criteria

• Target WCAG 2.2 AA: at least 4.5:1 for ordinary text, 3:1 for large text and meaningful interface graphics. Test actual foreground/background pairs in every theme and state.
• Use at least 44 × 44 CSS px or native points for touch controls. Keep visible keyboard focus, logical heading order and a skip link. Icon-only actions need accessible names.
• Never use colour or sound alone to communicate state. Add text labels, captions for spoken content and useful alt text for meaningful imagery. Hide purely decorative artwork from assistive technology.
• Check a 320 px viewport, 200% zoom, long labels, native font scaling, keyboard operation and reduced motion. Essential content must reflow without being clipped.

• Use British English (personalised, colour, favourite) for brand copy, except official feature names and platform labels. Use sentence case, everyday words and direct, gentle calls to action.
• Describe features and possibilities without promising a cure, guaranteed relief, a fixed recovery time or universal results. Do not turn general research findings into StillWell user success rates.
• Verify statistics, research quotations, testimonials, ratings, prices, sound counts and availability before publishing. Do not invent endorsements or recycle unverified claims from old marketing files.
• Keep evidence and its context together. Cite the underlying source for any medical or numerical claim and have health-related copy reviewed. This design system supplies brand rules, not clinical advice.

StillWell

Make room
for a little
calm.

One moment. Your own pace.

A moment for you

Choose a sound.
Set a timer.
Take a moment.

StillWell

Dark campaign artwork specimens, shown in their original colours in either page theme. No product outcomes or testimonials are implied.

These are StillWell working templates, not a statement of current platform upload requirements. Check the destination preview and cropping before publishing.

Build a social creative

• Start with the deep green canvas. Add one subtle emerald/teal glow or a calm licensed image. Keep a large area of negative space.
• Set a short headline in Mona Sans semibold/bold (64–88 px on a 1080 px canvas); supporting copy at 32–40 px. Use white text and at most one short accent phrase.
• Keep the supplied logo and StillWell name together with clear space. Place the signature consistently. Use one gentle CTA and avoid crowding the footer.
• For carousels, put one idea on each slide and retain the same margins and title position. Put citations on the relevant slide or in its accompanying caption, not in unreadable fine print.
• Export raster artwork in sRGB. Review at phone size, add alt text and captions, verify factual claims and check the actual platform crop. Sample layouts here are illustrative, not testimonials or product screenshots.

Imagery & iconography

• Use real, current app captures for product imagery. Prefer dark mint for campaign artwork while still showing light mode when relevant. Label illustrative UI and sample data so they cannot be mistaken for the shipped app or a real outcome.
• Choose spacious nature photography, soft light, still water or restrained abstract sound forms. Preserve a quiet area for text. Avoid distressed faces, clinical imagery used as an endorsement, busy collages and neon effects.
• Web icons use simple SVG line work with rounded caps, typically 20–24 px and 1.5–2 px strokes. Mobile uses Ionicons. Existing category emoji may stay in product context; do not mix multiple decorative icon styles in one creative.
• Use licensed or owned media. Add final copy and the supplied mark as separate layout layers after generating imagery; do not ask an image model to invent the logo or reproduce the app UI.

Contribution workflow

• Read /design/brand.md before starting. Fetch /design/tokens.json for exact colour values and /design/system.json for all structured guidance. Choose the website, native or marketing rules for the target surface.
• Reuse existing components and supplied assets. Native additions use HeroUI Native and Uniwind semantic tokens; website additions use the shared canvas tokens, Tailwind and the existing marketing components.
• Keep copy concise and verify every product or health claim against a current source. State any unresolved fact instead of inventing it.
• Review responsive layouts, light/dark native themes, keyboard and screen-reader labels, contrast, loading/error/disabled states, reduced motion and image rights before handing off.
• When changing foundations, update their source CSS and run npm run design:sync in stillwell-web. Run npm run design:check to detect drift. Update design-system.ts and its version when changing guidance; the page, Markdown and JSON all read that same record.