ka thumbs

at khan academy, we worked aggressively to find ways to make design systems work for variable content but also in a way that let us automate the production of assets for the website while also testing our understanding of the system's limitations.

Built in 2015 using React 0.13.3 and Caman, here i developed a thumbnail style guide including an inline tool for parameterizing values and showing dynamic image overlays using caman, an image manupulation library, along with other ka style values. The approach taken to modifying the poster frames was chosen to be easily reproduced using standard image libraries on the backend and the repository includes a small python script for extracting keyframes from a video to bootstrap prototyping.

See the interactive styleguide on github pages or its source, also on github