/* ============================================================= bang-mau.css — ba hướng bảng màu để chọn ------------------------------------------------------------- Cách dùng: đặt data-mau="a" | "b" | "c" trên thẻ . Không đặt gì thì dùng bảng gốc trong index.html. Mỗi bản định nghĩa lại ĐÚNG bộ token của bảng gốc, cho cả chế độ sáng và tối. Không bản nào đụng tới bố cục, khoảng cách hay cỡ chữ — chỉ màu, bo góc và đổ bóng. Nhờ vậy đổi bản không làm vỡ gì, và chọn xong thì chép khối tương ứng đè lên :root trong index.html rồi xoá file này đi. Cả ba đều đã chạy qua kiem-mau.js: 40 cặp chữ/nền, hai chế độ, tối thiểu 4,5:1. ============================================================= */ /* ============================================================= BẢN A — "Giấy" ------------------------------------------------------------- Nền ngà ấm thay vì trắng lạnh, chữ gần như đen, xanh mực làm màu nhấn duy nhất. Viền mảnh thay cho bóng đổ. Bo góc nhỏ (4px). Cảm giác: sách giáo khoa in đẹp, hoặc trang của một tờ báo kinh tế. Mạnh ở chỗ đọc dài không mỏi mắt. ============================================================= */ :root[data-mau="a"]{ --plane:#FAF8F3; --surface:#FFFDF8; --raised:#F2EEE5; --ink-1:#1A1815; --ink-2:#4A453C; --ink-3:#6E675A; --brand:#1F3A5F; --brand-t:#1F3A5F; --brand-d:#14283F; --brand-l:#C9D4E2; --brand-bg:#EDF1F6; --acc:#1F5C8C; --acc-soft:#3E7FB0; --acc-bg:#E9F0F6; --mark:#4A453C; --mark-bg:#F2EEE5; --mark-line:#D8D1C4; --line:#E5DFD3; --line-2:#CFC7B8; --good:#2C6244; --good-bg:#E9F1EC; --warn:#8A5A14; --crit:#912F2F; --crit-bg:#F7EAEA; --d1:#1F5C8C; --d2:#A8C4DB; --d3:#B2452F; --d4:#E0A18F; --d5:#8B8271; --r:4px; --r2:5px; --r3:8px; --shadow:none; --shadow-l:0 2px 6px rgba(26,24,21,.07); --shadow-nav:0 1px 0 var(--line-2); } :root[data-mau="a"][data-theme="dark"]{ --plane:#14130F; --surface:#1C1B16; --raised:#25231C; --ink-1:#F0EDE4; --ink-2:#B8B2A4; --ink-3:#8F8878; --brand:#39628F; --brand-t:#A6C6E8; --brand-d:#A6C6E8; --brand-l:#2C4763; --brand-bg:#1A2634; --acc:#8CBBE0; --acc-soft:#4A8AB8; --acc-bg:#182734; --mark:#B8B2A4; --mark-bg:#25231C; --mark-line:#453F33; --line:#2C2A22; --line-2:#453F33; --good:#62BE8E; --good-bg:#15241B; --warn:#DCAE58; --crit:#EE8478; --crit-bg:#2A1715; --d1:#6BA3D8; --d2:#BDD5EA; --d3:#E0725C; --d4:#F0A492; --d5:#9A9384; --shadow:none; --shadow-l:0 2px 8px rgba(0,0,0,.5); --shadow-nav:0 1px 0 var(--line-2); } /* ============================================================= BẢN B — "Phẳng" ------------------------------------------------------------- Trắng thuần, xám lạnh trung tính, KHÔNG có bóng đổ ở đâu hết — phân cấp hoàn toàn bằng viền và nền. Một màu nhấn bão hoà, chỉ dùng cho thứ bấm được. Bo góc 6px. Cảm giác: Stripe, Linear. Đây là kiểu "trông đắt tiền" mà các sản phẩm tài chính hiện đại đang dùng. ============================================================= */ :root[data-mau="b"]{ --plane:#FFFFFF; --surface:#FFFFFF; --raised:#F7F8FA; --ink-1:#0A0D14; --ink-2:#4B5565; --ink-3:#67717F; --brand:#0A0D14; --brand-t:#0A0D14; --brand-d:#000000; --brand-l:#D3D8DE; --brand-bg:#F2F4F7; --acc:#2557D6; --acc-soft:#4B7BE5; --acc-bg:#EEF3FE; --mark:#4B5565; --mark-bg:#F2F4F7; --mark-line:#D3D8DE; --line:#E7EAEE; --line-2:#CDD3DA; --good:#1A7F4B; --good-bg:#EAF6EF; --warn:#8A5B00; --crit:#B4232A; --crit-bg:#FDEEEF; --d1:#2557D6; --d2:#A9C0F2; --d3:#C4353C; --d4:#EFA0A4; --d5:#8B96A5; --r:6px; --r2:8px; --r3:10px; --shadow:none; --shadow-l:none; --shadow-nav:0 1px 0 var(--line); } :root[data-mau="b"][data-theme="dark"]{ --plane:#0A0D14; --surface:#12161F; --raised:#181D28; --ink-1:#F7F8FA; --ink-2:#A6B0BF; --ink-3:#7E8899; --brand:#F7F8FA; --brand-t:#F7F8FA; --brand-d:#FFFFFF; --brand-l:#2A313E; --brand-bg:#181D28; --acc:#7FA6F5; --acc-soft:#4B7BE5; --acc-bg:#141D33; --mark:#A6B0BF; --mark-bg:#181D28; --mark-line:#333B49; --line:#1E242F; --line-2:#333B49; --good:#4FC184; --good-bg:#0F2318; --warn:#DFAE55; --crit:#F0797F; --crit-bg:#2A1416; --d1:#7FA6F5; --d2:#BCCEF7; --d3:#EE7076; --d4:#F5A6AA; --d5:#8E98A8; --shadow:none; --shadow-l:none; --shadow-nav:0 1px 0 var(--line-2); } /* ============================================================= BẢN C — "Mực" ------------------------------------------------------------- Xanh mực đậm pha chút lục, nền xám xanh rất nhạt. Phân cấp bằng nhiều lớp nền chồng lên nhau thay vì bằng bóng. Bo góc lớn (10px). Cảm giác: bảng điều khiển của một sản phẩm fintech. Mạnh ở chỗ nhìn hiện đại nhất trong ba bản; yếu ở chỗ màu đậm dễ làm trang nặng nếu dùng quá tay. ============================================================= */ :root[data-mau="c"]{ --plane:#F4F7F8; --surface:#FFFFFF; --raised:#EAF0F2; --ink-1:#0E1A1E; --ink-2:#41565D; --ink-3:#557078; --brand:#0F4C52; --brand-t:#0F4C52; --brand-d:#07343A; --brand-l:#B5D2D4; --brand-bg:#E4EFEF; --acc:#116B73; --acc-soft:#2A929B; --acc-bg:#E2F1F1; --mark:#41565D; --mark-bg:#EAF0F2; --mark-line:#C4D2D6; --line:#DEE7E9; --line-2:#C4D2D6; --good:#1D6B47; --good-bg:#E6F2EC; --warn:#8A5410; --crit:#A5322C; --crit-bg:#F9EBEA; --d1:#116B73; --d2:#9BC9CC; --d3:#C05A3E; --d4:#E9AE99; --d5:#7C9199; --r:10px; --r2:12px; --r3:16px; --shadow:none; --shadow-l:0 4px 14px rgba(14,26,30,.08); --shadow-nav:0 1px 0 var(--line-2); } :root[data-mau="c"][data-theme="dark"]{ --plane:#071417; --surface:#0E2126; --raised:#152E34; --ink-1:#E6F0F1; --ink-2:#9FB6BC; --ink-3:#7A949C; --brand:#1B6E76; --brand-t:#7FC4CB; --brand-d:#7FC4CB; --brand-l:#1D4750; --brand-bg:#0D2A2F; --acc:#5FBAC2; --acc-soft:#2A929B; --acc-bg:#0C2A2E; --mark:#9FB6BC; --mark-bg:#152E34; --mark-line:#2B4B53; --line:#16323A; --line-2:#2B4B53; --good:#4CBD87; --good-bg:#0C2419; --warn:#DEAC55; --crit:#EE8074; --crit-bg:#2A1512; --d1:#5FBAC2; --d2:#A9D6DA; --d3:#E37B61; --d4:#F0AC99; --d5:#8AA2A9; --shadow:none; --shadow-l:0 4px 16px rgba(0,0,0,.5); --shadow-nav:0 1px 0 var(--line-2); } /* ============================================================= BẢN D — "Giấy hồng" ------------------------------------------------------------- Nền giấy hồng ấm, mực claret cho tiêu đề, xanh mòng két cho liên kết. Tham chiếu: giấy in của Financial Times. Nền hồng nhạt là thứ gần như không trang học nào dùng, nên nhận ra ngay từ ảnh chụp màn hình — đó vừa là điểm mạnh vừa là rủi ro, vì nó không phải lựa chọn an toàn. Cặp giấy ấm + liên kết lạnh là cách sắp màu kinh điển của báo in. ============================================================= */ :root[data-mau="d"]{ --plane:#FCF2EA; --surface:#FFFAF5; --raised:#F5E6DA; --ink-1:#1C1512; --ink-2:#4C3F38; --ink-3:#6A594F; --brand:#7A1F2E; --brand-t:#7A1F2E; --brand-d:#54141F; --brand-l:#E2C3C6; --brand-bg:#F8E7E6; --acc:#0F5560; --acc-soft:#2A7F8B; --acc-bg:#E4F0F1; --mark:#4C3F38; --mark-bg:#F5E6DA; --mark-line:#DCC7B8; --line:#EEDFD2; --line-2:#D8C3B3; --good:#2B6140; --good-bg:#E9F1EB; --warn:#855312; --crit:#9B2226; --crit-bg:#F9E7E5; --d1:#0F5560; --d2:#9DC4C9; --d3:#A8372C; --d4:#E3A492; --d5:#8B7A6E; --r:4px; --r2:6px; --r3:9px; --shadow:none; --shadow-l:0 2px 8px rgba(28,21,18,.08); --shadow-nav:0 1px 0 var(--line-2); } :root[data-mau="d"][data-theme="dark"]{ --plane:#17110E; --surface:#201814; --raised:#2B211B; --ink-1:#F4EBE4; --ink-2:#BFAEA3; --ink-3:#998577; --brand:#8E3442; --brand-t:#E3A3AC; --brand-d:#E3A3AC; --brand-l:#4A2129; --brand-bg:#2A161A; --acc:#6EBCC7; --acc-soft:#2A7F8B; --acc-bg:#11292D; --mark:#BFAEA3; --mark-bg:#2B211B; --mark-line:#4A3C32; --line:#2E241E; --line-2:#4A3C32; --good:#63BE8D; --good-bg:#14261C; --warn:#DBAB58; --crit:#EE8478; --crit-bg:#2B1714; --d1:#6EBCC7; --d2:#A7D3D8; --d3:#E1786A; --d4:#F0A897; --d5:#A2907F; --shadow:none; --shadow-l:0 2px 10px rgba(0,0,0,.5); --shadow-nav:0 1px 0 var(--line-2); } /* ============================================================= BẢN E — "Rêu" ------------------------------------------------------------- Xanh rêu đậm làm xương, nâu đất làm màu nhấn, nền xám ngà. Đọc ra vẻ học thuật hơn là vẻ công ty công nghệ. Không có màu nào bão hoà cao nên trang nhìn trầm; hợp nếu muốn nghiêm túc, không hợp nếu muốn trẻ trung. ============================================================= */ :root[data-mau="e"]{ --plane:#F7F6F0; --surface:#FFFFFF; --raised:#EDEDE3; --ink-1:#15190F; --ink-2:#434839; --ink-3:#5E6552; --brand:#2E4529; --brand-t:#2E4529; --brand-d:#1D2C1A; --brand-l:#C2CFBB; --brand-bg:#E8EEE4; --acc:#8A4520; --acc-soft:#B0673C; --acc-bg:#F7EAE1; --mark:#434839; --mark-bg:#EDEDE3; --mark-line:#CFD0C0; --line:#E4E4D8; --line-2:#CBCDBC; --good:#2C6244; --good-bg:#E8F1EA; --warn:#7E5510; --crit:#94302B; --crit-bg:#F8E9E7; --d1:#2E4529; --d2:#A9BFA1; --d3:#8A4520; --d4:#DDAE8E; --d5:#7E8271; --r:5px; --r2:7px; --r3:10px; --shadow:none; --shadow-l:0 2px 8px rgba(21,25,15,.08); --shadow-nav:0 1px 0 var(--line-2); } :root[data-mau="e"][data-theme="dark"]{ --plane:#101308; --surface:#191D11; --raised:#222718; --ink-1:#EDEFE2; --ink-2:#B2B8A2; --ink-3:#8D947C; --brand:#42603A; --brand-t:#A8C79D; --brand-d:#A8C79D; --brand-l:#2A3B24; --brand-bg:#182013; --acc:#DE9A6C; --acc-soft:#B0673C; --acc-bg:#291B12; --mark:#B2B8A2; --mark-bg:#222718; --mark-line:#3C422F; --line:#222617; --line-2:#3C422F; --good:#62BE8A; --good-bg:#13251A; --warn:#D8A84F; --crit:#EC8377; --crit-bg:#2A1613; --d1:#A8C79D; --d2:#CCDCC4; --d3:#DE9A6C; --d4:#EFC3A5; --d5:#8F9680; --shadow:none; --shadow-l:0 2px 10px rgba(0,0,0,.5); --shadow-nav:0 1px 0 var(--line-2); } /* ============================================================= BẢN F — "Than" ------------------------------------------------------------- Gần như đen trắng. Chỉ có ĐÚNG MỘT màu — hổ phách — và nó chỉ xuất hiện ở thứ bấm được. Quy tắc: thấy màu là biết bấm được. Đây là hướng kiềm chế nhất, và thường là hướng nhìn đắt tiền nhất, vì không có màu nào để dùng sai. Yếu ở chỗ đồ thị năm đường phải phân biệt bằng sắc độ và nhãn thay vì bằng màu. ============================================================= */ :root[data-mau="f"]{ --plane:#FAFAF8; --surface:#FFFFFF; --raised:#F1F1EE; --ink-1:#0C0C0A; --ink-2:#42423E; --ink-3:#5E5E59; --brand:#0C0C0A; --brand-t:#0C0C0A; --brand-d:#000000; --brand-l:#D4D4CF; --brand-bg:#F1F1EE; --acc:#9A4A05; --acc-soft:#C4671A; --acc-bg:#FBEFE2; --mark:#42423E; --mark-bg:#F1F1EE; --mark-line:#D4D4CF; --line:#E6E6E1; --line-2:#CCCCC6; --good:#2A6140; --good-bg:#EAF1EC; --warn:#7A5410; --crit:#93231F; --crit-bg:#FAE9E7; --d1:#0C0C0A; --d2:#B6B6B0; --d3:#9A4A05; --d4:#E0B388; --d5:#787872; --r:3px; --r2:4px; --r3:6px; --shadow:none; --shadow-l:none; --shadow-nav:0 1px 0 var(--line-2); } :root[data-mau="f"][data-theme="dark"]{ --plane:#0B0B0A; --surface:#141413; --raised:#1D1D1B; --ink-1:#F5F5F2; --ink-2:#A8A8A2; --ink-3:#85857F; --brand:#F5F5F2; --brand-t:#F5F5F2; --brand-d:#FFFFFF; --brand-l:#2E2E2B; --brand-bg:#1D1D1B; --acc:#E09242; --acc-soft:#C4671A; --acc-bg:#241A10; --mark:#A8A8A2; --mark-bg:#1D1D1B; --mark-line:#383834; --line:#212120; --line-2:#383834; --good:#5FBC87; --good-bg:#122319; --warn:#D9A950; --crit:#ED8175; --crit-bg:#291513; --d1:#F5F5F2; --d2:#7E7E78; --d3:#E09242; --d4:#B4793F; --d5:#A8A8A2; --shadow:none; --shadow-l:none; --shadow-nav:0 1px 0 var(--line-2); } /* ============================================================= BẢN G — "Mực+" (bản C làm cho hiện đại hơn) ------------------------------------------------------------- Giữ nguyên họ mòng két của bản C, đẩy ba thứ mà mắt đọc ra là "hiện đại" — và cả ba đều là chuyện hình khối chứ không phải chuyện sắc màu: 1. TÁCH NỀN KHỎI THẺ RÕ HƠN. Bản C có nền #F4F7F8 cạnh thẻ #FFFFFF — gần nhau quá nên thẻ không nổi lên, trang đọc ra phẳng lì như một tờ giấy. Ở đây nền hạ xuống #EDF3F3 và ám màu thương hiệu, nên thẻ trắng nổi lên mà không cần bóng đổ. 2. MÀU NHẤN SÁNG VÀ SỐNG HƠN. #116B73 của bản C là teal trầm, đọc ra hơi cũ. #067A85 sáng hơn một bậc, vẫn đạt 5,08:1 trên thẻ trắng và 4,53:1 trên nền trang. 3. BO GÓC LỚN HƠN VÀ BỎ HẲN BÓNG ĐỔ. 14px thay 10px, bóng đổ thay bằng viền ám màu. Bóng đổ là dấu hiệu thiết kế của những năm 2010; sản phẩm bây giờ tách lớp bằng nền và viền. Thương hiệu hạ xuống gần đen (#0B3F45) thay vì teal tầm trung, để thanh điều hướng và nút chính nhìn dứt khoát hơn. ============================================================= */ :root[data-mau="g"]{ --plane:#EDF3F3; --surface:#FFFFFF; --raised:#E1EBEB; --ink-1:#07171A; --ink-2:#3B5257; --ink-3:#4E6B72; --brand:#0B3F45; --brand-t:#0B3F45; --brand-d:#051F23; --brand-l:#AECDCF; --brand-bg:#DFEDED; --acc:#067A85; --acc-soft:#0FA0AD; --acc-bg:#E9F7F8; --mark:#3B5257; --mark-bg:#E1EBEB; --mark-line:#B9CFD1; --line:#DAE7E7; --line-2:#BACFD1; --good:#16603F; --good-bg:#DFEFE6; --warn:#7E4C0C; --crit:#9A2B25; --crit-bg:#F7E6E4; --d1:#067A85; --d2:#8FC6CB; --d3:#B94F33; --d4:#E7A78F; --d5:#6E878D; --r:14px; --r2:16px; --r3:20px; --shadow:none; --shadow-l:none; --shadow-nav:0 1px 0 var(--line-2); } /* Chế độ tối: gần đen thật chứ không phải xanh đậm. Đây là chỗ khác biệt lớn nhất so với bản C — nền càng gần đen thì màu nhấn càng nổi, và đó là cách mọi giao diện tối hiện nay làm. */ :root[data-mau="g"][data-theme="dark"]{ --plane:#050B0C; --surface:#0D1618; --raised:#152326; --ink-1:#E9F3F3; --ink-2:#9FB7BB; --ink-3:#7F999E; --brand:#0FA0AD; --brand-t:#5FD3DE; --brand-d:#5FD3DE; --brand-l:#1A3A3E; --brand-bg:#0B2225; --acc:#4FCDD9; --acc-soft:#0FA0AD; --acc-bg:#08252A; --mark:#9FB7BB; --mark-bg:#152326; --mark-line:#2A4247; --line:#132123; --line-2:#2A4247; --good:#45C285; --good-bg:#092118; --warn:#DDAC53; --crit:#F0817A; --crit-bg:#2A1412; --d1:#4FCDD9; --d2:#9FDFE6; --d3:#E88167; --d4:#F2AE97; --d5:#8EA6AB; --shadow:none; --shadow-l:none; --shadow-nav:0 1px 0 var(--line-2); } /* ============================================================= BẢN H — "Mực++" (đẩy mạnh tay hơn G) ------------------------------------------------------------- Cùng họ màu, nhưng kéo hết ba cần gạt thay vì kéo vừa: · nền tách khỏi thẻ mạnh hơn nữa (#E9F1F1 so với #EDF3F3 của G) · bo góc 18px — đủ tròn để đọc ra là giao diện ứng dụng, chưa tròn tới mức trẻ con · thương hiệu hạ xuống gần đen hẳn (#072E33), nên thanh điều hướng và nút chính nhìn dứt khoát chứ không còn vẻ "xanh công ty" Đây là đầu kia của dải C → G → H. Nếu H quá tay thì G là điểm giữa, và chênh lệch giữa ba bản chỉ nằm ở năm giá trị, sửa lại rất nhanh. ============================================================= */ :root[data-mau="h"]{ --plane:#E9F1F1; --surface:#FFFFFF; --raised:#DCE9E9; --ink-1:#041417; --ink-2:#364E53; --ink-3:#49666D; --brand:#072E33; --brand-t:#072E33; --brand-d:#03171A; --brand-l:#A6C8CA; --brand-bg:#DAEBEB; --acc:#046B75; --acc-soft:#0FA0AD; --acc-bg:#E9F7F8; --mark:#364E53; --mark-bg:#DCE9E9; --mark-line:#B2CACC; --line:#D5E6E6; --line-2:#B2CACC; --good:#14593B; --good-bg:#DCEEE4; --warn:#77480A; --crit:#932722; --crit-bg:#F6E3E1; --d1:#067A85; --d2:#8AC3C8; --d3:#B54B2F; --d4:#E6A48B; --d5:#69838A; --r:18px; --r2:22px; --r3:26px; --shadow:none; --shadow-l:none; --shadow-nav:0 1px 0 var(--line-2); } :root[data-mau="h"][data-theme="dark"]{ --plane:#030607; --surface:#0A1315; --raised:#111F22; --ink-1:#EAF4F4; --ink-2:#A1B9BD; --ink-3:#809BA0; --brand:#0FA0AD; --brand-t:#6ADAE5; --brand-d:#6ADAE5; --brand-l:#173438; --brand-bg:#081E21; --acc:#5AD5E1; --acc-soft:#0FA0AD; --acc-bg:#062327; --mark:#A1B9BD; --mark-bg:#111F22; --mark-line:#263D42; --line:#0F1C1E; --line-2:#263D42; --good:#43C084; --good-bg:#071F16; --warn:#DCAB52; --crit:#F08079; --crit-bg:#291311; --d1:#5AD5E1; --d2:#9CDEE5; --d3:#E88065; --d4:#F2AD96; --d5:#8FA7AC; --shadow:none; --shadow-l:none; --shadow-nav:0 1px 0 var(--line-2); }