TypeGrid
0.2
A starting point for your design system.Seeks to harmonize systems for designers and developers across print and digital media.
The world has lots of design system and CSS frameworks. TypeGrid is unique in two main ways:
- One system works across interactive and print media
- It's composable: use just the parts you want
This started as a sort of a personal reference guide that I could use across multiple projects.
This is intended to be as much an educational resource about design as it is a reusable system itself.
The System
Visual rhythm for your designs.
Type
Type scale, type utils
Grid
Columns, vertical spacing, spacing utils
Token
Columns, vertical spacing, spacing utils
Component
Columns, vertical spacing, spacing utils
Use it yourself
Open source: use it as you please
Design
Simply use this system as inspiration or a reference. Or grab the Figma file as a starting point for your design system.
Code
Check out the code for inspiration, download the CSS, or grab the full package from GitHub and include in your projects.
As a bonus, this entire site is built with regular HTML and CSS, using Grunt as an optional Sass and Bake processor. Use it to create your own simple website!
Looking for a CMS? Check out the sister project: StartupBase, which uses all of the TypeGrid package in a ready-to-use WordPress theme.