try a lightning:input type="checkbox" instead.It works the way you want
<lightning:input type="checkbox" label="Red" name="red" checked="true"/>
I read in the sprint 2017 release notes that lightning design system classes are going to come kind of embedded with base lightning components, so what they are referring in LDS could be that all these things are possible with lightning:input tags.
It's a recommendation from salesforce to use base Lightning namespaced components over the Ui ones whenever you find one in both namespaces
Base Lightning components are the building blocks that make up the
modern Lightning Experience, Salesforce1, and Lightning Communities
user interfaces. Base Lightning components incorporate Lightning
Design System markup and classes, providing improved performance and
accessibility with a minimum footprint.
These base components handle the details of HTML and CSS for you. Each
component provides simple attributes that enable variations in style.
This means that you typically don’t need to use CSS at all. The
simplicity of the base Lightning component attributes and their clean
and consistent definitions make them easy to use, enabling you to
focus on your business logic.
You can find base Lightning components in the lightning namespace to
complement the existing ui namespace components. In instances where
there are matching ui and lightning namespace components, we recommend
that you use the lightning namespace component. The lightning
namespace components are optimized for common use cases. Beyond being
equipped with the Lightning Design System styling, they handle
accessibility, real-time interaction, and enhanced error messages.