Editorial Grid / Magazine

Also called: Magazine Layout, Editorial Design, Print-inspired Web

A printed magazine on screen: big serif headlines, drop caps, pull quotes, captions, column rules and asymmetric lead-story grids.

“Magazine spread”Editorial & TypographicEra: Print magazines (1960s) → digital longform (2010s–today)SeriousLuxuryTrustworthyCalm

Open full screen ↗

editorial-grid-magazine / landingEN

editorial-grid-magazine / landingTH

Customize

Try a palette, other colours, radius, density, display size and fonts on the preview. The copied prompt and theme export follow your choices; the style itself never changes.

Palettes

UI Lingo pool

Radius sm0pxRadius md0pxRadius lg0pxRadius xl0pxDensity×1.05Display size×1Latin headingLatin bodyThai headingThai body

Colours · Light

bgsurfacesurface-2texttext-mutedprimaryon-primarysecondaryon-secondaryaccentbordersuccesswarningdangerchart-1chart-2chart-3chart-4chart-5

Recipes may hard-code decorative colours, sizes or fonts, so a change can apply only in part, and the signature may not hold.

Design keywords

Say these words to ask for this style.

big serif headlinesdrop capspull quotescolumn rulesasymmetric lead storymasthead double rulered kicker capsphoto captionswarm paper white

Editorial Grid borrows the toolkit of a printed magazine spread. A masthead sits over a thick-and-thin double rule, headlines are set in a high-contrast display serif (often italic), body copy is a bookish serif, and every story opens with a drop cap. Content is arranged on an asymmetric column grid — one lead story twice as wide as the briefs beside it — separated by vertical hairline column rules instead of boxes. Kickers in small red caps, numbered captions and oversized pull quotes do the decorating.

Best for

News, magazines and longform publishers
Brand journals and content-led marketing sites
Culture, fashion and travel guides
Annual reports that tell a story

Avoid for

Dense data tools where serif body text slows scanning
Playful kids or gaming products
Short transactional flows (checkout, sign-up only)

✓ Do

Open every Latin story with a 3-line drop cap (Thai: bold first line)
Use a 2fr / 1fr / 1fr lead-story grid with 1px column rules between columns
Kick each headline with an 11–12px uppercase red kicker and a short rule
Caption every image: small, muted, starting with a bold label

✕ Don't

Don’t box content in rounded cards with shadows
Don’t set headlines in a sans-serif or centre long paragraphs
Don’t box stories in bordered cards; use a 3px top rule only

Not to be confused with

Minimalism & Swiss Style →Swiss uses a sans-serif, strict symmetric grid and no ornament; Magazine uses serif headlines, drop caps, pull quotes and an asymmetric lead story.E-Ink / Paper →E-Ink is a calm single reading column with dithered greys and no colour; Magazine is a multi-column spread with a red kicker, italic display and pull quotes.Academia (Scholarly) →Academia is dark mahogany with gold leaf, footnotes and library cards; Magazine is bright paper white with black ink and one red.

On mobile

Collapse to one column but keep the masthead double rule, the drop cap and the red kickers; lists become hairline-ruled story rows with a serif title and a small caps meta line.

At a glance

Accessibility

Performance

Build complexity

Typography

Heading · LatinPlayfair Display · 700/900

The quick brown fox

Heading · ThaiTaviraj · 700/900

สวัสดีชาวโลก ยินดีต้อนรับ

Body · LatinSource Serif 4 · 400/600/700

Clear words make shared decisions.

Body · ThaiMaitree · 400/600/700

คำที่ชัดเจนช่วยให้ทีมตัดสินใจร่วมกันได้

Taviraj has the same razor-thin hairlines and fat stems as Playfair Display; Maitree is a sturdy looped book serif that reads like Source Serif 4 in long Thai paragraphs.

Colour palette

Light

Dark

Design tokens

Radius	`sm 0px · md 0px · lg 0px · xl 0px · pill 0px`
Border	`1px`
Shadow	`none`
Display	`clamp(3rem, 6.8vw, 6rem)`
Motion	`200ms cubic-bezier(.3,0,.2,1)`
Density	`×1.05`

Theme export

Drop the tokens into a shadcn/ui or Tailwind project, or any tool that reads design tokens.

shadcn/ui globals.css

Preview

/* UI Lingo · Editorial Grid / Magazine (editorial-grid-magazine) — shadcn/ui theme variables (Tailwind v4). Replace the :root and .dark blocks in globals.css.
 * Default mode is light; dark values apply under .dark.
 * Derived: card/popover/sidebar = surface, muted = surface-2, accent = surface-2 (shadcn hover surface), destructive = danger, input = border, ring = primary, --radius = radius lg.
 * Fonts: https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=IBM+Plex+Mono:wght@400;500&family=Taviraj:wght@700;900&family=Maitree:wght@400;600;700&display=swap
 */
:root {
  --radius: 0px;
  --background: #F7F4EE;
  --foreground: #161412;
  --card: #FBF9F5;
  --card-foreground: #161412;
  --popover: #FBF9F5;
  --popover-foreground: #161412;
  --primary: #161412;
  --primary-foreground: #F7F4EE;
  --secondary: #B3401C;
  --secondary-foreground: #FFFFFF;
  --muted: #EFEAE0;
  --muted-foreground: #5E574F;
  --accent: #EFEAE0;
  --accent-foreground: #161412;
  --destructive: #B3261E;
  --border: #161412;
  --input: #161412;
  --ring: #161412;
  --chart-1: #161412;
  --chart-2: #B3401C;
  --chart-3: #7C8C6E;
  --chart-4: #C6A15B;
  --chart-5: #8C847A;
  --sidebar: #FBF9F5;
  --sidebar-foreground: #161412;
  --sidebar-primary: #161412;
  --sidebar-primary-foreground: #F7F4EE;
  --sidebar-accent: #EFEAE0;
  --sidebar-accent-foreground: #161412;
  --sidebar-border: #161412;
  --sidebar-ring: #161412;
}

.dark {
  --background: #151311;
  --foreground: #EFE9DE;
  --card: #1B1916;
  --card-foreground: #EFE9DE;
  --popover: #1B1916;
  --popover-foreground: #EFE9DE;
  --primary: #EFE9DE;
  --primary-foreground: #151311;
  --secondary: #E46F47;
  --secondary-foreground: #151311;
  --muted: #24211D;
  --muted-foreground: #ABA295;
  --accent: #24211D;
  --accent-foreground: #EFE9DE;
  --destructive: #F07468;
  --border: #EFE9DE;
  --input: #EFE9DE;
  --ring: #EFE9DE;
  --chart-1: #EFE9DE;
  --chart-2: #E46F47;
  --chart-3: #9DB08D;
  --chart-4: #D8B571;
  --chart-5: #8C847A;
  --sidebar: #1B1916;
  --sidebar-foreground: #EFE9DE;
  --sidebar-primary: #EFE9DE;
  --sidebar-primary-foreground: #151311;
  --sidebar-accent: #24211D;
  --sidebar-accent-foreground: #EFE9DE;
  --sidebar-border: #EFE9DE;
  --sidebar-ring: #EFE9DE;
}

Tailwind v4 theme.css

Preview

/* UI Lingo · Editorial Grid / Magazine (editorial-grid-magazine) — Tailwind CSS v4 theme. Paste after @import "tailwindcss";
 * Default mode is light; dark values apply under .dark.
 * Derived: shadow "none" = 0 0 #0000; var(--c-x) in shadows = var(--color-x); shadows using recipe-only variables are left out.
 * Fonts: https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=IBM+Plex+Mono:wght@400;500&family=Taviraj:wght@700;900&family=Maitree:wght@400;600;700&display=swap
 */
@theme {
  --color-bg: #F7F4EE;
  --color-surface: #FBF9F5;
  --color-surface-2: #EFEAE0;
  --color-text: #161412;
  --color-text-muted: #5E574F;
  --color-primary: #161412;
  --color-on-primary: #F7F4EE;
  --color-secondary: #B3401C;
  --color-on-secondary: #FFFFFF;
  --color-accent: #B3401C;
  --color-border: #161412;
  --color-success: #2E6B3F;
  --color-warning: #9A6200;
  --color-danger: #B3261E;
  --color-chart-1: #161412;
  --color-chart-2: #B3401C;
  --color-chart-3: #7C8C6E;
  --color-chart-4: #C6A15B;
  --color-chart-5: #8C847A;
  --radius-sm: 0px;
  --radius-md: 0px;
  --radius-lg: 0px;
  --radius-xl: 0px;
  --radius-pill: 0px;
  --shadow-sm: 0 0 #0000;
  --shadow-md: 0 0 #0000;
  --shadow-lg: 0 0 #0000;
  --font-heading: "Playfair Display", "Taviraj", system-ui, sans-serif;
  --font-body: "Source Serif 4", "Maitree", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, "Maitree", monospace;
}

.dark {
  --color-bg: #151311;
  --color-surface: #1B1916;
  --color-surface-2: #24211D;
  --color-text: #EFE9DE;
  --color-text-muted: #ABA295;
  --color-primary: #EFE9DE;
  --color-on-primary: #151311;
  --color-secondary: #E46F47;
  --color-on-secondary: #151311;
  --color-accent: #E46F47;
  --color-border: #EFE9DE;
  --color-success: #6FBF83;
  --color-warning: #E0A84A;
  --color-danger: #F07468;
  --color-chart-1: #EFE9DE;
  --color-chart-2: #E46F47;
  --color-chart-3: #9DB08D;
  --color-chart-4: #D8B571;
  --color-chart-5: #8C847A;
}

DTCG tokens tokens.json

Preview

{
  "$description": "UI Lingo · Editorial Grid / Magazine (editorial-grid-magazine). Default mode: light. Fonts: https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,700;0,900;1,700;1,900&family=Source+Serif+4:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=IBM+Plex+Mono:wght@400;500&family=Taviraj:wght@700;900&family=Maitree:wght@400;600;700&display=swap",
  "color": {
    "light": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.9569,
            0.9333
          ],
          "hex": "#f7f4ee"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9843,
            0.9765,
            0.9608
          ],
          "hex": "#fbf9f5"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.9176,
            0.8784
          ],
          "hex": "#efeae0"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.0784,
            0.0706
          ],
          "hex": "#161412"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.3686,
            0.3412,
            0.3098
          ],
          "hex": "#5e574f"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.0784,
            0.0706
          ],
          "hex": "#161412"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9686,
            0.9569,
            0.9333
          ],
          "hex": "#f7f4ee"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.702,
            0.251,
            0.1098
          ],
          "hex": "#b3401c"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            1,
            1,
            1
          ],
          "hex": "#ffffff"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.702,
            0.251,
            0.1098
          ],
          "hex": "#b3401c"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.0784,
            0.0706
          ],
          "hex": "#161412"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1804,
            0.4196,
            0.2471
          ],
          "hex": "#2e6b3f"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6039,
            0.3843,
            0
          ],
          "hex": "#9a6200"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.702,
            0.149,
            0.1176
          ],
          "hex": "#b3261e"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0863,
            0.0784,
            0.0706
          ],
          "hex": "#161412"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.702,
            0.251,
            0.1098
          ],
          "hex": "#b3401c"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4863,
            0.549,
            0.4314
          ],
          "hex": "#7c8c6e"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.7765,
            0.6314,
            0.3569
          ],
          "hex": "#c6a15b"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.5176,
            0.4784
          ],
          "hex": "#8c847a"
        }
      }
    },
    "dark": {
      "bg": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0824,
            0.0745,
            0.0667
          ],
          "hex": "#151311"
        }
      },
      "surface": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1059,
            0.098,
            0.0863
          ],
          "hex": "#1b1916"
        }
      },
      "surface-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.1412,
            0.1294,
            0.1137
          ],
          "hex": "#24211d"
        }
      },
      "text": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.9137,
            0.8706
          ],
          "hex": "#efe9de"
        }
      },
      "text-muted": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6706,
            0.6353,
            0.5843
          ],
          "hex": "#aba295"
        }
      },
      "primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.9137,
            0.8706
          ],
          "hex": "#efe9de"
        }
      },
      "on-primary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0824,
            0.0745,
            0.0667
          ],
          "hex": "#151311"
        }
      },
      "secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8941,
            0.4353,
            0.2784
          ],
          "hex": "#e46f47"
        }
      },
      "on-secondary": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.0824,
            0.0745,
            0.0667
          ],
          "hex": "#151311"
        }
      },
      "accent": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8941,
            0.4353,
            0.2784
          ],
          "hex": "#e46f47"
        }
      },
      "border": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.9137,
            0.8706
          ],
          "hex": "#efe9de"
        }
      },
      "success": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.4353,
            0.749,
            0.5137
          ],
          "hex": "#6fbf83"
        }
      },
      "warning": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8784,
            0.6588,
            0.2902
          ],
          "hex": "#e0a84a"
        }
      },
      "danger": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9412,
            0.4549,
            0.4078
          ],
          "hex": "#f07468"
        }
      },
      "chart-1": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.9373,
            0.9137,
            0.8706
          ],
          "hex": "#efe9de"
        }
      },
      "chart-2": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8941,
            0.4353,
            0.2784
          ],
          "hex": "#e46f47"
        }
      },
      "chart-3": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.6157,
            0.6902,
            0.5529
          ],
          "hex": "#9db08d"
        }
      },
      "chart-4": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.8471,
            0.7098,
            0.4431
          ],
          "hex": "#d8b571"
        }
      },
      "chart-5": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [
            0.549,
            0.5176,
            0.4784
          ],
          "hex": "#8c847a"
        }
      }
    }
  },
  "radius": {
    "sm": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "md": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "lg": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "xl": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    },
    "pill": {
      "$type": "dimension",
      "$value": {
        "value": 0,
        "unit": "px"
      }
    }
  },
  "border-width": {
    "$type": "dimension",
    "$value": {
      "value": 1,
      "unit": "px"
    }
  },
  "shadow": {},
  "font": {
    "heading": {
      "$type": "fontFamily",
      "$value": [
        "Playfair Display",
        "Taviraj",
        "system-ui",
        "sans-serif"
      ]
    },
    "body": {
      "$type": "fontFamily",
      "$value": [
        "Source Serif 4",
        "Maitree",
        "system-ui",
        "sans-serif"
      ]
    },
    "mono": {
      "$type": "fontFamily",
      "$value": [
        "IBM Plex Mono",
        "ui-monospace",
        "SFMono-Regular",
        "Menlo",
        "Maitree",
        "monospace"
      ]
    }
  },
  "font-weight": {
    "heading": {
      "$type": "fontWeight",
      "$value": 700
    },
    "body": {
      "$type": "fontWeight",
      "$value": 400
    }
  },
  "duration": {
    "$type": "duration",
    "$value": {
      "value": 200,
      "unit": "ms"
    }
  },
  "easing": {
    "$type": "cubicBezier",
    "$value": [
      0.3,
      0,
      0.2,
      1
    ]
  },
  "density": {
    "$type": "number",
    "$value": 1.05
  }
}

Prompt builder

Paste into Claude, Cursor, v0, Lovable or any coding agent to recreate this style.

PageTech stackContent languageMode

Audit: ✓ Passed
Rounds: 2
Builder: unknown
Auditor: unknown

Second style (optional)Instruction

A new-style brief from this style and an optional second one, for the model ladder. It is not a style: it must pass the ladder before merging, and nothing is created for you.

Meta-prompt for the writer remix-brief.md

Preview

New style issue draft new-style-issue.md

Preview

prompt.json skeleton prompt.json

Preview

Copied!