Brand icons

render: () => (
  <Specimens>
    <section className="workshop-brand-grid" aria-label="Brand and illustration">
      <figure>
        <MeowlandMark />
        <figcaption>MeowlandMark</figcaption>
      </figure>
      <figure>
        <span style="display:block;width:40px;height:40px">
          <AssistantMark />
        </span>
        <figcaption>AssistantMark</figcaption>
      </figure>
      <figure>
        <DoodleCat />
        <figcaption>DoodleCat</figcaption>
      </figure>
      <figure>
        <EmptyStack />
        <figcaption>EmptyStack</figcaption>
      </figure>
      <figure>
        <GithubIcon />
        <figcaption>GithubIcon</figcaption>
      </figure>
    </section>
    <Specimen
      label="Meowland brand at small sizes"
      aria-label="Meowland brand at small sizes"
      align="start"
    >
      <Inline gap="compact" align="center">
        {[16, 24, 32].map((size) => (
          <span className="workshop-row">
            <span style={`display:inline-flex;width:${size}px;height:${size}px`}>
              <MeowlandMark />
            </span>
            <span>Meowland · {size}px</span>
          </span>
        ))}
      </Inline>
    </Specimen>
    <Specimen
      label="Convenience entries share the Icon outline"
      aria-label="Functional icon convenience entries"
      align="start"
    >
      <div className="workshop-icon-grid">
        {(
          [
            ["NotesIcon", NotesIcon],
            ["TasksIcon", TasksIcon],
            ["SearchIcon", SearchIcon],
            ["PlusIcon", PlusIcon],
            ["ExternalArrowIcon", ExternalArrowIcon],
          ] as const
        ).map(([name, Graphic]) => (
          <div className="workshop-icon-item">
            <Graphic />
            <span>{name}</span>
          </div>
        ))}
      </div>
    </Specimen>
  </Specimens>
)