Frames & surfaces

Shared geometry defines control targets, border thickness and decorative cross length. Cross clearances and optical adjustments stay with the structural classes or owning component.

Control size

Apply --control-min-size to both minimum dimensions of an interactive target. Padding and content can make it larger; the token is a floor, not a fixed square. Drawing dimensions remain independent inside that target, and dependent layout clearance follows the target token.

.control {
  min-width: var(--control-min-size);
  min-height: var(--control-min-size);
}

--border-width controls borders and structural strokes, including crosses. Frame offsets and cross centering follow the same thickness. Active tab indicators use twice this width. Keyboard focus has an independent stroke; text underlines and icon drawings retain their own dimensions.

--cross-size controls the full stroke length of .crossed marks. --accent supplies their color and --border supplies frame rules. See Classes and Notes for shared lines and cross clearances.

Structural frames, text buttons and native fields remain square. The capsule is the one shared rounded silhouette, used by the theme toggle and pill-shaped badges.

Other rounded corners belong to their component: chat messages and the chat composer keep their own radius, 50% circular controls and optical focus corners remain local. Do not add a radius prop to every component.

Use only the shared elevation roles needed by nonmodal surfaces. Native modal dialogs use the browser top layer; a z-index token cannot place an ordinary element above it. Their translucent backdrops share the overlay veil and blur: background: var(--overlay); backdrop-filter: blur(var(--overlay-blur)). Translucent bands over scrolling content reuse the blur alone.

The dark theme redefines both shadows and the overlay more densely, so floating surfaces and modal backdrops still separate from the near-black page. Local frame strokes and pseudo-elements retain their internal ordering. Shadows do not replace visible borders or meaningful hierarchy, particularly in the dark theme.

• Load @dg/ui/styles.css once in the app layout. These classes add no content padding; the owning element or component supplies it.
• --border-width controls frame and cross thickness. Apply overrides to their common container so neighboring frames share the same geometry.
• Use one cross variant per element. framed crossed-bottom combines a frame with the bottom pair.
• For page sections, prefer Section: it already applies framed and selects crosses through its crosses prop. Place frames directly in Page or Main.
• Direct children of Page and Main drop their bottom border: each junction is drawn once, by the top rule of the next frame. The last frame of a page stays open at the bottom, like Footer. Elsewhere, a frame keeps all four edges and the owning layout handles any spacing.
• A cross is centered on the frame lines and erases them for a short length around it, including a neighbor's lines, with the page background. Two frames that cross the same junction paint identical pixels, so both may request it. Erasing affects only lines: content and tinted surfaces inside frames stay intact.
• Keep frames themselves transparent and tint their content instead; the erased line segments show the page background. Keep overflow visible on the crossed element: crosses extend beyond its bounds.
• Cross classes use ::before for line erasers and ::after for strokes; reserve both for their drawing. Do not override internal --_ variables.
• .half-crossed draws two --cross-size strokes of --border-width at each corner, pointing along the edges, from the border box; a transparent border keeps them on the outer edge. They are background images: a background shorthand, such as a hover fill, removes them, while background-color keeps them. Forced-colors mode drops them, so give the element a system border there. The default Button variant uses them at rest, and text fields and select show the same marks in --focus on focus.

<script>
  import { Main, Page } from "@dg/ui";
</script>

<Page>
  <Main>
    <section class="framed crossed">
      <h1>Collection</h1>
    </section>
    <!-- Both frames cross the shared line; their crosses coincide. -->
    <section class="framed crossed">
      <p>The final section is open at the bottom; its bottom crosses end the side rails.</p>
    </section>
  </Main>
</Page>

A standalone frame uses the same classes:

<aside class="framed crossed">
  <p>A framed note outside Page and Main.</p>
</aside>