Hesoyam

Blocks

Page chrome is a table, not a stack of cards. Full-width hairlines divide title, tiles, and sections. Radius stays on controls.

Hairline table

gap: 1px on a --ds-gray-alpha-400 fill. Cells paint the page color back on.

Title

One sentence, then a rule.

Title band

DocsPageHeader is the first row. The stripe under the description is the top of the next block.

Anatomy

Every Hesoyam docs page is the same three rows. Components add previews inside a section; they do not start a second layout.

01

DocsPageHeader

40px title, 16px secondary, padding in the cell, hairline under the whole band.

02

DocsCells / DocsCell

Optional 2- or 3-column tiles. Shared rules, no gap, no radius. Use href when the cell is a link.

03

DocsSection

24px heading plus body. Another full-width rule under the band. Live demos sit inside, not beside.

04

DocsPreview

Inset frame at card radius (8px). The only rounded box on a docs page. Code is the next row of that frame.

Usage

Keep class="space-y-12" on the page root so older pages compile. The layout sets it to zero — spacing is the hairline, not a gap.

<DocsPageHeader title="Grid" description="Display elements in a grid layout." />

<DocsCells>
  <DocsCell href="/colors">…</DocsCell>
  <DocsCell href="/icons">…</DocsCell>
</DocsCells>

<DocsSection title="Default">
  <DocsPreview :code="snippet">…</DocsPreview>
</DocsSection>

Do

  • Stack page chrome as full-width bands: title, then cells, then sections. One shared hairline between each.
  • Use --ds-gray-alpha-400 for every rule. Same token on header, sidebar, cells, and preview frames.
  • Put DocsCells next to DocsPageHeader when the tiles are the page, not inside a padded section.
  • Keep radius 0 on the page table. Round only the control or the preview frame inside a cell.

Don't

  • Do not wrap a page in gap + rounded cards. That breaks the table and doubles the borders.
  • Do not invent a second hairline color or a 2px rule for “emphasis”.
  • Do not add space-y between DocsPageHeader, DocsCells, and DocsSection — the layout zeroes it.
  • Do not put page padding on <main>. Padding lives on the cell, so rules can run edge to edge.