import { Meta, Title, Subtitle } from '@storybook/addon-docs/blocks';
Isotype — Diagonal
Third mark in the Xertica isotipos series: a diagonal-cut variation of the core grid.
---
## Overview
`IsotypeDiagonal` renders a fixed diagonal-cut variation of the "core" grid isotype. Instead of flat rectangular cells, three color-pair boundaries are cut so they form triangular tips — no props change the geometry or colors, it's a single fixed composition.
```tsx
import { IsotypeDiagonal } from 'xertica-ui/brand';
```
---
## Props
| Prop | Type | Default | Description |
|---|---|---|---|
| `className` | `string` | — | Additional classes on the root — use for sizing (`w-64`, `max-w-md`, etc). `aspect-square` is built in. |
| `aria-label` | `string` | — | Omit for decorative use (root gets `aria-hidden`); set it to render as `role="img"` instead. |
---
## Geometria
The composition fills a `0 0 100 100` viewBox with 8 shapes (4 rects + 4 polygons). Three color-pair boundaries all lie on the same corner-to-corner diagonal of the square:
- The **blue/green** tip, at `(100,0)`–`(75,25)`
- The **magenta/red** tip, at `(0,100)`–`(25,75)`
- The **yellow** hypotenuse, at `(75,25)`–`(25,75)`
Every vertex on these three edges satisfies `x + y = 100` — the same line, which is what produces the single continuous diagonal across the mark. Unlike the grid `Isotype`/`IsotypeMini`, this geometry is not data-driven: it's one fixed hand-derived composition, so there is no pattern/variant prop.
`blue` and `red` are not the small triangles they appear to be — they're full-width backing rectangles (`blue` spans the whole top row, `red` the whole bottom row), painted first. `purple` and `green` are painted on top of `blue`; `magenta` and `brown` are painted on top of `red`. What reads as a blue or red triangle is just whatever of that backing rectangle the shapes on top don't cover. This layering exists to close a rendering seam — see AI Best Practices below.
---
## AI Best Practices
> [!IMPORTANT]
> - **Colors are fixed brand hex values, not theme tokens** — same rule as the grid `Isotype`: never replace `ISOTYPE_COLORS` with CSS custom properties.
> - **All 8 shapes are geometrically interdependent** — never move one vertex/rect without re-checking every seam it backs or is backed by.
> - **This is one fixed composition, not a data-driven pattern** — there is no variant/pattern prop, and none should be added speculatively.
> - **The blank polygon's `fill="none"` is required, not cosmetic** — an SVG shape with no `fill` renders solid black, unlike a CSS `background-color` left unset.
> - **`blue`/`red` are oversized backing rectangles that `purple`/`green`/`magenta`/`brown` deliberately overlap, in that paint order** — this closes the hairline anti-aliasing seam browsers otherwise render between two adjacent shapes even when their edges match exactly. The seam is only visible where a shape's edge borders empty space; painting the tip shapes over a same-color rectangle means any imperfect edge coverage reveals more of the matching color instead of the page background. Two earlier techniques were tried and rejected for this: a same-color `stroke` on every shape (fixed the gap but left visible miter-join artifacts where 3–4 shapes meet at one vertex), and a per-shape `transform: scale(...)` from each shape's bounding-box center (broke alignment entirely, since different shapes have different bounding-box centers). Don't reintroduce either — don't shrink `blue`/`red` back to their visible triangle, and don't move `purple`/`green`/`magenta`/`brown` earlier than `blue`/`red` in paint order.