craft spotlight
Connecting design-system patterns with production
A dummy craft case study showing how flexible media components can be mixed through an MDX narrative.
- Role
- UX and frontend designer
- Timeframe
- Placeholder
- Capabilities
- Design systems, Frontend architecture
Example outcome
A placeholder result used to demonstrate structured outcome cards.
The challenge
This short dummy case study demonstrates how ordinary Markdown can be combined with reusable media components. The content is deliberately generic and should not be treated as a real project claim.
A single annotated image
Use a single image when the reader needs to concentrate on one screen, state or decision.
A gallery
Use a gallery for related screens or states that benefit from being read together.
A before-and-after comparison
Use this treatment only when the relationship is genuinely a comparison.
Before
After
A metric
Dummy value only. Replace with a verified measure and its source.
A short video
The player supports a poster, caption and written description. This example uses a public CC0 test clip; replace it with a focused product recording.
Read video description
A short stock clip is used solely to demonstrate the player. A real case study should describe the product interaction shown.
A Figma prototype
The component displays this clear placeholder until a public Figma embed URL is provided. That avoids shipping a broken or private embed by accident.
An evidence placeholder
Use placeholders during drafting to make missing evidence visible without pretending that an artifact already exists.
Add an anonymised component audit, decision matrix or workshop output here.
Outcome
This example now covers each supported media type. Replace the generated assets and dummy claims gradually while preserving the same component structure.