The Challenge
Doctype, a design resource led by Andrew Korf, needed a way to standardize design patterns across multiple documentation pages and projects. The existing workflow involved copying and pasting HTML snippets, which led to design inconsistency and maintenance nightmares.
Whenever a button style changed, it had to be updated manually across dozens of pages. They needed a Single Source of Truth—a robust UI library that functioned like a modern JavaScript framework (like React components) but ran entirely on the lightweight Jekyll engine.
The Process
We utilized Jekyll's native capabilities to engineer a "smart" component library, treating Liquid templates as functional UI components.
Atomic Design with Liquid
We moved away from monolithic page templates and adopted an Atomic Design methodology.
- Smart Includes: We developed a library of parameterized Liquid includes (e.g.,
{% include button.html type="primary" link="..." %}). This allows content creators to insert complex UI elements with simple, readable code. - Prop-Like Controls: We engineered the components to accept variables (props) for color, size, and state, giving the design team flexibility without touching the core CSS.
A Pure Jekyll Library
Instead of relying on heavy client-side scripts, we packaged the system as a Jekyll Theme/Gem.
- Modular Architecture: We structured the SCSS and HTML so that the entire design system could be imported into any new Jekyll project as a library.
- Automated Documentation: We built a "Style Guide" section that automatically renders every component in the library, ensuring the documentation never falls out of sync with the code.
The Outcome
Doctype now operates on a scalable, code-efficient foundation.
- Development Speed: Creating new pages is 3x faster as developers simply assemble pre-built components rather than writing HTML from scratch.
- Brand Consistency: Updates to the core library (e.g., changing a font size) instantly propagate across the entire site during the build process.
- Zero Bloat: By using native Jekyll features instead of adding JavaScript frameworks, the site maintains a perfect 100 Performance score on Lighthouse.