/* [2026-08-04] The rules article — mobile-first, one breakpoint, no decoration. * * Pawan, 4 August: "i hate decoration you are doing it not me, you did that even in golds" · * "in the end we should have one gold and dont experiment much" · "mobile-first not desktop relaid". * * WHAT THIS SHEET DOES, AND WHY IT IS SHORT. The previous version was 100 lines of page-level invention * layered on top of gold -- exactly what Spectrum and Fluent exist to prevent. This one does three * things only: names a role for every piece of text, sets ONE gap system, and undoes the gold's * decoration on this page (panels around ordinary prose, mono kickers, six typefaces). * * THE MEASURED PROBLEM IT ANSWERS (playwright, 390px, tools/measure_refs.js): * gold visual-hierarchy: 40 sizes · 5 weights · 6 families · 41 leadings · 35 of 43 gaps off the 4px ramp * Adobe helpx, same width: 1 family · 4 sizes · 2 weights · 2 gaps · no panels * * SIZE AND LEADING SHIP AS A PAIR. Fluent locks them together per role so one cannot be chosen without * the other -- the single constraint that kills 41 line-heights. Every --t-* below carries both. * * MOBILE IS THE BASE. Desktop is added once, at min-width:760px. Tablet inherits desktop, so there is * exactly one switch point and no room to drift in between. The golds carry six. */ /* ============================================================ 1 · SURFACE shell.css sets html{background:#1c1714}. A light article declared before the shell loses, so the page rendered on near-black -- half the mobile viewport was a black slab. Belongs fixed in the shell; held here until it is. */ html { background: #fdfcfa; } body { background: linear-gradient(to bottom, #fdfcfa, #faf5ea); background-attachment: fixed; } /* ============================================================ 2 · ROLES Four sizes, two weights, one family. Adobe runs four sizes on helpx and it reads as a document. Serif body is dropped: Lora at 17px on a phone gives six words a line, which is most of why the page ran to 47,000 pixels. */ :root { --font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif; --t-micro: 0.8125rem; --lh-micro: 1.45; /* 13px — meta, kickers, chips */ --t-body: 0.9375rem; --lh-body: 1.55; /* 15px — everything a reader reads */ --t-lead: 1.0625rem; --lh-lead: 1.5; /* 17px — the one opening paragraph */ --t-h2: 1.375rem; --lh-h2: 1.25; /* 22px — section heads */ --t-h1: 1.75rem; --lh-h1: 1.15; /* 28px */ /* one gap system, every value on the 4px ramp */ --g-1: 4px; --g-2: 8px; --g-3: 12px; --g-4: 16px; --g-6: 24px; --g-8: 32px; --g-12: 48px; --edge: var(--g-4); --ink: #1a1a1a; --ink-2: #4a4a4a; --ink-3: #6b6b6b; --line: #e6e1d8; --accent: #b8500f; --ok: #1a6b45; --ok-bg: #f0f7f2; --warn-bg: #fdf3ec; } /* everything on the page, one family, one body size, one leading */ body, .prose, .prose p, .note, .lede, .opt, .qstem, .qbtn, .nb, .faq .ans, .faq summary, ul.clean li, .reveal-block, .byline, .stat, .mh, .qsub, h1, h2, h3, .badge, .qtypebadge { font-family: var(--font); } body { font-size: var(--t-body); line-height: var(--lh-body); color: var(--ink); } h1 { font-size: var(--t-h1); line-height: var(--lh-h1); font-weight: 700; letter-spacing: -0.01em; } h2 { font-size: var(--t-h2); line-height: var(--lh-h2); font-weight: 700; letter-spacing: -0.01em; margin: 0 0 var(--g-3); } h2 .em { color: var(--accent); } .lede { font-size: var(--t-lead); line-height: var(--lh-lead); color: var(--ink-2); font-family: var(--font); } .byline, .note, .qsub, .stat, .faq .meta span { font-size: var(--t-micro); line-height: var(--lh-micro); color: var(--ink-3); font-family: var(--font); letter-spacing: 0; text-transform: none; } /* the kicker is a plain bold line, the way Adobe writes "Before you begin" -- not letterspaced mono uppercase repeated 135 times down the page */ .mh { font-size: var(--t-body); line-height: var(--lh-body); font-weight: 700; color: var(--ink); letter-spacing: 0; text-transform: none; font-family: var(--font); margin: var(--g-4) 0 var(--g-1); } /* ============================================================ 3 · NO PANELS AROUND PROSE The disease. A border, a radius, a shadow, 16px of padding on four sides and a gap to the next one, 45 times over, is most of the page height and all of the template feeling. A panel now marks something unusual; ordinary prose sits on the page. */ .panel, .panel.glass { background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0; margin: 0 0 var(--g-6); } .prose p { margin: 0 0 var(--g-3); max-width: 68ch; } section { padding: var(--g-8) 0 0; } .wrap { max-width: 720px; padding-inline: var(--edge); } /* ============================================================ 4 · THE SHAPE SITS BESIDE TEXT Pawan: "in mobile you dont want them as rows with missing space or in big size, they are like rows with 2 columns ... smaller column for shape". A narrow shape column and a wide text column, so the shape costs no vertical space at all. The gold's .secrow is already this; it was misused as a full-width section stamp. */ .secrow { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: var(--g-3); align-items: start; } .secrow .sshape { width: 48px; height: 48px; padding: 0; border: 0; background: none; overflow: hidden; } .secrow .sshape svg { width: 100%; height: 100%; display: block; } .secrow > div:not(.sshape) { display: contents; } .secrow .mh { grid-column: 2; grid-row: 1; margin-top: 0; } .secrow .prose { grid-column: 1 / -1; grid-row: 2; } /* [2026-08-04] A section opening carries no kicker, so column two sat empty and the text began BELOW the shape -- a picture alone on a line with dead space beside it, which is the layout Pawan named as the thing to avoid. With no .mh present the prose takes column two on the first row, so the shape costs no vertical space at all. */ .secrow:not(:has(.mh)) .prose { grid-column: 2; grid-row: 1; } .secrow:not(:has(.sshape svg)) { grid-template-columns: minmax(0, 1fr); } .secrow:not(:has(.sshape svg)) .sshape { display: none; } .secrow:not(:has(.sshape svg)) .prose { grid-column: 1; } .hero .xshape { display: none; } .hgl { width: 44px; height: 44px; overflow: hidden; margin: 0 var(--g-3) 0 0; } .hgl svg { width: 100%; height: 100%; display: block; } .hhead { display: flex; align-items: center; gap: var(--g-2); margin-bottom: var(--g-2); } /* ============================================================ 5 · SAID WELL / SAID BADLY IS A PAIR Stacked, the comparison is destroyed and the page doubles in length. Side by side even on a phone, because the difference between them IS the content. */ /* [2026-08-04] minmax(0,1fr), not 1fr. A grid track sized 1fr still refuses to go below its content's minimum width, so one unbreakable string -- onboarding_dashboard_v2, a file name in a worked example -- pushed the column past the viewport and the page scrolled sideways by 46px. The rules the examples quote are full of file names, so this had to happen. */ .reveal-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--g-2); margin: var(--g-3) 0 0; } .reveal-block { min-width: 0; overflow-wrap: anywhere; } .reveal-block { font-family: var(--font); font-size: var(--t-micro); line-height: var(--lh-micro); padding: var(--g-3); border-radius: 6px; border: 0; margin: 0; } .reveal-block .rl { display: block; font-size: var(--t-micro); font-weight: 700; margin-bottom: var(--g-1); letter-spacing: 0; text-transform: none; opacity: 1; } .reveal-block.why { background: var(--ok-bg); color: var(--ok); } .reveal-block.hint { background: var(--warn-bg); color: var(--accent); } /* ============================================================ 6 · CONTROLS 44px floor, and the option list is a real list rather than a train of shadowed bars. */ .quiz { padding: var(--g-4); border: 1px solid var(--line); border-radius: 8px; background: #fff; margin-top: var(--g-4); } .opt { min-height: 44px; padding: var(--g-3); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; font-size: var(--t-body); line-height: var(--lh-body); align-items: center; } .qbtn, .nb { min-height: 44px; font-size: var(--t-micro); font-weight: 700; border-radius: 6px; padding: 0 var(--g-4); display: inline-flex; align-items: center; } .controls { gap: var(--g-2); margin-top: var(--g-4); } .qnav { margin-left: 0; width: 100%; display: flex; gap: var(--g-2); } .qnav .nb { flex: 1; justify-content: center; } .faq details { border-bottom: 1px solid var(--line); border-radius: 0; padding: 0; margin: 0; } .faq summary { padding: var(--g-3) 0; font-weight: 700; font-size: var(--t-body); } .faq .ans { padding: 0 0 var(--g-3); font-size: var(--t-body); line-height: var(--lh-body); } ul.clean li { padding: var(--g-2) 0 var(--g-2) var(--g-4); font-size: var(--t-body); } /* ============================================================ 6b · THE STRAYS, NAMED From tools/attribute.js, which lists every distinct computed value with the elements carrying it. Guessing at selectors is what turned the first strip pass into a size INCREASE: .hhead h1 (1.9rem) out-specifies h1, and .prose (1.08rem) out-specifies body, so neither role was ever applied. Each line below is one measured stray, not a precaution. */ .hhead h1, .hero h1 { font-size: var(--t-h1); line-height: var(--lh-h1); } /* was 30.4px */ .prose, .prose p, p, li, .qstem, .opt, .faq .ans, .faq summary, a.btn, .btn-gh { font-size: var(--t-body); line-height: var(--lh-body); /* was 17.28 / 17.92 / 14.4 */ } .badge, .qtypebadge, .pmeta, .copyr, .copyr b, .nb, .qsub, .meta span, .reveal-block, .reveal-block .rl { font-size: var(--t-micro); line-height: var(--lh-micro); /* was 10.24 / 11.2 / 11.52 / 12.48 / 13.44 */ } b, strong, .prose b, .stat b, .copyr b, ul.clean li b { font-weight: 700; } /* was 900 */ .stat, .xlink, .qstem, .faq summary { font-weight: 700; } /* was 600 */ /* gaps: every one of these was measured off the 4px ramp */ .badge { padding: var(--g-1) var(--g-2); margin: 0 0 var(--g-3); display: inline-block; } .qtypebadge, .stat { padding: var(--g-1) var(--g-2); } .meta { padding-bottom: var(--g-1); } .note { margin: 0 0 var(--g-3); } .qsub { margin: 0 0 var(--g-2); } .qstem { margin: 0 0 var(--g-3); } .ptrack { margin-top: var(--g-1); } .hgl { padding: 0; } .nb, .btn-gh, a.btn { padding-block: 0; } .ctas, .stats { margin-top: var(--g-4); } .hero { padding: var(--g-8) 0 var(--g-6); } .copyr { margin-top: var(--g-6); padding: var(--g-3) 0; border-top: 1px solid var(--line); background: none; } h3.mh { margin-top: var(--g-6); } .tick { margin-top: 0; } /* the last five, each one losing to a more specific gold selector rather than to a missing rule */ .qprog .pmeta { font-size: var(--t-micro); line-height: var(--lh-micro); } .qprog .ptrack { margin-top: var(--g-1); } .qnav .nb { padding-block: 0; } .opt .tick { margin-top: 0; } .faq .meta span { padding-block: var(--g-1); } p.note { margin: 0 0 var(--g-3) !important; } /* the builder wrote inline margins; removed there too */ /* ============================================================ 6c · ONE ACCENT, USED ONCE Pawan: "why do we have so many colors?" The first screen carried the accent four times -- an amber border and amber text on the badge, amber on every rule count, orange on the button, brown on the headline. Four uses of one family means none of them signals anything. The accent now marks links and the one word in a heading that carries the subject. Everything else is ink. */ .badge { background: none; border: 0; padding: 0; color: var(--ink-3); font-weight: 400; letter-spacing: 0; } .stat { background: none; border: 0; color: var(--ink-3); font-weight: 400; padding: 0; } .stat b, .byline b { color: var(--ink-2); font-weight: 700; } .qtypebadge { background: none; border: 0; color: var(--ink-3); font-weight: 400; padding: 0; letter-spacing: 0; text-transform: none; } .btn-gh { background: none; border: 1px solid var(--line); color: var(--ink); } .btn-gh:hover { border-color: var(--accent); color: var(--accent); } .faq summary:before { color: var(--ink-3); } /* the contents is a list, not a chip rack */ #contents ul.clean li { border-bottom: 1px solid var(--line); padding: var(--g-3) 0; display: flex; justify-content: space-between; align-items: baseline; gap: var(--g-4); } #contents .cnum { color: var(--ink-3); font-variant-numeric: tabular-nums; flex: 0 0 auto; } #contents ul.clean li:before { content: none; } #contents .xlink { color: var(--ink); font-weight: 700; border: 0; } #contents .xlink:hover { color: var(--accent); } /* the hero shape sits beside the title, never above it, and never on a phone */ .hgl { display: none !important; } .hero .xshape { display: none; } /* ============================================================ 7 · DESKTOP, added once Tablet inherits this. One switch point, so nothing can drift in between. */ @media (min-width: 760px) { :root { --t-body: 1rem; --lh-body: 1.6; --t-lead: 1.25rem; --lh-lead: 1.5; --t-h2: 1.75rem; --lh-h2: 1.2; --t-h1: 2.5rem; --lh-h1: 1.1; --edge: var(--g-8); } /* beside the title, at the end of the row -- never in front of it */ .herorow { display: flex; align-items: center; gap: var(--g-6); } .htop { flex: 1; min-width: 0; } .hero .xshape { display: grid; width: 84px; height: 84px; flex: 0 0 auto; padding: 0; border: 0; background: none; overflow: hidden; } .secrow { grid-template-columns: 56px minmax(0, 1fr); gap: var(--g-4); } .secrow .sshape { width: 56px; height: 56px; } }