LibRext (Librarium Textuum / Library of Frameworks) is a UI design system and component library developed by the Guild of St. Isidore (TO).
LibRext is inspired primarily by printed texts during the era of the Incunabula, the first century after Gutenberg's press changed Europe and the world. This was a time when old manuscript production methods were giving way to the next phase of bookmaking. New processes were explored, but printmakers were not far from the era of scribes writing huge manuscripts.
Code repository and design docs available on GitHub
Docs for specific functions or codebase features can be found here.
As a design system, LibRext aims to look consistent on Print, E-Reader, and Screen. This can present a challenge, since these media have some key differences:
LibRext has a heavy focus on old-style serif fonts, as it looks to early Renaissance printed works as inspiration. The design system’s text styles are organized by "Font Roles" and "Document Roles”
Font Roles are functional roles that can be shared by multiple elements.
Document Roles correspond to common document styles and HTML/Markdown structure
All human beings are born free and equal in dignity and rights. They are endowed with reason and conscience and should act towards one another in a spirit of brotherhood.
Everyone is entitled to all the rights and freedoms set forth in this Declaration, without distinction of any kind, such as race, colour, sex, language, religion, political or other opinion, national or social origin, property, birth or other status. Furthermore, no distinction shall be made on the basis of the political, jurisdictional or international status of the country or territory to which a person belongs, whether it be independent, trust, non-self-governing or under any other limitation of sovereignty.
Everyone has the right to life, liberty and security of person.
No one shall be held in slavery or servitude; slavery and the slave trade shall be prohibited in all their forms.
No one shall be subjected to torture or to cruel, inhuman or degrading treatment or punishment.
Everyone has the right to recognition everywhere as a person before the law.
Ps 20:2-3
In virtúte tua, Dómine, lætábitur iustus: et super salutáre tuum exsultábit veheménter: desidérium ánimæ eius tribuísti ei.
Ps 20:4
Quóniam prævenísti eum in benedictiónibus dulcédinis: posuísti in cápite eius corónam de lápide pretióso.
℣. Glória Patri, et Fílio, et Spirítui Sancto.
℟. Sicut erat in princípio, et nunc, et semper, et in sǽcula sæculórum. Amen.
In virtúte tua, Dómine, lætábitur iustus: et super salutáre tuum exsultábit veheménter: desidérium ánimæ eius tribuísti ei.
Orémus.
Deus, qui beátum Nicoláum Pontíficem innúmeris decorásti miráculis: tríbue, quǽsumus; ut eius méritis et précibus a gehénnæ incéndiis liberémur.
Per Dóminum nostrum Iesum Christum, Fílium tuum: qui tecum vivit et regnat in unitáte Spíritus Sancti Deus, per ómnia sǽcula sæculórum.
℟. Amen.
As a classicist design system, LibRext looks to old-school naturalistic hues for inspiration. The palettes were chosen to approximate colours that could’ve been available to scribes and publishers in previous centuries. And of course, adjusted a bit towards modern tech and tastes. For example, some colour selections have come from scans of texts, atlases and astronomical prints. The design system’s colour styles are organized by “Colour Role”, “Indicators”, and “Mode”
Colour Roles include functions like like background, text, rubric, primary, secondary, etc.
Indicators are colours that indicate status such as: ok, warn, error, info, null
Mode refers to light (default) or dark.
See Colour Specimens
As for shapes, LibRext deals only with boxes. There are several options available for border radius, box shadow, widget heights, and card styles
See Shapes Specimens
A larger radius fits with larger boxes
Larger sizes imply more distance between box layer and parent layer