Work in progress
This is an active rebuild of a design system designed to work better for both people and AI-assisted workflows. I’m exploring how structured guidance, reusable patterns, and accessible foundations can make design decisions easier to find, understand, and apply consistently.
Rather than treating the system as a library of components alone, the work connects principles, documentation, interaction guidance, and governance into a clearer source of truth. The goal is to support thoughtful product work today while creating the structure needed for more reliable AI-assisted use tomorrow.
This case study is still a work in progress. I’ll share the evolving approach, decisions, prototypes, and outcomes as the system develops.
tsx
function WorkInProgressBadge() {
return (
<section
style={{
display: "flex",
gap: "16px",
alignItems: "flex-start",
padding: "20px",
border: "1px solid rgba(234, 198, 0, 0.45)",
borderLeft: "4px solid #eac600",
borderRadius: "10px",
background: "linear-gradient(135deg, #14284a 0%, #10213e 100%)",
color: "#f8fafc",
fontFamily: "inherit",
}}
>
<span
aria-hidden="true"
style={{
display: "grid",
placeItems: "center",
width: "32px",
height: "32px",
flex: "0 0 auto",
borderRadius: "50%",
background: "#eac600",
color: "#10213e",
fontSize: "18px",
fontWeight: 800,
}}
>
↗
</span>
<div>
<p
style={{
margin: "0 0 8px",
color: "#eac600",
fontSize: "12px",
fontWeight: 800,
letterSpacing: "0.1em",
textTransform: "uppercase",
}}
>
Work in progress
</p>
<p
style={{
margin: 0,
maxWidth: "620px",
fontSize: "18px",
lineHeight: 1.45,
fontWeight: 650,
}}
>
This case study is evolving alongside the system. I’ll share the
process, decisions, and outcomes as the work matures.
</p>
</div>
</section>
);
}
render(<WorkInProgressBadge />);