Coded Styleguides

Create scalable UI kits, style guides, and design systems

Our robust set of visual and digital tools will provide a backbone to your product design and keep everything organized. We’ll work with you to develop a modular framework based on Atomic Design principles, handing off an interactive and maintainable UI kit to keep your developers and designers synced up long after your initial engagement with us is over.

We can also work directly with your product team to solve complex design challenges, like developing accessible and performant front-end code (HTML, CSS and JavaScript), responsive layouts, data visualization, and more. We call this framework CorkScrew.

Our Approach

In order to define the right system, we’ll need to fully map the content, features, functionality, and user needs of your site or application. We’ll undertake an initial content and data strategy phase, resulting in a comprehensive inventory and set of recommendations.

Once the content needs and modules are identified, we map out detailed user journeys. After these journey maps are complete, we design the components (atoms), modules (groups of atoms, or molecules), and layouts (groups of molecules and organisms), which form your product’s templates (a single or group of organisms).

Atomic Design Process

Every project we undertake contains an atomic style guide as a deliverable. The style guide encompasses all elements—from buttons to fully built out templates (and everything in between). This provides our partners with not only the templates for the current design initiative, but also a functional roadmap to create future products.

Atomic Design in Action

Our most recent example of an Atomic Design project is the Titleist.com site redesign:

The Titleist site redesign Atomic Design Style Guide, built on our open-source platform, Corkscrew, a standardized core library of components.

Atomic Design Atoms

The Forms section displays basic atomic components, text field, text area, select menu, etc.

Atomic Design Form Elements

Here we bring atoms together to form an inline form, or a molecule, as part of a page made up of other molecules and organisms.

Atomic Design Grouping

Lower on “Find a Golf Shop” page, we see content modules flowing in to form other groupings, or organisms.

Atomic modules and components

Ready to start a conversation?

Get in touch