MDX Components Template | Writ In Light | Writ In Light

MDX Components Template

This note is a living reference for every component available when writing MDX content. Use it as a cheat sheet when composing new posts.

Callout

Four types for surfacing asides and annotations. The title prop overrides the default label.

astro 
<Callout type="note">
Content here.
</Callout>

<Callout type="tip">Content here.</Callout>

<Callout type="warning">Content here.</Callout>

<Callout type="insight" title="Custom Title">
Content here.
</Callout>

Definition Card

For colour theory terms or vocabulary. Optionally links to a glossary entry via href, and accepts an also alias.

Hue also: colour name, dominant wavelength

The pure spectral attribute of a colour: what we commonly call its 'name'. Red, yellow, blue. Hue is position on the colour wheel, independent of lightness or saturation.

Chroma

The degree of colourfulness relative to a similarly lit neutral grey. High chroma is vivid; low chroma approaches grey. Distinct from saturation, which is chroma relative to lightness.

astro 
<DefinitionCard
term="Hue"
definition="The pure spectral attribute of a colour."
also="colour name"
/>

<DefinitionCard
term="Chroma"
definition="Colourfulness relative to a neutral grey."
href="/glossary/chroma"
/>

Stat

For pulling out a key number or value. Three accent colours: gold, slate, rose.

360°
Degrees in a colour wheel
~380
Nanometres, violet light
3
Primary hues in RYB
astro 
<div class="grid grid-cols-3 gap-6 my-8">
<Stat value="360°" label="Degrees in a colour wheel" accent="gold" />
<Stat value="~380" label="Nanometres, violet light"  accent="slate" />
<Stat value="3"    label="Primary hues in RYB"       accent="rose" />
</div>

Timeline

For documenting a learning arc, process, or progression. Each item takes date, label, content, and accent.

2025-07 Started

Began investigating colour theory from first principles. Read Albers' Interaction of Color.

2025-09 Pivot

Shifted focus from RYB to CIELAB after realising perceptual uniformity matters more for digital work.

2025-12 Applied

Built the first version of the colour diary system. Started observing and logging colour in the real world daily.

2026-03 Now

Exploring colour temperature and the role of context in perception.

astro 
<Timeline items={[
{ date: "2025-07", label: "Started", content: "...", accent: "slate" },
{ date: "2025-09", label: "Pivot",   content: "...", accent: "gold"  },
{ date: "2025-12", label: "Applied", content: "...", accent: "gold"  },
{ date: "2026-03", label: "Now",     content: "...", accent: "rose"  }
]} />

Comparison

Side-by-side contrast of two concepts, approaches, or ideas. Each side takes a label and content.

Additive (RGB)

Mixing light. Red + Green + Blue = White. Used in screens, projectors, and digital display. The more colour added, the lighter the result.

Subtractive (CMYK)

Mixing pigment. Cyan + Magenta + Yellow = Black (in theory). Used in print. Colour is produced by absorbing wavelengths from white light.

Saturation

Colourfulness relative to brightness. Context-dependent: a pale colour can have high lightness but low saturation.

Chroma

Colourfulness relative to a neutral grey of equal lightness. An absolute measure. Used in CIELAB and Munsell.

astro 
<Comparison
left={{
  label: "Label A",
  content: "Description of the first concept or approach."
}}
right={{
  label: "Label B",
  content: "Description of the second concept or approach."
}}
/>

TooltipTerm

For inline vocabulary with a hover definition. Keeps readers in the flow without linking away.

Colour perception begins when photoreceptors Light-sensitive cells in the retina. Cones handle colour; rods handle luminance in low light. in the eye respond to incoming light. The three types of cone cells S-cones (short/blue), M-cones (medium/green), L-cones (long/red). Their overlapping sensitivities are the basis of trichromatic vision. each peak at different wavelengths.

astro 
<TooltipTerm
term="photoreceptors"
definition="Light-sensitive cells in the retina."
/>

Existing Atoms (reference)

Badge

default success warning error
astro 
<Badge text="default" />
<Badge text="success" variant="success" />
<Badge text="warning" variant="warning" />
<Badge text="error"   variant="error" />

Highlight

Use default highlight for neutral emphasis, rose highlight for warm, gold highlight for notable, and slate highlight for cool or technical terms.

astro 
<Highlight content="default" />
<Highlight content="rose"    variant="rose" />
<Highlight content="gold"    variant="gold" />
<Highlight content="slate"   variant="slate" />

Quote

Colour is the keyboard, the eyes are the harmonies, the soul is the piano with many strings.

Wassily Kandinsky • Concerning the Spiritual in Art
astro 
<Quote
content="Quote text here."
author="Author Name"
source="Source Title"
/>

ColorSwatch

astro 
<ColorSwatch color="#A87776" />
<ColorSwatch color="#D6B273" />
<ColorSwatch color="#646B94" />

ConceptTag

Use concept tags inline, like simultaneous contrast or spectral reflectance , for italic serif vocabulary pulls.

astro 
<ConceptTag value="simultaneous contrast" />

ColorHover

Hover to reveal violet · gold · slate · rose

astro 
<ColorHover color="rose">Hover to reveal rose</ColorHover>

Divider

astro 
<Divider variant="solid" />
<Divider variant="dashed" color="rose" />
<Divider variant="dotted" color="gold" />

References

References

astro 
<References items={[
{ text: "Author. Title (year)", url: "https://..." },
{ text: "Author. Title" }
]} />