Dev Tools

DoDont

Guideline card that visually communicates correct or incorrect usage. Pairs a Figma/Sanity image example with a themed label and description — green for do, red for don't.

Import

import DoDont from '../../components/utility/DoDont.astro';

Props

PropTypeRequiredDefaultDescription
variant 'do' | 'dont' Yes — Color theme and icon. Icon is derived automatically.
imageId string No — Example image. When missing, a neutral placeholder fills the media slot.
heading string Yes — Short rule text — rendered as body-md-strong
description string No — Explanatory text — rendered as body-sm in the variant color

Variants

VariantFillBorderIcon + ContentIcon
do --color-fill-element-brand-soft --color-border-element-brand-softer --color-content-brand Filled circle + check cut-out
dont --color-fill-element-critical-soft --color-border-element-critical-softer --color-content-critical Filled circle + cross cut-out

Anatomy

  • Card padding (around image): 8px
  • Text block padding: 16px
  • Icon + heading gap: 8px
  • Heading → description: 8px
  • Card radius: 16px · Image radius: 12px
  • Image aspect ratio: 16 / 10, object-fit: cover
  • Icon size: 20px (filled circle, inner shape is a cut-out showing the card fill color)

Sizing

DoDont fills 100% of its grid cell. Size is controlled by the parent — wrap cards in <Columns count={2} /> for 50% cards or <Columns count={3} /> for 33% cards. Do's and don'ts can be mixed freely in any order and column count.

Usage

<Columns count={2}>
  <DoDont
    variant="do"
    imageId="brand-logo-safe-1"
    heading="Apply on Green 300 background"
    description="Maintain enough contrast for the logo to read clearly."
  />
  <DoDont
    variant="dont"
    imageId="brand-logo-keep-1"
    heading="Don't place on low-contrast fills"
    description="Avoid tints that blend the mark into the surface."
  />
</Columns>

Live examples

Two columns — do + dont

Apply on Green 300 background

Maintain enough contrast so the logo reads clearly from any distance.

Don't place on low-contrast fills

Tints that blend the mark into the surface make it unreadable.

Three columns — mixed

Use the primary mark
Don't skew or stretch
Don't recolor the mark

Heading only — compact

Keep clear space
Never crop below minimum size

Notes

  • The card is not clickable — it's a presentational guideline block.
  • Icon and color are derived from variant. There's no prop to override them per instance — that keeps the visual language consistent.
  • When imageId is omitted, a neutral placeholder renders at the same aspect ratio. Always pass a real image in production content.
  • DoDont is a grid item — place it inside Columns, never directly in .content-flow.
  • The check / cross inside the icon is a cut-out — it picks up the card fill color automatically, so it stays legible in both themes.
Page tokens