/* Fahim, shared styles. Mobile-first: the real capture surface is a phone held by someone standing at their mailbox, so that is the design target. Every colour lives in a variable so dark mode is a palette swap, not a second stylesheet. Text/background pairs are verified ≥ 4.5:1 by tools/check_contrast.py, change a colour, re-run the check. */ /* ---- Type: IBM Plex Sans ---- The one typeface, self-hosted (web/static/fonts/, OFL licence alongside). Three families because Plex ships scripts as separate fonts: the Latin file also carries Cyrillic for uk/ru, the Arabic file carries ar/ur/ps glyphs, the Devanagari file carries hi. unicode-range means a reader downloads only the subsets their page actually renders — typically two files, ~40 KB. Weights 400/600/700; intermediate weights (the 650 on .title) resolve to the nearest loaded weight per the CSS font-matching algorithm. */ /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-400-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-600-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-600-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-700-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-700-cyrillic.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* arabic */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-arabic-400-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-arabic-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-arabic-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-arabic-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* arabic */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-arabic-600-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-arabic-600-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-arabic-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-arabic-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* arabic */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-arabic-700-arabic.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-arabic-700-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-arabic-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-arabic-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-devanagari-400-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* devanagari */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-devanagari-400-devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-devanagari-400-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 400; font-display: swap; src: url(/static/fonts/plex-devanagari-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-devanagari-600-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* devanagari */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-devanagari-600-devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-devanagari-600-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 600; font-display: swap; src: url(/static/fonts/plex-devanagari-600-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* cyrillic-ext */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-devanagari-700-cyrillic-ext.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* devanagari */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-devanagari-700-devanagari.woff2) format('woff2'); unicode-range: U+0900-097F, U+1CD0-1CF9, U+200C-200D, U+20A8, U+20B9, U+20F0, U+25CC, U+A830-A839, U+A8E0-A8FF, U+11B00-11B09; } /* latin-ext */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-devanagari-700-latin-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'IBM Plex Sans Devanagari'; font-style: normal; font-weight: 700; font-display: swap; src: url(/static/fonts/plex-devanagari-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* Scrollbars, form controls and the like follow this. It has to track the theme the page actually renders, not the OS — declaring `light dark` while forcing light tokens gave a dark-OS reader light cards with dark scrollbars. */ color-scheme: light; /* ---- Neutrals. COOL, deliberately. ---- These were a warm cream (#fbfaf8 / #efece7), chosen when the brand was teal, and warm neutrals under a blue accent are the single thing that makes a blue palette look cheap: the ground pulls yellow, the accent pulls blue, and every card edge shows the disagreement. The hues here sit on the same side as the accent. */ /* THE GROUND A WHITE CARD SITS ON, and it was barely a ground at all. At #f7f9fc the card-to-page ratio was 1.055 — cards were within 5% of the surface behind them, so the separation was carried entirely by a 1px border and a faint shadow, and the screen read as one uninterrupted sheet. iOS puts its white grouped cards on #F2F2F7 for the same job and gets 1.116; this is 1.123, so a card now looks like a card. NOT a brightness fix, and worth saying plainly because that is what it looks like. Shifting a background a few points does not make a screen feel dimmer — the eye re-adapts to whatever the brightest large area is, so an off-white simply becomes the new peak within a minute (Myndex, W3C CSS working group). What actually answers "this is too bright" is the theme following the phone, which is the change further down this file. This one is hierarchy: it earns its place by making the cards legible as objects, not by lowering the light. */ --bg: #eef2f8; --card: #ffffff; --ink: #161b22; --muted: #5f6b7a; --line: #e3e8ef; /* --line is a HAIRLINE: it separates surfaces, and at 1.2:1 it is meant to be felt rather than seen. The drop target borrowed it for a 2px dashed border that is not a divider but the outline of the page's main control, so the one thing a first-time visitor must find scored 1.23:1 — measured, and the same in both themes, so this was never a dark-mode problem. WCAG 1.4.11 wants 3:1 for the boundary of a UI component; these clear it against both --card and --bg. */ --control-line: #7d838c; /* 3.82:1 on --card, 3.40:1 on --bg, 3.37:1 on --chip-bg */ --off-bg: #eef1f6; --off-line: #7f8ea6; --off-ink: #5f6b7a; /* 4.79:1 on --off-bg — disabled text is exempt, but it costs nothing */ /* NEUTRAL, and only just over the bar. The first pass at this token was #75849c / #5f77a0 — the same blue family as the accent, at 3.8-4.2:1 — and on a screen that is a stack of selects (Settings) every control read as ACCENTED rather than outlined: the border competed with the values inside it. A boundary's job is to say where the control ends, and the cheapest way to make it stop shouting is to take the hue out of it, not to take the contrast out. These sit at 3.1-3.8:1 — clear of the 3:1 that SC 1.4.11 asks and quiet enough to disappear into the furniture. Still cool-neutral (blue channel highest), because the note at the top of this palette is right that warm neutrals under a blue accent look cheap. */ /* Split by role: *-ink values are for TEXT and pass 4.5:1 on their backgrounds; the base values are for fills/borders where the bar is 3:1 or not applicable. ---- Why the brand is blue and no longer teal ---- Not taste. `--accent` was #1a5a5e and `--ok` is #2e7d5b: two dark desaturated greens about 25° apart, one meaning "Fahim" and one meaning "money is coming back to you". On the Finances screen they appear within a few inches of each other, and the reader has no way to tell which green is saying something and which is just the furniture. Moving the brand to blue leaves green carrying exactly one meaning. It also buys the warnings contrast for free: amber (#b06f14) and red against blue are further apart in hue than they were against teal, so a deadline is louder without being made bigger. */ --accent: #0f4c8a; /* button fill, brand tile — 8.67:1 with white */ --accent-ink: #0f4c8a; /* links, accent text — 8.67:1 on card */ --info: #5a6a80; --action: #b06f14; /* borders, dots */ --action-ink: #8a5a08; /* amber text, #b06f14 fails 4.5:1 on white */ --urgent: #b3261e; /* badge fill, borders */ --urgent-ink: #b3261e; /* red text */ /* Money coming back, and a signed-and-done contract. The only semantic colour the palette lacked, which is why two slightly different greens had been written straight into rules. */ --ok: #2e7d5b; --ok-ink: #1f6b4a; /* Money the reader spent, as TEXT. `--series-1` is the indigo the charts draw spending with and the mark an account wears, and it is the right colour for the stripe down a spend's row on the Calendar — a 2px border needs 3:1 and it gives 3.72:1. As text it gives that same 3.72:1 on white and fails 4.5:1, which is the exact trap `--action-ink` two lines up was written for. So spending gets the same treatment amber already has: one value for the mark, a darker one for the words. */ --spend-ink: #5a63a8; /* 5.55:1 on white; --series-1 fails at 3.72 */ /* Text on a filled accent or urgent surface. Was #fff written out nineteen times, which is fine until one of them needs to change. */ --on-accent: #ffffff; --warn-bg: #fdf5f4; --warn-border: #f0d5d2; --warn-ink: #7a2019; /* ---- The categorical series ramp. ---------------------------------- Eight colours for eight categories on a chart, and NOT a palette anybody picked by eye. Whether two colours can be told apart is arithmetic — roughly one man in twelve has some red-green deficiency, so "these look different to me" is a statement about one pair of eyes. Every adjacent pair is measured under normal vision and under simulated protanopia, deuteranopia and tritanopia by tools/check_series_ramp.py, which gates a deploy the way tools/check_contrast.py does. The structure, so a change can be made without re-deriving it: eight hues 47 degrees apart starting near the brand hue, one chroma, and two lightness levels alternating. The alternation is what carries the ramp through a colourblind reading — adjacent entries differ in LIGHTNESS as well as hue, so the pair survives when the hue difference does not. FIXED ORDER, NEVER CYCLED. Colour follows the entity, not its rank: a filter that removes a series must not repaint the survivors. A ninth category folds into "Other" or the chart becomes small multiples. THE SAME HUE SEQUENCE IN BOTH THEMES, re-selected against the dark surface rather than flipped: a category must not change colour when the reader changes theme, and a lightness inverted by arithmetic is not a colour anybody chose. Only chroma and the two lightness levels move. These are NOT status colours. --ok and --urgent stay reserved; a series never borrows them, and status never becomes "series 4". */ --series-1: #7580c5; --series-2: #794780; --series-3: #bc6a78; --series-4: #894c15; --series-5: #918935; --series-6: #266e3d; --series-7: #03999d; --series-8: #1d6294; --calm-bg: #eef4fb; --calm-border: #cfe0f2; /* A CHIP HAS TO BE A SURFACE ON BOTH GROUNDS IT SITS ON, and darkening --bg took one of those away. At #eef1f6 this was 1.008 against the new page — the same colour to three decimal places — so every chip resting on the page instead of on a card silently stopped having a background: the language pill in the header, the nav hover, the tag pills. On a card it still read (1.132), which is why it was easy to miss. #e7ecf4 restores 1.056 against the page and improves to 1.186 against a card. Not darker still, which would separate better: the next step down drops `muted` text on a chip to 4.45:1 and fails the AA gate. This is the darkest value that keeps that pair legal. */ --chip-bg: #e7ecf4; /* THE SIX A WORD MAY BE PAINTED. One hue each, and the chip is built from it: a wash of it behind the text and a stronger line around it, mixed against the surfaces the rest of this file already owns. Mixing rather than storing three shades per colour means a chip stays a chip — same shape, same weight — and the day --chip-bg moves, every painted word moves with it. */ /* The hue a chip is currently wearing. Declared here as the NEUTRAL one, not left to a fallback inside each rule: a token that exists only as a `var(--x, …)` fallback is a token nothing defines, and the rule using it is one typo away from silently doing nothing. The rules below rebind it per colour; an unpainted chip keeps this value and reads as the line it always had. */ --tag-hue: var(--control-line); --tag-blue: #2b78c9; --tag-green: #2e7d55; --tag-amber: #a8700d; --tag-red: #b4453c; --tag-purple: #7a52b3; --tag-teal: #17756f; --low-bg: #fdf3e3; --hover-bg: #f1f6fd; /* Kept as the name every card already uses, but it is no longer its own value, it IS the lg step of the scale below. */ --radius: var(--r-lg); /* Visual system: a flat, quiet ground. The aurora blobs, dot grid, glass blurs and gradient fills that used to live here are gone on purpose: they were the 2025 default look, and a product about paper and officialdom reads better as plain surfaces, one blue, and real typography. The ramp below survives as LINE AND TINT colours (focus ring, hover borders, the pending sweep), not as fills. */ --grad-1: #0d3b6f; --grad-2: #2b78c9; --grad-3: #7fc4f0; /* ---- The same three colours as bare CHANNELS ---- Eight rules elsewhere in this file needed the brand at some alpha — the hover wash on a language chip, the sweep across a space card, the glow under the active nav pill — and every one of them had the teal written out as a literal `rgba(47, 143, 124, .13)`. That is why the palette was not actually swappable: changing `--grad-2` recoloured the buttons and left eight tints behind at the old hue. A colour cannot be given an alpha through a var() unless it is stored without one, so the ramp is stored twice: once as hex for the places that want it solid, once as channels for the places that want it faint. They must be kept in step — the test in tests/test_design_system.py asserts that they are. */ --card-rgb: 255 255 255; --accent-rgb: 15 76 138; --grad-1-rgb: 13 59 111; --grad-2-rgb: 43 120 201; --grad-3-rgb: 127 196 240; /* The colour a shadow is made of. Was rgba(20,45,42) — a dark GREEN — which is why every card on the page cast a faintly green shadow. */ --shade-rgb: 12 22 38; /* Two shadows, both small. A card sits ON the page, it does not float over it; depth comes from the hairline border first and the shadow is confirmation. */ --shadow-1: 0 1px 2px rgb(var(--shade-rgb) / .05); --shadow-2: 0 4px 14px -6px rgb(var(--shade-rgb) / .16); /* ---- The rest of the system, added 2026-07-30 ---- The palette and shadows above were already here; the vocabulary for SHAPE, MOTION and FOCUS was not, so every control invented its own. Nine different border-radius values were in use, form fields matched no rule at all, and focus was whatever the browser drew. */ /* One radius scale. sm = chips and small controls, md = inputs and buttons, lg = cards, xl = the big surfaces, pill = anything fully round. */ /* The rounded end of a data mark — a bar's far edge, the top of a stacked column. Smaller than every other radius on purpose: a chart mark is read as a measured length, and a radius large enough to notice shortens the end the reader is measuring to. Its own token because the chart rules name the figure, so it is a decision and not a stray number. */ --r-mark: 4px; --r-xs: 6px; --r-sm: 9px; --r-md: 12px; --r-lg: 16px; --r-xl: 22px; --r-pill: 999px; /* Inline SVG masks for the +/− on a disclosure that acts as a button. Data URIs rather than an in the markup, because the mark belongs to the control's box and not to its label — and the CSP allows a data: mask. */ --plus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' stroke='%23000' stroke-width='2.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); --minus-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12h14' stroke='%23000' stroke-width='2.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); --plus-mask: var(--plus-svg); /* ---- Type. Nine steps, from the twenty-one sizes that were in use ---- Chosen by measuring, not invented: every step is a size the app already used, and nothing moved by more than 1px, because this audience includes older readers and shrinking body text to tidy a scale is a bad trade. */ /* ---- THE TYPE SCALE IS FLUID. ------------------------------------------ Every size here is a range, not a number: it grows with the viewport between a 360px phone and a 1200px laptop, and is pinned at both ends. WHY, measured. The scale was nine fixed pixel values, so a phone got the laptop's type at a third of the width. On a 412px Galaxy the ledger's own description — which inherits the body size and had no `font-size` of its own — rendered at 17px in a 377px column: about 22 characters to a line, against the 45-75 that prose is read at, so one sentence about a plane ticket took five lines. Nothing was broken; everything was simply built for a screen four times wider than the one this audience holds. Big text shrinks harder than small text, which is the whole point of a fluid scale rather than one multiplier: --t-4xl gives up 8px between the two ends and --t-xs gives up nothing, because 11px is already the floor below which a label stops being readable outdoors on a cheap screen. The formula for each line, so a new size can be added without deriving it: slope = (max - min) / (1200 - 360) clamp(min, slope*100 vw + (min - slope*360) px, max) THE RAMP TOPS OUT AT 1200, not at the widest layout, and that is on purpose: the coefficients are rounded to three places, and a ramp that reaches its maximum exactly at the desktop width lands a hair BELOW it — the document view measured its explanation at 16.9964px and said so. Eighty pixels of headroom means the clamp is already pinned by the time anybody is reading on a laptop. Nothing on a desktop moves: at 1200px and above every token is exactly the value it was before this became a range. THE PHONE END WAS LOWERED A SECOND TIME (2026-09-06), on the same report: "the text is so big for no reason on phones, so not enough stuff fit". Making the scale fluid fixed the 17px-in-a-377px-column case, but it left the floors within a point of the desktop values — a 390px phone still got --t-2xl at 16.5 against 20 on a laptop, so a screen a third the width bought back barely a fifth of the type. Each floor now gives up roughly a third of its range instead of a tenth: --t-base 13 -> 12.75 --t-2xl 16.5 -> 16 --t-lg 13.5 -> 13.25 --t-3xl 20 -> 19 --t-xl 15 -> 14.5 --t-4xl 22 -> 21 --t-md AND --t-sm DID NOT MOVE, and the first attempt at this pass is why: dropping --t-md to 11.5 put it 0.05px from --t-sm on a 390px phone. Two adjacent steps that measure the same are not a scale, and the screens that use both to separate a label from its caption would have lost the distinction on the only screen size that needed it. THE CHROME SHRANK; THE SENTENCES DID NOT, which is this file's own rule one paragraph up. `body` is prose — a letter's explanation, a ledger's description — and it gave up 1px against the interface tokens' 1.5 to 2.5, because a label the reader glances at and a paragraph they actually read do not want the same floor. --t-sm and --t-xs did not move at all: both are already at the point where a label stops surviving a cheap screen outdoors. Still a range, still pinned at 1200, and the coefficients are still the formula above — recomputed, not nudged. */ --t-xs: 11px; /* the floor: no range */ --t-sm: clamp(11.5px, 0.060vw + 11.28px, 12px); --t-md: clamp(12px, 0.119vw + 11.57px, 13px); --t-base: clamp(12.75px, 0.149vw + 12.21px, 14px); --t-lg: clamp(13.25px, 0.208vw + 12.50px, 15px); --t-xl: clamp(14.5px, 0.298vw + 13.43px, 17px); --t-2xl: clamp(16px, 0.476vw + 14.29px, 20px); --t-3xl: clamp(19px, 0.833vw + 16.00px, 26px); --t-4xl: clamp(21px, 1.071vw + 17.14px, 30px); /* ---- Display. Two fluid steps, on a scale that is now fluid throughout. ---- STALE UNTIL THIS EDIT, and worth naming rather than quietly deleting: this block claimed to hold "the ONLY fluid sizes in the file" and that the nine steps above were "fixed px on purpose and stay that way". They are `clamp()` ranges, six lines up, and have been since the scale was made fluid — so the comment told every later reader the opposite of what the file does, on the question it exists to answer. The reasoning it gives for interface type is still the reasoning: a label must not shrink away on a phone, which is why the ranges above are narrow and pinned by 1200px, not why they are absent. A landing headline is not interface. It is the one line that has to carry a 1440px window, and the top of the fixed scale could not: measured at 1440, `.hero` computed 27px while the vault's "Good afternoon" computed 38px — the sentence that has to sell the product shipped SMALLER than the greeting waiting behind the sign-in. These two steps are the fix, and they are used on the landing page only (`.hero`, `#landing`), which is why the app's own hierarchy is untouched by them. Fluid rather than a media query because there are sixteen headlines here, of very different lengths, and no three breakpoints suit all of them. The FLOOR is the number that matters: the capture surface is a phone held at a mailbox, so 32px is what a 360px screen gets, and the vw term only spends room that a desktop window actually has. The ceiling was briefly 68px, which was a number for a CONDENSED face. When that face went, 68px at a normal width put the headline on three lines and 214px of the first screen. 56 predates the condensed cut and is the right ceiling without it. */ --t-display: clamp(32px, 5vw, 56px); --t-display-2: clamp(22px, 2.3vw, 31px); /* THE BODY STACK, AT A DISPLAY SIZE. There was a fourth family here for a while — IBM Plex Sans Condensed 700, as a display cut for the landing headline and section headings — and it is gone: squeezed letterforms at 38-68px next to a normal-width body read as a different product's typography, not as this one's turned up. Kept as a token rather than folded back into the rules that use it, because "the landing page's display face" is still a decision this file should be able to state in one place. It just resolves to the same typeface as everything else now, which is what DESIGN.md means when it says the typeface IS the identity: the hierarchy comes from size and weight, not from introducing a second voice. */ --font-display: "IBM Plex Sans", "IBM Plex Sans Arabic", "IBM Plex Sans Devanagari", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* ---- Measure. How wide a thing is allowed to get. ---- The app takes the whole screen, and it should: its screens are grids that fold into more columns given room. But "the page is full-bleed" and "every component is full-bleed" are different claims, and only the first one is true. A grid of tiles gains from 1400px. A row that pairs a label with a value LOSES: measured on the document view at 1440, the key cell ran to 772px and its calendar toggle sat at 1349, so the eye had to cross 540px of nothing to connect a date to its control. Same on the ledger — the description started at 333 and the amount ended at 1379. So: grids stretch, LINES do not. Anything that reads left-to-right as a pair, a row or a sentence gets one of these caps. --m-page the content column, centred; everything lives inside it --m-prose a paragraph, at a readable line length */ /* The content column. One number, shared with the landing page: there is no reason for the two to disagree about how wide a page is. */ --m-page: 1240px; --m-prose: 68ch; /* ---- Space. The gaps that were already in use, named. ---- */ --s-1: 2px; --s-2: 4px; --s-3: 6px; --s-4: 8px; --s-5: 10px; --s-6: 12px; --s-7: 16px; --s-8: 20px; --s-9: 24px; /* ---- Safe area: what the hardware takes out of the viewport. ---- The status bar and Dynamic Island at the top, the home indicator at the bottom, the rounded corners at the sides. These are ZERO in a browser tab, because the address bar already stands in that space, and NON-ZERO the moment the page draws edge to edge: the installed PWA on a home screen, and the native shell in mobile/. Both declare `viewport-fit=cover` (index.html, vault.html), which is what asks iOS for the whole screen AND makes it the page's job to keep content out of the parts of it the reader cannot see. That second half was missing. The wordmark in `header.top` rendered underneath the clock, and the language pill behind the Dynamic Island — measured at 62px of top inset against a header sitting 18px down. It was invisible in Safari, where the address bar hides it, so it shipped: anyone who added Fahim to their iPhone home screen has been reading a header with the time printed through it. The `0px` fallbacks are load-bearing. `env()` with no fallback is invalid on a browser that does not know the variable, which takes the whole declaration down with it — so a desktop Firefox would lose the padding it shares with these rules, not just the inset it has no use for. --sa-side is one value for both edges rather than a start/end pair on purpose: `safe-area-inset-left/right` are PHYSICAL, and an Arabic reader's leading edge is the right one. Taking the larger of the two and applying it symmetrically is correct in both directions, and a landscape notch is the only case where the two ever differ. */ --sa-top: env(safe-area-inset-top, 0px); --sa-bottom: env(safe-area-inset-bottom, 0px); --sa-side: max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)); /* Motion. One curve, two durations: things that respond to a press are fast, things that change layout are slower. Both are disabled wholesale under prefers-reduced-motion further down. */ --ease: cubic-bezier(.2, .7, .3, 1); --dur-1: 140ms; --dur-2: 220ms; --dur-3: 700ms; /* Focus. A glow ring in the brand colour rather than the browser's outline, applied through one :focus-visible rule so it cannot be forgotten on a new control, and never removed, because this audience includes keyboard and switch users and the outline is how they know where they are. */ --focus-ring: 0 0 0 3px rgb(var(--grad-2-rgb) / .32); --focus-line: var(--grad-2); /* Form fields. Their own surface, slightly recessed against the card, so a place you can type is distinguishable from a place you cannot at a glance rather than by reading. */ --field: rgba(255, 255, 255, .72); --field-line: #dcd8d2; --field-hover: #ffffff; } /* THE PHONE DECIDES, UNTIL THE READER DOES. * * This gate was `[data-theme="system"]` only, so a dark OS meant nothing until * somebody went into Settings and asked for it — light was what everyone got, * including a reader opening this at night to check a deadline. The screen they * met is close to the brightest a screen can be: 60% of the home view is * #ffffff at full luminance, and the page behind it is 0.946, which is lighter * than the equivalent iOS surface (#F2F2F7, 0.891). * * WHAT THIS GIVES UP, because it was a considered decision and not an * oversight. The previous note argued: "A first-time visitor deciding whether * to hand over a residence permit meets the light page, which reads as a * document rather than as an app." That is a real thing to lose, and it is the * trade being made here — a stranger on a dark phone now meets the dark page. * The judgement is that a reader's own system preference is the better guess * about what they want to look at, and that the people this product is for * open it far more often at the end of a long day than for the first time. * * Reverting is one selector: drop `:root:not([data-theme])` below and light is * the default again. Nothing else depends on which way this goes — the three * stored values still mean exactly what they meant, and a reader who has * chosen light keeps light on a dark phone, which is the whole point of the * attribute winning over the media query. */ @media (prefers-color-scheme: dark) { :root[data-theme="system"], :root:not([data-theme]) { color-scheme: dark; /* same block as the palette, for the reason above */ --bg: #0b1017; --card: #121926; --ink: #e6ebf2; --muted: #9aa7b8; --line: #1f2a3a; /* See the light-mode note on --control-line. */ --control-line: #68707c; /* 3.52:1 on --card, 3.81:1 on --bg, 3.12:1 on --chip-bg */ --off-bg: #16223a; --off-line: #586e93; --off-ink: #9aa7b8; --accent: #0f4c8a; /* same fill; white text passes on it in both modes */ --accent-ink: #7fc4f0; --info: #a3b3c9; --action: #b06f14; --action-ink: #e6a53e; --urgent: #b3261e; --urgent-ink: #f28b82; --ok: #3f9c74; --ok-ink: #6cc39a; /* On the dark card `--series-1`'s own value already gives 7.46:1, so the ink and the mark are the same colour here and only light needed the darker one. */ --spend-ink: #96a3f9; --on-accent: #ffffff; --warn-bg: #2a1618; --warn-border: #4a2528; --warn-ink: #f0b3ac; /* ---- The categorical series ramp. ---------------------------------- Eight colours for eight categories on a chart, and NOT a palette anybody picked by eye. Whether two colours can be told apart is arithmetic — roughly one man in twelve has some red-green deficiency, so "these look different to me" is a statement about one pair of eyes. Every adjacent pair is measured under normal vision and under simulated protanopia, deuteranopia and tritanopia by tools/check_series_ramp.py, which gates a deploy the way tools/check_contrast.py does. The structure, so a change can be made without re-deriving it: eight hues 47 degrees apart starting near the brand hue, one chroma, and two lightness levels alternating. The alternation is what carries the ramp through a colourblind reading — adjacent entries differ in LIGHTNESS as well as hue, so the pair survives when the hue difference does not. FIXED ORDER, NEVER CYCLED. Colour follows the entity, not its rank: a filter that removes a series must not repaint the survivors. A ninth category folds into "Other" or the chart becomes small multiples. THE SAME HUE SEQUENCE IN BOTH THEMES, re-selected against the dark surface rather than flipped: a category must not change colour when the reader changes theme, and a lightness inverted by arithmetic is not a colour anybody chose. Only chroma and the two lightness levels move. These are NOT status colours. --ok and --urgent stay reserved; a series never borrows them, and status never becomes "series 4". */ --series-1: #96a3f9; --series-2: #a062a8; --series-3: #ee8899; --series-4: #b46725; --series-5: #b8ae47; --series-6: #399255; --series-7: #09c2c7; --series-8: #2f83c2; --calm-bg: #0f1d2e; --calm-border: #21384f; --chip-bg: #1b2432; /* Lifted for the dark surfaces: the light set is mixed against a near-white card and goes muddy against a near-black one. Same six names, so nothing outside this block knows which theme it is in. */ --tag-blue: #6fb2ee; --tag-green: #6cc493; --tag-amber: #d9a441; --tag-red: #e58379; --tag-purple: #b294e8; --tag-teal: #5cc3ba; --low-bg: #2b2108; --hover-bg: #131e2c; --grad-1: #14508f; --grad-2: #2b78c9; --grad-3: #7fc4f0; --card-rgb: 18 25 38; --accent-rgb: 15 76 138; --grad-1-rgb: 20 80 143; --grad-2-rgb: 43 120 201; --grad-3-rgb: 127 196 240; /* Black, in dark. A shadow on a near-black ground is an absence of light, not a tint of the brand. */ --shade-rgb: 0 0 0; --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 6px 18px -8px rgba(0, 0, 0, .5); --focus-ring: 0 0 0 3px rgb(var(--grad-3-rgb) / .30); --focus-line: var(--grad-3); /* Recessed rather than raised in dark: a lighter field on a dark card reads as a raised tile, which is the opposite of "type here". */ --field: rgba(255, 255, 255, .045); --field-line: #2b3a4d; --field-hover: rgba(255, 255, 255, .07); } } :root[data-theme="dark"] { /* Declared INSIDE this block, not in a `:root[data-theme="dark"] { … }` of its own. tools/check_contrast.py reads the palette with _block_after(), which takes the FIRST block matching the selector — a second one earlier in the file becomes the palette it compares, and every token reads as missing. */ color-scheme: dark; --bg: #0b1017; --card: #121926; --ink: #e6ebf2; --muted: #9aa7b8; --line: #1f2a3a; /* See the light-mode note on --control-line. */ --control-line: #68707c; /* 3.52:1 on --card, 3.81:1 on --bg, 3.12:1 on --chip-bg */ --off-bg: #16223a; --off-line: #586e93; --off-ink: #9aa7b8; --accent: #0f4c8a; /* same fill; white text passes on it in both modes */ --accent-ink: #7fc4f0; --info: #a3b3c9; --action: #b06f14; --action-ink: #e6a53e; --urgent: #b3261e; --urgent-ink: #f28b82; --ok: #3f9c74; --spend-ink: #96a3f9; /* see the media query above */ --ok-ink: #6cc39a; --on-accent: #ffffff; --warn-bg: #2a1618; --warn-border: #4a2528; --warn-ink: #f0b3ac; /* ---- The categorical series ramp. ---------------------------------- Eight colours for eight categories on a chart, and NOT a palette anybody picked by eye. Whether two colours can be told apart is arithmetic — roughly one man in twelve has some red-green deficiency, so "these look different to me" is a statement about one pair of eyes. Every adjacent pair is measured under normal vision and under simulated protanopia, deuteranopia and tritanopia by tools/check_series_ramp.py, which gates a deploy the way tools/check_contrast.py does. The structure, so a change can be made without re-deriving it: eight hues 47 degrees apart starting near the brand hue, one chroma, and two lightness levels alternating. The alternation is what carries the ramp through a colourblind reading — adjacent entries differ in LIGHTNESS as well as hue, so the pair survives when the hue difference does not. FIXED ORDER, NEVER CYCLED. Colour follows the entity, not its rank: a filter that removes a series must not repaint the survivors. A ninth category folds into "Other" or the chart becomes small multiples. THE SAME HUE SEQUENCE IN BOTH THEMES, re-selected against the dark surface rather than flipped: a category must not change colour when the reader changes theme, and a lightness inverted by arithmetic is not a colour anybody chose. Only chroma and the two lightness levels move. These are NOT status colours. --ok and --urgent stay reserved; a series never borrows them, and status never becomes "series 4". Repeated verbatim in the media query above: the two must stay in step, and the palette-drift assertion in tests/test_concurrency_and_observability.py has caught this block being forgotten twice. */ --series-1: #96a3f9; --series-2: #a062a8; --series-3: #ee8899; --series-4: #b46725; --series-5: #b8ae47; --series-6: #399255; --series-7: #09c2c7; --series-8: #2f83c2; --calm-bg: #0f1d2e; --calm-border: #21384f; --chip-bg: #1b2432; /* Lifted for the dark surfaces: the light set is mixed against a near-white card and goes muddy against a near-black one. Same six names, so nothing outside this block knows which theme it is in. */ --tag-blue: #6fb2ee; --tag-green: #6cc493; --tag-amber: #d9a441; --tag-red: #e58379; --tag-purple: #b294e8; --tag-teal: #5cc3ba; --low-bg: #2b2108; --hover-bg: #131e2c; --grad-1: #14508f; --grad-2: #2b78c9; --grad-3: #7fc4f0; --card-rgb: 18 25 38; --accent-rgb: 15 76 138; --grad-1-rgb: 20 80 143; --grad-2-rgb: 43 120 201; --grad-3-rgb: 127 196 240; /* Black, in dark. A shadow on a near-black ground is an absence of light, not a tint of the brand. */ --shade-rgb: 0 0 0; --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 6px 18px -8px rgba(0, 0, 0, .5); --focus-ring: 0 0 0 3px rgb(var(--grad-3-rgb) / .30); --focus-line: var(--grad-3); /* Recessed rather than raised in dark: a lighter field on a dark card reads as a raised tile, which is the opposite of "type here". */ --field: rgba(255, 255, 255, .045); --field-line: #2b3a4d; --field-hover: rgba(255, 255, 255, .07); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); /* The base every unstyled paragraph inherits — the ledger's own descriptions among them. A range, like the scale above, and floored well ABOVE the interface tokens because this is the size PROSE is read at: the chrome around it may shrink further on a phone, the sentences may not. 15.5 -> 14.5 in the 2026-09-06 pass, one point against the chrome's two. */ font: clamp(14.5px, 0.298vw + 13.43px, 17px)/1.55 "IBM Plex Sans", "IBM Plex Sans Arabic", "IBM Plex Sans Devanagari", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; -webkit-text-size-adjust: 100%; /* TWO PIECES OF FEEDBACK FOR ONE TAP, and only one of them was ours. Every button here already answers a press by scaling — `button.go:active` and the rest, deliberate and tuned — while the WebView painted its own grey box over the top of it, unasked. On iOS and Android that is what a tap on this app looked like: the considered response, plus a flash of default browser chrome nobody chose. Dropping the default leaves the app's own :active states as the whole answer. NOT a substitute for visible feedback: it is removed here only because every interactive surface in this file already provides its own. */ -webkit-tap-highlight-color: transparent; } /* WHERE A SCROLL STOPS. * * Every panel below scrolls inside a fixed height. Reaching the end of one and * carrying on — a flick, which is how a phone scrolls — handed the rest of the * gesture to the page underneath, so scrolling to the bottom of the chat log * kept going and took the letter behind it with it. On iOS the same chaining * reaches the document and rubber-bands the whole app. The reader never asked * to scroll two things; they asked to scroll the one under their thumb. * * `contain` rather than `none`: it stops the chain at this box's edge but * leaves the platform's own overscroll effect intact inside it, so the panel * still bounces at its end on iOS and still reports the pull the way every * other list on the phone does. * * Said once, here, rather than as a line in each of the seven rules — a panel * added later is far more likely to be given `overflow-y: auto` than to be * given `overflow-y: auto` AND remembered to be contained. */ .asklog, .chat-menu-list, .dlg-picks, .talklist, .talkrail, .sidebar, .askform textarea { overscroll-behavior: contain; } /* ROOM FOR THE FOCUS RING, said once for the same reason. * * A box that scrolls on one axis CLIPS the other, and everything this app * draws to say "you are here" is drawn OUTSIDE the element: `:focus-visible` * is a 3px outline at 2px offset, and the composer's bubble ring is the same. * Five pixels past the edge, against a wall at the edge. * * Reported as "the left side of the box is not here" — a message composer * flush against the start of the conversation log, drawing three sides of a * rectangle. The same slice was taking the ring off every keyboard-focused row * in the conversation list and the chat menu. * * Padded in and pulled back out by the same 5px, so nothing moves on screen * and the ring has somewhere to be. Only the boxes with no padding of their * own are listed: .sidebar and .talkrail already have plenty, and overriding * theirs to 5px would be a worse bug than the one being fixed. */ .asklog, .talklist, .chat-menu-list, .demoslider { padding-inline: 5px; margin-inline: -5px; } /* The insets are ADDED to the padding rather than max()'d with it: 18px is the gap the design wants between the header and whatever is above it, and on a phone that draws under the status bar the thing above it is the status bar. max() would put the wordmark flush against the clock instead of below it. The sides are max()'d, because a rounded corner eats into the 18px rather than sitting on top of it. */ .wrap { max-width: 760px; margin: 0 auto; padding: calc(18px + var(--sa-top)) max(18px, var(--sa-side)) calc(40px + var(--sa-bottom)); } /* THE VAULT IS A WORKSPACE, NOT AN ARTICLE. 760px is a reading measure, and the app's screens are grids: `repeat(auto-fill, minmax(...))` tiles, a seven column calendar, three panels of a conversation. They fold into more columns given room and waste the screen without it. Carried in vault.html's own markup, on AND , so the first paint is already wide — set from script it arrived after the page had drawn itself narrow, and every reload flinched outward half a second later. Only that one document has it: the landing page, the legal pages and the checkout share `.wrap` and ARE prose. */ /* TWO TIERS, because the two kinds of page want different things. Everything gets much wider than the old 760px reading column — that was the complaint and it was fair. But a landing page at 2560px edge to edge is not the fix: rendered that way the hero sets at a fifth of the screen, the three "how it works" cards stretch into ribbons, and it reads as a bug rather than a design. 1240px is generous and still composed. */ .wide-space .wrap { max-width: var(--m-page); } /* THE APP GETS A COLUMN, AND IT IS THE SAME NUMBER AS THE LANDING PAGE'S. This was `max-width: none`, and full bleed is not the same claim as "use the screen": at 2560 a stat tile held the number 8 across 450px, and the space cards stretched into ribbons. 1240 rather than a second invented width, because there is no reason for the marketing page and the app to disagree about how wide a page is. Inside it the grids still fold into more columns given room — that was always the real argument for space, and a column does not take it away. */ .app-space .wrap { max-width: var(--m-page); } a { color: var(--accent-ink); } /* Keyboard users get one consistent, visible focus everywhere. */ /* ONE focus rule for the whole application. The OUTLINE is the accessible baseline and is not negotiable: unlike a box-shadow it is never clipped by an overflow:hidden ancestor, and it survives forced-colours mode. The ring and the border tint are additions on top, not replacements, an earlier draft of the design system replaced the outline with the glow alone, which looks better and is worse. It does NOT set border-radius. It used to set 4px, which squared off a 13px field the moment it was focused, the element changed shape under the cursor. Every current browser draws the outline following the element's own radius, so there is nothing to correct. */ :focus-visible { outline: 3px solid var(--focus-line); outline-offset: 2px; box-shadow: var(--focus-ring); } /* Skip link: first tab stop, invisible until focused. */ .skip { position: absolute; inset-inline-start: -9999px; top: 0; z-index: 10; background: var(--accent); color: var(--on-accent); padding: 10px 16px; border-radius: 0 0 9px 0; text-decoration: none; } .skip:focus { inset-inline-start: 0; } /* ---- top bar ---- */ .top { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; flex-wrap: wrap; } /* `.brand` is the same wordmark as an ordinary div, which is what index.html uses so its

can be the promise rather than the company name. Both spellings, one rule: the other seven pages still say

here and should. */ /* font-weight STATED, not inherited from the tag. This rule was written when the wordmark was only ever an

, which a browser bolds for you — so the 700 was never in the CSS, it was a UA default the rule quietly leaned on. The moment index.html made its wordmark a
(so the

could be the promise) the brand dropped to 400 on the one page that matters most, and nothing in the stylesheet said it should have been bold. */ /* FLEX, so the wordmark is centred by its ink rather than by its line box. The link inside is `inline-flex`, which sits on the BASELINE of this element's line box — and a 22px font on a 34px line leaves about seven pixels of descender space underneath it. The header centres this box, the box is 7px taller than what it draws, and the logo therefore rode 4px above the middle of the bar on a desktop and 5px on a phone. Reported by eye before it was measured, which is how far off it was. */ .top h1, .top .brand { display: flex; align-items: center; /* Was a flat 22px, and it sits above the guard's start line so nothing caught it: the wordmark was as tall on a 412px phone as on a 27in screen. */ font-size: clamp(18px, 0.476vw + 16.29px, 22px); font-weight: 700; margin: 0; letter-spacing: -0.01em; } .top h1 a, .top .brand a { color: inherit; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; } .logo { display: block; border-radius: var(--r-xs); flex: none; } .badge { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .07em; background: var(--chip-bg); color: var(--muted); padding: 3px 7px; border-radius: var(--r-xs); } .spacer { flex: 1; } .navlink { font-size: var(--t-base); text-decoration: none; padding: 10px 6px; display: inline-block; } /* Language switcher: a globe + select chip, sat top-left by the logo. Deliberately prominent and always visible (header, so on mobile too) someone may land in a language they can't read, and the globe reads as "language" whatever the current UI language is. */ /* --card, matching `.icon-btn` beside it. These two sit shoulder to shoulder in the header with the same border, the same radius and the same 40px height — they are plainly one pair — and they were reaching for different surface tokens, so the language pill was --chip-bg and the theme toggle was --card. Not a hierarchy: the pill came out DARKER than the button in light and LIGHTER in dark, which is what two independently chosen tokens look like, not a decision. Both are controls you press; both get the raised surface. */ .langpick { display: inline-flex; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid var(--control-line); border-radius: var(--r-sm); background: var(--card); min-height: 40px; } .langpick .globe { font-size: var(--t-lg); line-height: 1; } .langpick select { border: 0; background: transparent; min-height: 0; padding: 8px 4px; font-size: var(--t-base); color: inherit; cursor: pointer; } /* `.sub` is a LOOK — muted, one step down in size — and the 22px belongs to the paragraph, not to the look. It was on the class, so all 35 inline `` in the app carried a paragraph's bottom margin: in any flex row with align-items:center, that margin box is what gets centred, and the text floats half of it above everything beside it. "Page 1 of 11" sat 11px above its own Previous and Next that way. The 118 `

` keep exactly what they had. */ .sub { color: var(--muted); font-size: var(--t-md); } p.sub { margin: 0 0 22px; } /* ---- hero ---- */ .hero { /* line-height TIGHTENS as the type grows — 1.3 is a reading leading and at 56px it opens a gap you could park a card in. The max-width stays in `em` rather than moving to `ch`: em holds the same number of CHARACTERS per line at every step of the clamp, and it does that in Arabic and Devanagari too, where a `ch` (the width of a zero) describes nothing about the script actually being set. 12em is about two lines of a typical headline; the sixteen translations vary, which is what text-wrap: balance is for. */ font-size: var(--t-display); line-height: 1.05; letter-spacing: -0.025em; margin: 18px 0 20px; font-weight: 700; max-width: 12em; /* Evens the lines instead of filling the first one and orphaning whatever is left. "Your paperwork, understood and / remembered." hung a conjunction off the end of line one; balanced it breaks after the comma, where the sentence actually breaks. Per-language, which is the point — sixteen headlines of different lengths cannot share one hand-placed line break. */ text-wrap: balance; } /* The two places the display cut is used, and the only two. Landing page only: `.hero` is removed for a signed-in reader, and `#landing` is hidden outright, so nobody who has an account ever sees this face. */ .hero, #landing section.land > h2 { font-family: var(--font-display); } /* ---- Negative tracking is a LATIN adjustment ---- Tightening a headline works because Latin letters are separate shapes with air between them that grows visually as the type gets bigger. Arabic, Farsi, Urdu and Pashto are cursive: the letters are joined along a baseline stroke, and the space `letter-spacing` takes out is the join itself. Four of the sixteen languages, so it is a quarter of the readers, and it only became worth naming here because this headline went from 27px at -0.015em to 56px at -0.025em — the same proportion, more than twice the pixels of it. Scoped to the display steps rather than swept across the file: the interface sizes carry small negative tracking in a dozen rules, at sizes where the effect is under a third of a pixel, and changing all of them is a different piece of work from this one. */ [dir="rtl"] .hero, [dir="rtl"] #landing section.land > h2 { letter-spacing: normal; } /* The claim and the instruction under it are ONE block, so the 20px the hero carries for a standalone heading is pulled back rather than added to the sub's own paragraph gap. Wider than the hero: it is a sentence, not a headline, and the hero's 12em would break it into a stack of stubs. It also stops taking `.sub`'s 13px. That size is for a hint beside a control; sitting under a 56px headline it read as a caption for the headline rather than the second half of the pitch, which is the one line after the claim that says what the product does. --t-2xl is one step above the feature-card titles, which is where it has to sit: it is the only line between a 68px headline and 13px body copy. The pull-back shrinks with it: -12px was measured against a 27px hero at 1.3 leading, and the new one sets 1.05, so there is far less space under the last line to reclaim. */ .hero + .herosub { margin-top: 0; max-width: 30em; line-height: 1.5; font-size: var(--t-2xl); } /* ---- controls ---- 44px minimum: the touch-target floor, and this audience includes older users and shaking hands. ⚠️ THE SELECTOR LIST IS THE WHOLE POINT. It used to read `select, button, input[type=email], input[type=date]`, which matches NEITHER a bare NOR any