Styleguide
Internal reference
Visual styleguide
This page is intentionally not in the main navbar. Use it while refining the website.
Identity and naming
The system uses names that describe purpose rather than template jargon:
sergio-*identifies shared and professional components.foundation-*identifies the editorial layer of La Tercera Fundación.introis the opening composition of a page.paper,ink,brand, andsection-accentdescribe colour roles.
Colour tokens
Paper cream #F7F3E9
Paper white #FFFCF5
Ink #10141B
Sergio teal #08777C
Foundation magenta #DD074D
Typography
Newsreader for academic, editorial titles
Manrope carries navigation, interfaces, metadata, and professional body text. Newsreader gives titles and long-form writing an academic but personal voice. Fira Code is reserved for source code and technical values.
Introductory block
Example
A clean academic web identity
A reusable introductory block for landing pages, talks, and major sections.
Cards
Research card
Scientific work, projects, and publications.
Talks card
Presentations and embedded slide decks.
Blog card
La Tercera Fundación content.
Notes and metrics
A normal note block.
An accent note block.
0.222° RMSE
40 min test duration
5° safety threshold
60 V DC supply