How this product
should look, read
and behave.

What runs where

Why the system font, and not a brand face

Substitution stack for web assets

font-family: Inter, -apple-system, BlinkMacSystemFont,
  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

Setting rules

1. 01Sentence case everywhere. ALL CAPS appears only in the 10px monospace labels used in tooling and this document — never in product copy.
2. 02Three weights only: 400, 600, 700. A fourth weight is a decision, not a default.
3. 03Numerals are tabular wherever they sit in a column — times, doses, glucose readings.
4. 04Line length caps at roughly 60 characters on owner screens; a long line is harder to re-find after a blink.
5. 05Line height 1.25 for display and title, 1.45 for body and below.
6. 06Never letterspace body text. Tracking is reserved for the wordmark and the small caps labels.

Brand violet

Neutrals — light

Neutrals — dark (built, not switched on)

Utility tokens

Laws

1. 01Violet 600 is the only saturated fill that means “press me”. One per screen.
2. 02Violet 500 is decoration and wayfinding — icons, links, the active tab. It is not a button.
3. 03There is no second brand hue. Blue and green in this system are states, not identity.
4. 04Neutrals are warm stone, not cool gray. This is the single biggest lever on whether the product reads domestic or clinical.
5. 05A colour with no assigned meaning does not belong in the interface.

Full specification

The same five, dark

Laws

Rendered correctly / incorrectly

Spacing

Radius

Touch targets

Specimens

Laws

1. 01Size floors, state tints and disabled treatment live inside the components — a rushed feature physically cannot ship a 26pt button.
2. 02A loading control keeps its words. The spinner sits beside the label, never replacing it.
3. 03Disabled is 55% opacity and still readable. It is never a grey ghost.
4. 04If a screen needs a part that isn't here, that's a conversation before it's a component.

Laws

1. 01One idea per sentence. Two sentences beat one clever one.
2. 02What happened, then what to do. In that order, every time.
3. 03Use the person's name. Never an ID, never “the owner”, never “the user”.
4. 04Plain clock time — “9:00 AM”, “this morning”. Never a timezone code or a duration in seconds.
5. 05Never blame someone for missing something.
6. 06No exclamation marks in safety copy. Urgency is carried by specificity.
7. 07Say “helpers”, “care network”, “your people”. Never “caregivers”, “patients”, “the elderly”, “monitored”.
8. 08Owners never see system language. There is no such thing as a user-facing error code.

The shape of a safety message

Rewrites

Composition laws

1. 01Geometry does not move between states. The status block, the action and the help control stay put — muscle memory is an accessibility feature.
2. 02One primary action per screen. If two things look equally pressable, neither is obvious.
3. 03The help control renders in every state, including when everything is fine. It is not an error path.
4. 04Vertical rhythm over decoration. Borders and space do the structural work; shadows stay almost invisible.

Across the product

EverWhen

Bold · −4% tracking · white on violet 600

App icon · fixed asset

Facts

Laws

1. 01The wordmark is typography, not artwork — it is never redrawn, outlined, gradient-filled or given a shadow.
2. 02Clear space on all sides equals the cap height of the E.
3. 03Minimum legible size is 16px / 12pt. Below that, use the app icon alone.
4. 04On photography it needs a solid plate. It never sits directly on an image.
5. 05The app icon is a fixed production asset. It is never recoloured, cropped or re-cornered.

Never written as

Adoption

The one divergence worth knowing about

Tokens

{
  "brand":  { "50":"#F5F3FF","100":"#EDE9FE","200":"#DDD6FE","300":"#C4B5FD",
              "400":"#A78BFA","500":"#8B5CF6","600":"#7C3AED","700":"#6D28D9" },

  "light":  { "canvas":"#FAFAF9","surface":"#FFFFFF","surfaceAlt":"#F5F5F4",
              "border":"#E7E5E4","textPrimary":"#1C1917","textSecondary":"#57534E",
              "textMuted":"#79716B","textOnAction":"#FFFFFF",
              "brandAction":"#7C3AED","brandAccent":"#8B5CF6",
              "brandTintBg":"#EDE9FE","brandTintBorder":"#C4B5FD","brandTintText":"#5B21B6",
              "dangerAction":"#DC2626","ringTrack":"#E7E5E4","overlay":"rgba(28,25,23,0.5)",
              "status": {
                "safe":       {"fg":"#16A34A","bg":"#DCFCE7","border":"#86EFAC","text":"#166534"},
                "attention":  {"fg":"#D97706","bg":"#FEF3C7","border":"#FCD34D","text":"#92400E"},
                "urgent":     {"fg":"#DC2626","bg":"#FEE2E2","border":"#FCA5A5","text":"#991B1B"},
                "inProgress": {"fg":"#2563EB","bg":"#DBEAFE","border":"#93C5FD","text":"#1E40AF"},
                "paused":     {"fg":"#4F46E5","bg":"#EEF2FF","border":"#C7D2FE","text":"#3730A3"} } },

  "dark":   { "canvas":"#111318","surface":"#1C1F26","surfaceAlt":"#232730",
              "border":"#2A2E37","textPrimary":"#F5F5F4","textSecondary":"#C7C2BD",
              "textMuted":"#948E88","textOnAction":"#FFFFFF",
              "brandAction":"#8B5CF6","brandAccent":"#A78BFA",
              "brandTintBg":"#27203B","brandTintBorder":"#453768","brandTintText":"#C4B5FD",
              "dangerAction":"#E5484D","ringTrack":"#2A2E37","overlay":"rgba(0,0,0,0.6)",
              "status": {
                "safe":       {"fg":"#4ADE80","bg":"#14261B","border":"#245C38","text":"#86EFAC"},
                "attention":  {"fg":"#FBBF24","bg":"#2B2210","border":"#5C4A1D","text":"#FCD34D"},
                "urgent":     {"fg":"#F87171","bg":"#2A1517","border":"#5C2626","text":"#FCA5A5"},
                "inProgress": {"fg":"#60A5FA","bg":"#14213B","border":"#28497A","text":"#93C5FD"},
                "paused":     {"fg":"#818CF8","bg":"#1B1E3B","border":"#39406E","text":"#A5B4FC"} } },

  "fontSize":  { "display":32,"title":24,"heading":20,"body":17,"secondary":15,"caption":13 },
  "spacing":   { "xs":4,"sm":8,"md":12,"lg":16,"xl":20,"xxl":24,"xxxl":32 },
  "radius":    { "sm":8,"md":12,"lg":16,"xl":24,"pill":999 },
  "tapTarget": { "min":44,"safety":56 }
}

Mirrored from packages/shared/src/theme.ts. One file feeds both the mobile and web apps. If a design needs a colour that isn't in it, the answer is almost always a different token — or a conversation about whether the meaning is genuinely new.

Handing this to someone else

Design for EverWhen, a safety app for people who live alone
and the family who would want to know.

Audience: the person using this is often in their 80s, reading at the
largest text size their phone offers, sometimes without glasses, and
sometimes frightened. A second audience — their adult child — reads
alerts on a lock screen, half-awake.

Non-negotiable:
  - One obvious action per screen. Nothing below 15pt, nothing under 44pt to tap.
  - State is always icon + word + tint. Never colour alone.
  - Warm stone neutrals, one violet (#7C3AED) as the only action colour.
  - Plain language. No system words, no medical words, no exclamation marks.
  - Never imply the app contacts emergency services.

Use the attached tokens exactly. Do not introduce a second brand colour,
a display typeface, or a colour that has no assigned meaning.