Every active design language, rendered from its own cited doctrine, with the conformance receipt for each invariant. The page's own frame is the apple-dark design language — the proof surface follows the very process it displays.
27 pass · 0 fail · 3 cannot certify
| invariant | law | verdict | receipt |
|---|---|---|---|
| page-shell · docs/design/pageshell.md | |||
| ap-page-backdrop | the page chrome paints the language backdrop token | pass | |
| ap-page-closed | chrome CSS is a closed simple structure (one root rule, no @-rules/attribute/pseudo) | pass | |
| ap-page-tokenonly | host-chrome CSS references tokens only (no raw hex/px) | pass | |
| ap-page-orient | the page carries a title + breadcrumb orientation | pass | |
| page-layout · docs/design/pageshell.md | |||
| ap-layout-column | all content sits in one centered page column (no full-bleed sprawl) | pass | |
| page-type-ramp · docs/design/pageshell.md | |||
| ap-type-tiered | the shell type ramp carries a heading tier (title > h2 > body) | pass | |
| page-spacing-rhythm · docs/design/pageshell.md | |||
| ap-rhythm-density | panel padding follows the language's cited density band | pass | |
| page-section-grouping · docs/design/pageshell.md | |||
| ap-grouping-depth | the shell composes one chrome level (no chromed box inside a chromed box) | pass | |
| motion · docs/design/motion.md | |||
| ap-motion-band | motion tokens trace to the cited per-language block and sit in the 70-700ms band | pass | |
| component-nav · docs/design/board.md | |||
| ap-nav-anatomy | the site nav band links every surface with a marked active page, token-only | pass | |
| component-button · docs/design/apple-dark.md | |||
| ap-btn-radius | apple-dark button is a 999px capsule | pass | |
| ap-btn-material | OPAQUE fill (not frosted glass) | pass | |
| ap-btn-mechanic | opacity-dim press (dims DOWN) | pass | |
| ap-btn-flat | ZERO box-shadow (depth via material only) | pass | |
| ap-btn-focus | rounded system focus ring (not a square inset) | pass | |
| ap-btn-contrast | button label contrast on the actual fill | cannot certify | present · rendered-css-contrast-probeassets/receipts/apple-dark/ap-btn-contrast.json |
| component-chip · docs/design/apple-dark.md | |||
| ap-chip-radius | apple-dark chip is a capsule (radius 999) | pass | |
| ap-chip-material | OPAQUE fill (not frosted glass) | pass | |
| ap-chip-anatomy | centered label (no dismiss ×) | pass | |
| ap-chip-mechanic | opacity-dim press (dims DOWN) | pass | |
| ap-chip-focus | rounded system ring focus | pass | |
| ap-chip-case | SF sentence case (never ALL-CAPS) | pass | |
| ap-chip-contrast | chip label contrast on the actual fill | cannot certify | present · rendered-css-contrast-probeassets/receipts/apple-dark/ap-chip-contrast.json |
| component-card · docs/design/apple-dark.md | |||
| ap-card-container | ONE container; rows carry no independent chrome (anti grid-of-tiles) | pass | |
| ap-card-rows | groups >=2 metrics as rows (not one box per stat) | pass | |
| ap-card-divider | adjacent rows divided by a 1px hairline | pass | |
| ap-card-inline | row axis is horizontal label+value (not stacked column) | pass | |
| ap-card-material | OPAQUE container (not frosted glass) — the material wall vs liquid-glass | pass | |
| ap-card-rounded | rounded inset container (radius 14) | pass | |
| ap-card-fills | content fills the card (no giant dead space) | cannot certify | present · token-derived-reconstructionassets/receipts/apple-dark/ap-card-fills.png |
27 pass · 0 fail · 3 cannot certify
| invariant | law | verdict | receipt |
|---|---|---|---|
| page-shell · docs/design/pageshell.md | |||
| cb-page-backdrop | the page chrome paints the language backdrop token | pass | |
| cb-page-closed | chrome CSS is a closed simple structure (one root rule, no @-rules/attribute/pseudo) | pass | |
| cb-page-tokenonly | host-chrome CSS references tokens only (no raw hex/px) | pass | |
| cb-page-orient | the page carries a title + breadcrumb orientation | pass | |
| page-layout · docs/design/pageshell.md | |||
| cb-layout-column | all content sits in one centered page column (no full-bleed sprawl) | pass | |
| page-type-ramp · docs/design/pageshell.md | |||
| cb-type-tiered | the shell type ramp carries a heading tier (title > h2 > body) | pass | |
| page-spacing-rhythm · docs/design/pageshell.md | |||
| cb-rhythm-density | panel padding follows the language's cited density band | pass | |
| page-section-grouping · docs/design/pageshell.md | |||
| cb-grouping-depth | the shell composes one chrome level (no chromed box inside a chromed box) | pass | |
| motion · docs/design/motion.md | |||
| cb-motion-band | motion tokens trace to the cited per-language block and sit in the 70-700ms band | pass | |
| component-nav · docs/design/board.md | |||
| cb-nav-anatomy | the site nav band links every surface with a marked active page, token-only | pass | |
| component-button · docs/design/carbon.md | |||
| cb-btn-radius | carbon button is square (radius 0) | pass | |
| cb-btn-anatomy | label hard-left + trailing icon hard-right (space-between DOM) | pass | |
| cb-btn-mechanic | token-swap press (no filter/opacity/state-layer) | pass | |
| cb-btn-flat | flat — zero box-shadow | pass | |
| cb-btn-focus | 2px square inset focus ring | pass | |
| cb-btn-contrast | button label contrast >= WCAG AA | cannot certify | present · rendered-css-contrast-probeassets/receipts/carbon/cb-btn-contrast.json |
| component-chip · docs/design/carbon.md | |||
| cb-chip-radius | carbon Tag is the fixed 16px radius token (NOT the button's 0) | pass | |
| cb-chip-anatomy | dismissible: label + trailing × close button | pass | |
| cb-chip-flat | flat — no blur AND zero box-shadow | pass | |
| cb-chip-mechanic | token-swap hover/active (no filter/opacity) | pass | |
| cb-chip-focus | 2px outline focus (offset) — NOT the button's inset square ring | pass | |
| cb-chip-case | IBM Plex sentence case (never ALL-CAPS) | pass | |
| cb-chip-contrast | chip label contrast >= WCAG AA | cannot certify | present · rendered-css-contrast-probeassets/receipts/carbon/cb-chip-contrast.json |
| component-card · docs/design/carbon.md | |||
| cb-card-container | ONE Tile/list container; rows carry no independent chrome | pass | |
| cb-card-rows | groups >=2 metrics as rows (not one Tile per stat) | pass | |
| cb-card-divider | rows split by a 1px gridline | pass | |
| cb-card-inline | row axis is horizontal label+value (not stacked column) | pass | |
| cb-card-flat | flat Tile — no blur AND no shadow (do not add a drop shadow to tiles) | pass | |
| cb-card-square | square Tile (radius 0) — the Carbon signature vs Apple's rounded list | pass | |
| cb-card-fills | content fills the Tile (no giant dead space) | cannot certify | present · token-derived-reconstructionassets/receipts/carbon/cb-card-fills.png |
24 pass · 0 fail · 3 cannot certify
| invariant | law | verdict | receipt |
|---|---|---|---|
| page-shell · docs/design/pageshell.md | |||
| lg-page-backdrop | the page chrome paints the language backdrop token | pass | |
| lg-page-closed | chrome CSS is a closed simple structure (one root rule, no @-rules/attribute/pseudo) | pass | |
| lg-page-tokenonly | host-chrome CSS references tokens only (no raw hex/px) | pass | |
| lg-page-orient | the page carries a title + breadcrumb orientation | pass | |
| page-layout · docs/design/pageshell.md | |||
| lg-layout-column | all content sits in one centered page column (no full-bleed sprawl) | pass | |
| page-type-ramp · docs/design/pageshell.md | |||
| lg-type-tiered | the shell type ramp carries a heading tier (title > h2 > body) | pass | |
| page-spacing-rhythm · docs/design/pageshell.md | |||
| lg-rhythm-density | panel padding follows the language's cited density band | pass | |
| page-section-grouping · docs/design/pageshell.md | |||
| lg-grouping-depth | the shell composes one chrome level (no chromed box inside a chromed box) | pass | |
| motion · docs/design/motion.md | |||
| lg-motion-band | motion tokens trace to the cited per-language block and sit in the 70-700ms band | pass | |
| component-nav · docs/design/board.md | |||
| lg-nav-anatomy | the site nav band links every surface with a marked active page, token-only | pass | |
| component-button · docs/design/liquid-glass.md | |||
| lg-btn-radius | liquid-glass button is a 999px capsule | pass | |
| lg-btn-material | frosted-glass material on the button | pass | |
| lg-btn-mechanic | glass-brightness press (brightness UP) | pass | |
| lg-btn-contrast | button label contrast >= WCAG AA on the actual glass surface | cannot certify | present · rendered-css-contrast-probeassets/receipts/liquid-glass/lg-btn-contrast.json |
| component-chip · docs/design/liquid-glass.md | |||
| lg-chip-radius | liquid-glass chip is a capsule pill (radius 999) | pass | |
| lg-chip-material | frosted-glass material on the chip | pass | |
| lg-chip-mechanic | glass-brightness press (illuminate-from-within) | pass | |
| lg-chip-focus | capsule halo focus | pass | |
| lg-chip-case | sentence case (never ALL-CAPS) | pass | |
| lg-chip-contrast | chip label contrast on the actual glass surface | cannot certify | present · rendered-css-contrast-probeassets/receipts/liquid-glass/lg-chip-contrast.json |
| component-card · docs/design/liquid-glass.md | |||
| lg-card-container | ONE container; rows carry no independent chrome (anti grid-of-tiles) | pass | |
| lg-card-rows | groups >=2 metrics as rows (not one box per stat) | pass | |
| lg-card-divider | adjacent rows divided by a 1px hairline | pass | |
| lg-card-inline | row axis is horizontal label+value (not stacked column) | pass | |
| lg-card-material | frosted-glass container | pass | |
| lg-card-rounded | rounded inset container (radius 14) | pass | |
| lg-card-fills | content fills the card (no giant dead space) | cannot certify | present · token-derived-reconstructionassets/receipts/liquid-glass/lg-card-fills.png |