Cynosure Design System

Grid System

Page container, breakpoints, gutters, and layout patterns for the Cynosure Lutronic Tailwind theme.

Grid System

Layouts use the Tailwind theme in nextgen/tokens/tailwind.css: the container utility, semantic spacing tokens, and CSS Grid / Flexbox.

Breakpoints

Mobile-first. Unprefixed utilities apply from 0 up; prefix when the layout changes.

NameMin widthTailwind prefix
Mobiledefault(none)
Tablet810pxtablet:
Small desktop1280pxdesktop:
Large desktop1440pxdesktop-lg:

Page container

Use container as the page primitive. It applies full width, responsive gutters, and centering in one class (no extra mx-auto).

RangeBehavior
Below 1280pxFluid width; gutters 16px (mobile) → 24px from tablet
≥ 1280px (desktop)Content 1216px; box 1280px with 32px gutters
≥ 1440px (desktop-lg)Content 1360px; box 1424px with 32px gutters
HTML
1<section class="py-12 tablet:py-18 desktop:py-24"> 2 <div class="container"> 3 <!-- page content --> 4 </div> 5</section>

Gutters only (no max-width):

HTML
1<div class="px-margin-mobile tablet:px-margin-tablet desktop-lg:px-margin-desktop-lg"> 2 … 3</div>

Column gutter

Between columns in multi-column layouts, use the 8px grid gutter: gap-gutter (token --spacing-gutter).

Outer page inset (margins) is not the same as column gutter — margins are the 16 / 24 / 32 values baked into container.

Layout patterns

Flex for components, grid for page layout

  • Flex — card internals, meta rows, button groups, 1-D stacks.
  • CSS Grid — card listings, section splits, divider grids (e.g. stats, article grids).

Two-column section (example)

HTML
1<div class="container"> 2 <div class="grid gap-8 desktop:grid-cols-2 desktop:gap-12"> 3 <div>…</div> 4 <div>…</div> 5 </div> 6</div>

Card grid (example)

HTML
1<div class="container"> 2 <div class="grid gap-gutter tablet:grid-cols-2 desktop:grid-cols-3"> 3 <!-- cards --> 4 </div> 5</div>

Standard section rhythm

Canonical vertical padding for content sections:

py-12 tablet:py-18 desktop:py-24

Only deviate for documented cases (listing pages, CTA bands, featured_text, etc.).

Do’s

  • Start mobile-first; add tablet: / desktop: / desktop-lg: when the design changes.
  • Keep long text columns on flex-1 with min-w-0 so headings wrap instead of overflowing.
  • Prefer fractional widths (w-2/5) or content-driven sizing over arbitrary fixed pixels.

Don’ts

  • Don’t invent a new asymmetric pt / pb pair when the standard section rhythm applies.
  • Don’t flatten desktop spacing onto mobile (e.g. stamp pt-10 at all breakpoints).

Token reference

In the repo:

  • src/handoff/nextgen/tokens/tailwind.css — @theme breakpoints, spacing, @utility container
  • src/handoff/nextgen/tokens/README.md — container / margin table