Typesettings.css
Typesettings.css is a lite design system for minimal website or article design, inspired by traditional graphic design fundamentals. Currently powering Mike Mai's blog.
Install / Use
/learn @mikemai2awesome/Typesettings.cssREADME
Typesettings.css
Typesettings.css is a lite design system for minimal website or article design, inspired by traditional graphic design fundamentals. No colors; no Javascript; no classes required! In version 2.x, the typography scales bigger, the design goes bolder, & contrast gets stronger.
Basic Usage
1. Include typesettings.css in the HTML file's <head> section:
<head>
<link rel="stylesheet" href="[path]/typesettings.css">
</head>
Note: If you are using typesettings.css as is, don't combine it with other frameworks. Also, basic resets are included, there is no need to use Normalize.css or Sanitize.css.
2. Add data-typesettings attribute to the direct child element of the <body>:
<body>
<div data-typesettings>
…
</div>
</body>
👉 Read full documentation
Enhanced elements
All of these HTML elements can be used inside the div[data-typesettings] element without any classes. It's that easy!
- p
- dl
- ol
- ul
- nav
- aside
- footer
- header
- section
- h1 ~ h6
- blockquote
- fieldset
- details
- button
- figure
- input
- label
- small
- table
- abbr
- code
- form
- kbd
- pre
- hr
Browser Support
This framework is built for all browsers but IE, cuz fuck it.
Language Support
All languages. Also accommodates right to left and vertical reading mode.
Related Skills
clearshot
Structured screenshot analysis for UI implementation and critique. Analyzes every UI screenshot with a 5×5 spatial grid, full element inventory, and design system extraction — facts and taste together, every time. Escalates to full implementation blueprint when building. Trigger on any digital interface image file (png, jpg, gif, webp — websites, apps, dashboards, mockups, wireframes) or commands like 'analyse this screenshot,' 'rebuild this,' 'match this design,' 'clone this.' Skip for non-UI images (photos, memes, charts) unless the user explicitly wants to build a UI from them. Does NOT trigger on HTML source code, CSS, SVGs, or any code pasted as text.
openpencil
2.0kThe world's first open-source AI-native vector design tool and the first to feature concurrent Agent Teams. Design-as-Code. Turn prompts into UI directly on the live canvas. A modern alternative to Pencil.
HappyColorBlend
HappyColorBlendVibe Project Guidelines Project Overview HappyColorBlendVibe is a Figma plugin for color palette generation with advanced tint/shade blending capabilities. It allows designers to
Flyaro-waffle-app
Waffle Delight - Full Stack MERN Application Rules & Documentation Project Overview A comprehensive waffle delivery application built with MERN stack featuring premium UI/UX, admin management, a
