PageSectionDensity [rule] v1.0.0

Page sections must use density-appropriate spacing: primary marketing sections use generous padding (py-20 sm:py-32 / 80px–128px); application content areas use moderate density (py-8 / 32px); dense data tables and dashboards use compact spacing (py-4 px-6 / 16px–24px). Never apply the same padding token uniformly across all section types.

Label

Page Section Density — Match Spacing to Content Role

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Applies When

any page section, content area, or application panel

Density Scale

    /* Marketing / Landing page sections */
    .section-marketing {
      padding-block: clamp(80px, 10vw, 128px);   /* py-20 sm:py-32 */
    }

    /* Application content panels */
    .section-app {
      padding: 32px;                              /* py-8 px-8 */
    }
    @media (max-width: 768px) {
      .section-app { padding: 24px 16px; }        /* py-6 px-4 */
    }

    /* Dashboard / data-dense sections */
    .section-dense {
      padding: 16px 24px;                         /* py-4 px-6 */
    }

    /* Page header / breadcrumb bar */
    .section-page-header {
      padding: 12px 24px;                         /* py-3 px-6 */
    }
  

Verify By

Identify the role of each section (marketing/application/data). Check that padding tokens match the scale above. A 128px-padded data section or a 16px-padded hero section is a density mismatch.

Severity

warning

PageSectionDensity [rule] v1.0.0

Page sections must use density-appropriate spacing: primary marketing sections use generous padding (py-20 sm:py-32 / 80px–128px); application content areas use moderate density (py-8 / 32px); dense data tables and dashboards use compact spacing (py-4 px-6 / 16px–24px). Never apply the same padding token uniformly across all section types.

Label

Page Section Density — Match Spacing to Content Role

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Applies When

any page section, content area, or application panel

Density Scale

    /* Marketing / Landing page sections */
    .section-marketing {
      padding-block: clamp(80px, 10vw, 128px);   /* py-20 sm:py-32 */
    }

    /* Application content panels */
    .section-app {
      padding: 32px;                              /* py-8 px-8 */
    }
    @media (max-width: 768px) {
      .section-app { padding: 24px 16px; }        /* py-6 px-4 */
    }

    /* Dashboard / data-dense sections */
    .section-dense {
      padding: 16px 24px;                         /* py-4 px-6 */
    }

    /* Page header / breadcrumb bar */
    .section-page-header {
      padding: 12px 24px;                         /* py-3 px-6 */
    }
  

Verify By

Identify the role of each section (marketing/application/data). Check that padding tokens match the scale above. A 128px-padded data section or a 16px-padded hero section is a density mismatch.

Severity

warning

Relations

related: [@community/check-spacing-rhythm, @community/fact-8pt-grid-system, @community/principle-vertical-rhythm]

Rationale

Spacing communicates hierarchy and signals how much attention a section deserves. Marketing hero sections need breathing room to establish brand presence; dashboards need density to show maximum data in limited screen area. Using marketing-scale padding (128px) in a data table is wasteful; using data-table density (16px) in a hero section feels cramped and unpolished.

Label

Page Section Density — Match Spacing to Content Role

Meta

• License: Apache-2.0
• License Provenance: package-authorship-claim

Applies When

any page section, content area, or application panel

Density Scale

    /* Marketing / Landing page sections */
    .section-marketing {
      padding-block: clamp(80px, 10vw, 128px);   /* py-20 sm:py-32 */
    }

    /* Application content panels */
    .section-app {
      padding: 32px;                              /* py-8 px-8 */
    }
    @media (max-width: 768px) {
      .section-app { padding: 24px 16px; }        /* py-6 px-4 */
    }

    /* Dashboard / data-dense sections */
    .section-dense {
      padding: 16px 24px;                         /* py-4 px-6 */
    }

    /* Page header / breadcrumb bar */
    .section-page-header {
      padding: 12px 24px;                         /* py-3 px-6 */
    }
  

Verify By

Identify the role of each section (marketing/application/data). Check that padding tokens match the scale above. A 128px-padded data section or a 16px-padded hero section is a density mismatch.

Severity

warning