PlatPhorm Layout

Responsive layout workbench

Build, inspect, score, and export real responsive structure for pages, articles, dashboards, cards, docs, forms, galleries, and platform UI surfaces.

Public-safeLocal draftFuture protected

article6 components3 regionsdesktop: 1200px, 12 columns0 viewport findings

Article Brief Draft

Responsive Preview

Article hero12 cols

heading

Headline

span 9

text

Deck

span 8

metadata

Byline and timestamp

span 4

image

Lead image

span 12

Article body8 cols

text

Article body copy

span 8

Context rail4 cols

card

Related coverage

span 4, min 240px

Layout Structure

Region Editor

Region name

Role

Columns12 cols

Gap16px

Stack below640px

Component Editor

Label

Type

Column span9 cols

Min width0px

Min height72px

Add component

Score And Findings

Total Score

100

deterministic

Responsive100

Accessibility100

Alignment100

Spacing100

Overflow100

No deterministic findings for this layout.

Export

{
  "document": {
    "id": "layout-article-brief-20260511000000",
    "slug": "article-brief-draft",
    "title": "Article Brief Draft",
    "description": "Readable article page with metadata, lead media, body, and context rail.",
    "layoutType": "article",
    "config": {
      "type": "article",
      "maxWidth": 1120,
      "columns": 12,
      "gap": 24,
      "density": "balanced",
      "regions": [
        {
          "id": "hero",
          "name": "Article hero",
          "role": "header",
          "columns": 12,
          "gap": 16,
          "stackBelow": 640,
          "order": 0
        },
        {
          "id": "body",
          "name": "Article body",
          "role": "main",
          "columns": 8,
          "gap": 20,
          "minWidth": 0,
          "order": 1
        },
        {
          "id": "rail",
          "name": "Context rail",
          "role": "aside",
          "columns": 4,
          "gap": 16,
          "minWidth": 260,
          "stackBelow": 900,
          "order": 2
        }
      ],
      "components": [
        {
          "id": "headline",
          "type": "heading",
          "label": "Headline",
          "regionId": "hero",
          "minHeight": 72,
          "columnSpan": 9,
          "priority": 5,
          "textLength": 84,
          "interactive": false,
          "metadata": {}
        },
        {
          "id": "dek",
          "type": "text",
          "label": "Deck",
          "regionId": "hero",
          "minHeight": 64,
          "columnSpan": 8,
          "priority": 4,
          "textLength": 180,
          "interactive": false,
          "metadata": {}
        },
        {
          "id": "meta",
          "type": "metadata",
          "label": "Byline and timestamp",
          "regionId": "hero",
          "minHeight": 44,
          "columnSpan": 4,
          "priority": 3,
          "interactive": false,
          "metadata": {}
        },
        {
          "id": "lead-image",
          "type": "image",
          "label": "Lead image",
          "regionId": "hero",
          "minHeight": 320,
          "columnSpan": 12,
          "priority": 4,
          "alt": "Descriptive lead image metadata",
          "interactive": false,
          "metadata": {
            "aspectRatio": "16 / 9"
          }
        },
        {
          "id": "copy",
          "type": "text",
          "label": "Article body copy",
          "regionId": "body",
          "minHeight": 520,
          "columnSpan": 8,
          "priority": 5,
          "textLength": 3200,
          "interactive": false,
          "metadata": {}
        },
        {
          "id": "related",
          "type": "card",
          "label": "Related coverage",
          "regionId": "rail",
          "minWidth": 240,
          "minHeight": 240,
          "columnSpan": 4,
          "priority": 2,
          "interactive": false,
          "metadata": {}
        }
      ]
    },
    "breakpoints": [
      {
        "name": "narrow",
        "width": 320,
        "columns": 4,
        "gutter": 12,
        "margin": 12
      },
      {
        "name": "mobile",
        "width": 390,
        "columns": 4,
        "gutter": 16,
        "margin": 16
      },
      {
        "name": "tablet",
        "width": 768,
        "columns": 8,
        "gutter": 20,
        "margin": 24
      },
      {
        "name": "desktop",
        "width": 1200,
        "columns": 12,
        "gutter": 24,
        "margin": 32
      },
      {
        "name": "wide",
        "width": 1440,
        "columns": 12,
        "gutter": 28,
        "margin": 48
      }
    ],
    "components": [
      {
        "id": "headline",
        "type": "heading",
        "label": "Headline",
        "regionId": "hero",
        "minHeight": 72,
        "columnSpan": 9,
        "priority": 5,
        "textLength": 84,
        "interactive": false,
        "metadata": {}
      },
      {
        "id": "dek",
        "type": "text",
        "label": "Deck",
        "regionId": "hero",
        "minHeight": 64,
        "columnSpan": 8,
        "priority": 4,
        "textLength": 180,
        "interactive": false,
        "metadata": {}
      },
      {
        "id": "meta",
        "type": "metadata",
        "label": "Byline and timestamp",
        "regionId": "hero",
        "minHeight": 44,
        "columnSpan": 4,
        "priority": 3,
        "interactive": false,
        "metadata": {}
      },
      {
        "id": "lead-image",
        "type": "image",
        "label": "Lead image",
        "regionId": "hero",
        "minHeight": 320,
        "columnSpan": 12,
        "priority": 4,
        "alt": "Descriptive lead image metadata",
        "interactive": false,
        "metadata": {
          "aspectRatio": "16 / 9"
        }
      },
      {
        "id": "copy",
        "type": "text",
        "label": "Article body copy",
        "regionId": "body",
        "minHeight": 520,
        "columnSpan": 8,
        "priority": 5,
        "textLength": 3200,
        "interactive": false,
        "metadata": {}
      },
      {
        "id": "related",
        "type": "card",
        "label": "Related coverage",
        "regionId": "rail",
        "minWidth": 240,
        "minHeight": 240,
        "columnSpan": 4,
        "priority": 2,
        "interactive": false,
        "metadata": {}
      }
    ],
    "status": "local_only",
    "visibility": "local",
    "storageMode": "indexeddb",
    "syncStatus": "local_only",
    "traceId": null,
    "createdAt": "2026-05-11T00:00:00.000Z",
    "updatedAt": "2026-05-11T00:00:00.000Z",
    "metadata": {
      "templateSlug": "article-brief",
      "persistence": "Browser-local IndexedDB for non-sensitive drafts. Server persistence is degraded unless DATABASE_URL is configured."
    }
  },
  "score": {
    "id": "score-layout-article-brief-20260511000000-20260511000000",
    "layoutId": "layout-article-brief-20260511000000",
    "totalScore": 100,
    "responsiveScore": 100,
    "accessibilityScore": 100,
    "alignmentScore": 100,
    "spacingScore": 100,
    "overflowScore": 100,
    "findings": [],
    "deterministic": true,
    "modelAssisted": false,
    "traceId": null,
    "createdAt": "2026-05-11T00:00:00.000Z",
    "metadata": {
      "scoring": "Deterministic Phase 1 checks. This is not a claim of full WCAG conformance or perfect responsiveness.",
      "checkedBreakpoints": [
        "narrow",
        "mobile",
        "tablet",
        "desktop",
        "wide"
      ]
    }
  }
}

Grid Inspector

Columns: 12
Gap: 24px
Max width: 1120px
Density: balanced

Integrations

BrowserOpsPhormDocs/DecksTrace

Public-safe Layout workbench is ready.