a flexible framework to create a minimal and adaptable UI
inputs, outputs and links
A web document is like a function, with inputs and outputs.
The client can get information via the outputs, which is the information displayed on the page.
Users can interact with the page through the inputs, which are all the interactive elements, for example form controls like buttons, text inputs, and sliders.
Another category is represented by links, which are pointers to other documents that provide other functionalities.
Straight lines do not exist. Geodetics are curves.
So the rules in this document should be adapted case by case. Creating a web document is a creative process. The recommendation is not to just grab the whole CSS implementation "as is" but to copy only the things that make sense and optionally modify them according to the specific web page or project.
Prefer using HTML tags with no classes, and take into consideration the semantic meaning of each tag.
Every HTML tag that can be emitted by a Markdown parser (compatible with the CommonMark Spec) should be styled to provide a good design out of the box.
Use sizes based on the Golden Section. Phi is 1.618,
so for example:
line-height is PhiPrefer using System Fonts, with the following typefaces:
Optionally use two sans serif font families to differentiate between content and form elements.
Define the smallest possible unit, for instance --size-1: 2px,
to be used to draw lines like a border width. The second unit will be double
the first unit. All other units are the sum of the two previous ones,
following the Fibonacci Sequence.
Define an accent color; it can be the brand color or even black. It will be used to drive attention and create highlights, for example on a focused element.
Create paper and ink color shades, which are background and text colors, respectively.
Color shades provide elevation. For example, a form can have a paper color that is not the same as the page body. A form input should have a lighter color, and a button should have a darker color. Inputs should look behind their form. Buttons should look a bit elevated to make them look clickable.
A color can be associated with an intentetion, for example a common choice is to use red for danger. In this case keep prefer to keep consistency, otherwise feel free to use a full spectrum color palette where it makes sense.