/* The faces load from the design OS font files, the same outlines the apps bundle, so a page drawn from these tokens matches the app glyph for glyph. Shantell Sans ships no italic, so italics are synthesized. */ @font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/type/shantell-sans-400-latin.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+2010, U+2013-2014, U+2016, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2713-2714; } @font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/type/shantell-sans-400-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CB-04CC, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, U+04EE-04F9, U+051A-051D, U+20B4; } @font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/type/shantell-sans-400-extended.woff2') format('woff2'); unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-017E, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01CE, U+01D3-01D4, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+02B9-02BA, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0302-0304, U+0306-030C, U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331, U+0335, U+03A9, U+03C0, U+0E3F, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B5, U+20B8-20BA, U+20BC-20BF, U+2113, U+2116, U+2126, U+212E, U+2153-2154, U+215B-215E, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+23F8, U+25A0-25A1, U+25AA-25AB, U+25B2-25B9, U+25BC-25C3, U+25C6-25C7, U+25CA-25CC, U+25CF, U+25E6, U+2661, U+2665, U+27E8-27E9, U+E132-E133, U+FB00-FB04; } @font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/type/shantell-sans-600-latin.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+2010, U+2013-2014, U+2016, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2713-2714; } @font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/type/shantell-sans-600-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CB-04CC, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, U+04EE-04F9, U+051A-051D, U+20B4; } @font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/type/shantell-sans-600-extended.woff2') format('woff2'); unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-017E, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01CE, U+01D3-01D4, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+02B9-02BA, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0302-0304, U+0306-030C, U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331, U+0335, U+03A9, U+03C0, U+0E3F, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B5, U+20B8-20BA, U+20BC-20BF, U+2113, U+2116, U+2126, U+212E, U+2153-2154, U+215B-215E, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+23F8, U+25A0-25A1, U+25AA-25AB, U+25B2-25B9, U+25BC-25C3, U+25C6-25C7, U+25CA-25CC, U+25CF, U+25E6, U+2661, U+2665, U+27E8-27E9, U+E132-E133, U+FB00-FB04; } @font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/type/shantell-sans-700-latin.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+2010, U+2013-2014, U+2016, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2032-2033, U+2039-203A, U+2044, U+2052, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+2713-2714; } @font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/type/shantell-sans-700-cyrillic.woff2') format('woff2'); unicode-range: U+0400-045F, U+0462-0463, U+046A-046B, U+0472-0475, U+0490-049D, U+04A0-04A5, U+04AA-04AB, U+04AE-04B3, U+04B6-04BB, U+04C0-04C2, U+04CB-04CC, U+04CF-04D9, U+04DC-04DF, U+04E2-04E9, U+04EE-04F9, U+051A-051D, U+20B4; } @font-face { font-family: 'Shantell Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/type/shantell-sans-700-extended.woff2') format('woff2'); unicode-range: U+0100-0130, U+0132-0148, U+014A-0151, U+0154-017E, U+018F, U+0192, U+01A0-01A1, U+01AF-01B0, U+01C4-01CE, U+01D3-01D4, U+01E6-01E7, U+01EA-01EB, U+01FA-021B, U+022A-022D, U+0230-0233, U+0237, U+0259, U+02B9-02BA, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0302-0304, U+0306-030C, U+030F, U+0311-0312, U+031B, U+0323-0324, U+0326-0328, U+032E, U+0331, U+0335, U+03A9, U+03C0, U+0E3F, U+1E80-1E85, U+1E9E, U+1EA0-1EF9, U+2070, U+2074-2079, U+2080-2089, U+20A1, U+20A4, U+20A6, U+20A8-20AB, U+20AD-20AE, U+20B1-20B2, U+20B5, U+20B8-20BA, U+20BC-20BF, U+2113, U+2116, U+2126, U+212E, U+2153-2154, U+215B-215E, U+2202, U+2205-2206, U+220F, U+2211, U+2219-221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+23F8, U+25A0-25A1, U+25AA-25AB, U+25B2-25B9, U+25BC-25C3, U+25C6-25C7, U+25CA-25CC, U+25CF, U+25E6, U+2661, U+2665, U+27E8-27E9, U+E132-E133, U+FB00-FB04; } @font-face { font-family: 'Luckiest Guy'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/type/luckiest-guy-400-latin.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2212; } @font-face { font-family: 'Luckiest Guy'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/type/luckiest-guy-400-extended.woff2') format('woff2'); unicode-range: U+0100-0130, U+0132-0151, U+0154-017E, U+01FC-01FF, U+0237, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0312, U+0315, U+0326, U+03BC, U+1E80-1E85, U+1EF2-1EF3, U+2202, U+2248, U+2260, U+FB01-FB02; } @font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/type/martian-mono-400-latin.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+2002-2003, U+2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212; } @font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/type/martian-mono-400-cyrillic.woff2') format('woff2'); unicode-range: U+0401, U+0404, U+0406-0407, U+040E, U+0410-044F, U+0451, U+0454, U+0456-0457, U+045E, U+0490-0491, U+04AA-04AB, U+04D0-04D1, U+04D6-04D7, U+04F2-04F3, U+20B4; } @font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('assets/type/martian-mono-400-extended.woff2') format('woff2'); unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-012B, U+012E-0130, U+0132-0133, U+0136-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-017E, U+018F, U+0192, U+019D, U+01CD-01CE, U+01E6-01E7, U+01FA-01FF, U+0218-021B, U+0232-0233, U+0237, U+0259, U+0272, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0302-0304, U+0306-0308, U+030A-030C, U+0312, U+0323, U+0326-0328, U+1E0C-1E0D, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E80-1E85, U+1E92-1E93, U+1E9E, U+1EBC-1EBD, U+1ECA-1ECD, U+1EE4-1EE5, U+1EF2-1EF3, U+1EF8-1EF9, U+2070, U+2074-2079, U+2080-2089, U+20BD, U+2116, U+2248, U+2260, U+A78B-A78C; } @font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/type/martian-mono-600-latin.woff2') format('woff2'); unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BC, U+02C6, U+02DA, U+02DC, U+0300-0301, U+2002-2003, U+2011, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2193, U+2212; } @font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/type/martian-mono-600-cyrillic.woff2') format('woff2'); unicode-range: U+0401, U+0404, U+0406-0407, U+040E, U+0410-044F, U+0451, U+0454, U+0456-0457, U+045E, U+0490-0491, U+04AA-04AB, U+04D0-04D1, U+04D6-04D7, U+04F2-04F3, U+20B4; } @font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('assets/type/martian-mono-600-extended.woff2') format('woff2'); unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-012B, U+012E-0130, U+0132-0133, U+0136-0148, U+014A-014D, U+0150-0151, U+0154-015B, U+015E-017E, U+018F, U+0192, U+019D, U+01CD-01CE, U+01E6-01E7, U+01FA-01FF, U+0218-021B, U+0232-0233, U+0237, U+0259, U+0272, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0302-0304, U+0306-0308, U+030A-030C, U+0312, U+0323, U+0326-0328, U+1E0C-1E0D, U+1E24-1E25, U+1E62-1E63, U+1E6C-1E6D, U+1E80-1E85, U+1E92-1E93, U+1E9E, U+1EBC-1EBD, U+1ECA-1ECD, U+1EE4-1EE5, U+1EF2-1EF3, U+1EF8-1EF9, U+2070, U+2074-2079, U+2080-2089, U+20BD, U+2116, U+2248, U+2260, U+A78B-A78C; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/type/dm-sans-500-latin.woff2') format('woff2'); unicode-range: U+000D, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0301, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('assets/type/dm-sans-500-extended.woff2') format('woff2'); unicode-range: U+0100-0107, U+010A-011B, U+011E-0123, U+0126-0130, U+0132-0133, U+0136-0137, U+0139-0148, U+014A-0151, U+0154-015B, U+015E-0165, U+0168-017E, U+018F, U+0192, U+01FC-01FD, U+0218-021B, U+0237, U+0259, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0302-0304, U+0306-0308, U+030A-030C, U+0312, U+0326-0328, U+03C0, U+1E80-1E85, U+1E9E, U+1EBC-1EBD, U+1EF2-1EF3, U+1EF8-1EF9, U+2074, U+20A8, U+20B9-20BA, U+20BD, U+2113, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/type/dm-sans-700-latin.woff2') format('woff2'); unicode-range: U+000D, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0301, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('assets/type/dm-sans-700-extended.woff2') format('woff2'); unicode-range: U+0100-0107, U+010A-011B, U+011E-0123, U+0126-0130, U+0132-0133, U+0136-0137, U+0139-0148, U+014A-0151, U+0154-015B, U+015E-0165, U+0168-017E, U+018F, U+0192, U+01FC-01FD, U+0218-021B, U+0237, U+0259, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0302-0304, U+0306-0308, U+030A-030C, U+0312, U+0326-0328, U+03C0, U+1E80-1E85, U+1E9E, U+1EBC-1EBD, U+1EF2-1EF3, U+1EF8-1EF9, U+2074, U+20A8, U+20B9-20BA, U+20BD, U+2113, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/type/dm-sans-800-latin.woff2') format('woff2'); unicode-range: U+000D, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0301, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 800; font-display: swap; src: url('assets/type/dm-sans-800-extended.woff2') format('woff2'); unicode-range: U+0100-0107, U+010A-011B, U+011E-0123, U+0126-0130, U+0132-0133, U+0136-0137, U+0139-0148, U+014A-0151, U+0154-015B, U+015E-0165, U+0168-017E, U+018F, U+0192, U+01FC-01FD, U+0218-021B, U+0237, U+0259, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0302-0304, U+0306-0308, U+030A-030C, U+0312, U+0326-0328, U+03C0, U+1E80-1E85, U+1E9E, U+1EBC-1EBD, U+1EF2-1EF3, U+1EF8-1EF9, U+2074, U+20A8, U+20B9-20BA, U+20BD, U+2113, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/type/dm-sans-900-latin.woff2') format('woff2'); unicode-range: U+000D, U+0020-007E, U+00A0-00AC, U+00AE-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+0300-0301, U+2013-2014, U+2018-201A, U+201C-201E, U+2020-2022, U+2026, U+2030, U+2039-203A, U+2044, U+20AC, U+2122, U+2190-2199, U+2212, U+2215; } @font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 900; font-display: swap; src: url('assets/type/dm-sans-900-extended.woff2') format('woff2'); unicode-range: U+0100-0107, U+010A-011B, U+011E-0123, U+0126-0130, U+0132-0133, U+0136-0137, U+0139-0148, U+014A-0151, U+0154-015B, U+015E-0165, U+0168-017E, U+018F, U+0192, U+01FC-01FD, U+0218-021B, U+0237, U+0259, U+02C7, U+02D8-02D9, U+02DB, U+02DD, U+0302-0304, U+0306-0308, U+030A-030C, U+0312, U+0326-0328, U+03C0, U+1E80-1E85, U+1E9E, U+1EBC-1EBD, U+1EF2-1EF3, U+1EF8-1EF9, U+2074, U+20A8, U+20B9-20BA, U+20BD, U+2113, U+2126, U+212E, U+2202, U+2206, U+220F, U+2211, U+221A, U+221E, U+222B, U+2248, U+2260, U+2264-2265, U+25CA, U+FB01-FB02; } /* Notebook — material tokens. ============================================================================ Public theme ID: notebook. Component aliases live in components.css; coverage lives in registry.json. Source of truth: the picked desk flight (`fidelity/desk-flight.json`), whose own `tokens.css` is a frozen copy of these values; the app's `theme.ts` mirrors them. ========================================================================= */ :root { /* ── the ground ────────────────────────────────────────────────────────── Everything sits on paper. `--paper` is the page itself, `--desk` is what the page sits on, and the two ruled colours are printed ON the paper rather than drawn over it. */ --paper: #FAF7EE; /* the page */ --grid: #CBDCE8; /* the ruled line */ --margin: #F2B3A6; /* the margin rule, red-pink, always vertical */ --desk: #B9B2A2; /* the surface under the page */ --card: #F6F0E1; /* index-card stock, one step warmer than the page */ --kraft: #DCC9A4; /* stamps, labels, tickets */ --tape: #EBD9A6; /* masking tape */ --lock: #CFC8B6; /* a task that is not open yet */ /* ── the hand ──────────────────────────────────────────────────────────── Two inks and nothing else. `--ink` is the pen; `--pencil` is everything the pen did not think was important. */ --ink: #141026; --focus: #141026; --pencil: #514B60; /* ── the three saturated colours, and their jobs are NOT interchangeable ── 🔴 `--marker` is the screen's ONE SATURATED COLOUR and every instance of it is the primary action. The rule limits the PALETTE, not the count: a live action appearing in two places is the same signal twice, not two colours. `--highlighter` is a MARK LAID ON TOP of text and is never a fill behind a control. `--spray` is the graffiti mark's own colour and belongs to the logo, not to the UI. Swapping any two of these breaks the language. */ --marker: #E95908; /* the CTA. The screen's ONE saturated colour. */ --highlighter: #D8F241; /* laid over words, never under a control */ --spray: #8932D9; /* the mark's violet */ /* ── the three XP axes ─────────────────────────────────────────────────── Disjoint by decree and never blended. This is legibility, not styling, so a screen may not tint one towards another. ⚠️ Colour is only half of it: in this language each axis also carries a different SHAPE — a filled violet box, a red disc, a drawn teal ring — so the three survive a blur and a colour-blind reader. See `design-os/rules/palette.md#the-three-xp-axes-three-hues-and-three-shapes`. */ --esp: #391589; /* Español · a filled box */ --str: #E6310E; /* Street Talk · a disc */ --soc-line: #0C6E8A; /* Social Skills · a ring */ /* ── type: four families, jobs strictly disjoint ───────────────────────── display = big headings only · hand = anything a person wrote · press = small uppercase labels, states and buttons · mono = every number. A face crossing jobs is a defect, not a variation. */ --hand: 'Shantell Sans', 'Comic Neue', cursive; --press: 'DM Sans', 'Archivo', sans-serif; --mono: 'Martian Mono', 'DM Mono', monospace; --display: 'Luckiest Guy', 'Shantell Sans', cursive; /* ── depth ─────────────────────────────────────────────────────────────── Paper casts a real shadow; a vinyl sticker casts almost none. There is no third value, because there is no third kind of object. */ --sh-card: 0 6px 14px rgba(20, 16, 38, .16); --sh-vinyl: 0 2px 3px rgba(20, 16, 38, .22); } /* ══════════════════════════════════════════════════════════════════════════ THE DARK THEME — the same day, on the chalkboard at the front of the room. ========================================================================== 🔴 THIS IS ONE LANGUAGE WITH TWO RESOLUTIONS, NOT TWO LANGUAGES. Everything that consumes these tokens is theme-blind: it names a role and this file says what the role resolves to. Flipping `data-theme` on the root re-resolves all of them at once, and NOTHING MOVES. Measured on the prototype the day this landed — 826 elements across the home screen and the marketing site, zero changed position or size between themes, and zero differed from the light-only board. That number is the point of the whole thing, and it is cheap to re-check: walk both screens, compare every bounding box. ⚠️ THE LIGHT BLOCK ABOVE IS THE CONTROL AND MUST NOT DRIFT. If a dark value needs a different NUMBER (a size, a position, a line-height), the theme has stopped being a theme and somebody has to say so out loud. ── The material, because "invert the colours" is not a design ── Cream paper's opposite is not black paper. Black paper is still paper, and a white pen on it is a costume. The opposite is the BOARD: slate, chalk, and the liquid chalk markers that really do glow on it. That gives the dark theme one physical answer instead of an inversion of the light one, and it is what decides every value below. 🔑 AND SOME THINGS DO NOT INVERT, WHICH IS THE INTERESTING HALF. You tape a cream index card to a blackboard and it stays cream. A worn photographic print stays a worn photographic print. A white die-cut vinyl sticker stays white. A rendered 3D character carries its own lighting. All four keep their colour in BOTH themes, they become the bright objects the dark screen is built around, and anything written on one of them goes back to ink — that is what `--on-card` is for. Chalk on slate, pen on paper, even when the two sit two millimetres apart. Inverting them would have been consistent and wrong, and it is precisely what makes most dark modes of an illustrated product look like a filter ran over it. ========================================================================= */ :root { color-scheme: light; /* ── roles that are NOT one colour flipped ────────────────────────────── 🔴 A TOKEN WHOSE JOB IS "THE LABEL ON THE ORANGE BUTTON" IS NOT THE SAME TOKEN AS "THE INK". They coincide in light, which is exactly how a naive flip turns a CTA into cream-on-orange at 2.3:1. `--marker` stays orange in both themes, so anything sitting ON it has to be decided on its own. */ --on-marker: #000; /* a label on the one saturated fill: pure black, Pisith's pick */ --on-card: var(--ink); /* written on real card stock */ --on-card-dim: var(--pencil); --balloon: var(--card); /* a DRAWN balloon, which is not an object */ --slab: var(--card); /* a control's own card stock: no black controls on the light page */ --on-slab: var(--ink); /* ── the six material families ────────────────────────────────────────── Every composited image belongs to exactly one, and the family is what decides how it survives a theme flip. See `../rules/material.md`. */ --plate-blend: multiply; --plate-filter: none; /* the ground */ --ink-blend: multiply; --ink-filter: none; /* what the hand drew */ --glow-blend: multiply; --glow-filter: none; /* the marker, and stains */ --obj-blend: multiply; --obj-filter: none; /* something lying on it */ --paper-blend: multiply; --paper-filter: none; /* a scrap of the notebook */ --art-blend: multiply; --art-filter: none; /* a rendered picture */ --frame-filter: none; /* the worn print */ /* ── the neon, switched off ── */ --bloom-marker: none; --bloom-lime: none; --bloom-spray: none; --bloom-esp: none; --bloom-str: none; --bloom-soc: none; --sh-rgb: 20, 16, 38; } [data-theme="dark"] { color-scheme: dark; /* ── the ground ────────────────────────────────────────────────────────── `--ink` is CHALK, not white. Chalk is soft, slightly warm and never reaches #FFF; pure white on slate is the fastest way to make a chalkboard look like a CSS background colour. */ --paper: #16171C; /* the board */ --grid: #4A5260; /* chalk residue, where a rule would have been */ --margin: #7A5250; --desk: #08090C; /* the room behind it */ --card: #DED7C5; /* 🔴 STILL PAPER. A board does not bleach card stock. */ --balloon: #20222A; /* a drawn balloon IS chalk on slate */ --kraft: #5A4B30; --tape: #6B5B34; --lock: #2E2A38; --focus: #ECE7DA; --ink: #ECE7DA; /* chalk */ --pencil: #98A0AE; /* ── the three saturated colours: the same three, lifted ───────────────── ⚠️ SAME HUES, SAME JOBS, MORE LUMINANCE. Not one of them is a new colour. `--marker` is still the single hero fill, `--highlighter` is still laid over words and never behind a control, `--spray` still belongs to the mark. What changes is that #391589 on a #16171C board is not a colour, it is a hole. */ --marker: #FF6D1A; --highlighter: #DFFF3F; --spray: #A855F7; /* ── the three XP axes ─────────────────────────────────────────────────── Still disjoint, still never blended, still carrying a different SHAPE each as well as a different hue. `design-os/rules/language.md` owns their order: Español, Street Talk, Social Skills. */ --esp: #7C4DFF; --str: #FF4526; --soc-line: #2FC6E8; /* ── ink on paper, chalk on slate ── */ --on-marker: #000; --on-card: #191520; --on-card-dim: #5C5566; --slab: #22242C; --on-slab: #ECE7DA; /* ── the six families, resolved for slate ──────────────────────────────── The plate IS the board, so it stops multiplying: multiplying #16171C into #16171C is #010101 and every grain of tooth in it dies. Chalk is the exact dual of ink — invert turns black strokes pale and screen lays them on the board the way multiply laid black ones on cream. It is also physically what chalk does: it sits ON the surface and adds light, where ink soaks in and takes light away. 🔑 `paper` IS THE ONE FAMILY WHOSE BLEND DOES NOT MOVE, and that is what stops the whole theme reading as a filter. */ --plate-blend: normal; --plate-filter: none; --ink-blend: screen; --ink-filter: invert(1); --glow-blend: screen; --glow-filter: saturate(1.5) brightness(1.04) opacity(.36) drop-shadow(0 0 9px rgba(223, 255, 63, .32)); --obj-blend: screen; --obj-filter: brightness(.6) saturate(.92); --paper-blend: multiply; --paper-filter: brightness(.98) saturate(.96); --art-blend: normal; --art-filter: none; --frame-filter: brightness(.82) saturate(.94); /* ── the neon ──────────────────────────────────────────────────────────── 🔴 BLOOM LANDS ONLY WHERE THE LIGHT THEME ALREADY HAD A SATURATED COLOUR. Same places, same count, more energy. Nothing gains a glow that was not already coloured, which is what keeps "more graffiti neon" from becoming a light show and what keeps the composition identical. */ --bloom-marker: drop-shadow(0 0 15px rgba(255, 109, 26, .50)); --bloom-lime: drop-shadow(0 0 12px rgba(223, 255, 63, .40)); --bloom-spray: drop-shadow(0 0 24px rgba(168, 85, 247, .45)); --bloom-esp: 0 0 22px rgba(124, 77, 255, .55); --bloom-str: drop-shadow(0 0 13px rgba(255, 69, 38, .50)); --bloom-soc: drop-shadow(0 0 11px rgba(47, 198, 232, .50)); /* A #141026 shadow is invisible on a #16171C board. Shadows are built from `rgba(var(--sh-rgb), …)` so they re-colour with the theme; on slate the separation has to come from a light hairline instead, not from a shadow. */ --sh-rgb: 0, 0, 0; } /* 🔴 ZERO BORDER RADII, EVERYWHERE. Paper tears and markers cut; nothing rounds. This is the first design rule and it is the single fastest way to tell whether something belongs to this language. */ * { border-radius: 0; }