Welcome to the Design System of my personal website. This page documents the visual language, components, and styles used throughout the site.
Brand
The brand identity is built on precision, structure, and the “unit” — the smallest possible building block of data.
Logo & Symbol
Symbol
The mark is a solid blue square, the unit.
“Building intelligence from the minimum unit of data.”
Concept
Every system, no matter how complex, begins with a single unit. In data engineering, that unit is the cell: a discrete, bounded, unambiguous value. The square is its visual equivalent, the simplest closed form in geometry, defined entirely by structure and repetition.
A circle suggests continuity and flow, but a square has edges. Edges mean decisions. Edges mean precision. That is what data work actually is: not approximation, but clear boundaries between states.
Systemic Coherence
The symbol is not just a logo. The same shape appears at the end of every article on this site as a small inline marker, the {{< end >}} shortcode. This creates a visual thread: the same primitive that signs off a paragraph also signs off the entire identity. The smallest element and the largest are made of the same material.
| Context | Implementation |
|---|---|
| Nav header | Inline SVG rect, 1.2rem wide |
| Footer | Inline span unit, 10px |
| Inline end marker | {{< end >}} shortcode, 10px |
Visual Identity
Light background#007bff on #ffffff
Dark background#007bff on #212529
Light Wordmark — dark text on white
Dark Wordmark — light text on #212529
Colors
The color palette is designed for high contrast and readability, with a primary blue accent.
Primary
#007bff
Black
#212529
Muted
#666
Light
#f8f9fa
Danger
#dc3545
Accessibility Note: Color Contrast
The primary brand color #007bff (Primary Blue) has a contrast ratio of 3.62:1 on light gray backgrounds (#f4f4f4) and 4.54:1 on white.
To comply with WCAG 2.1 AA standards without changing the brand color, we use the “Large Text” provision:
- Text that is at least 18.6px (1.16rem) and bold, or 24px (1.5rem) and normal, only requires a 3:1 contrast ratio.
- Our project links on gray backgrounds are set to 1.17rem bold (18.7px) to meet this requirement while staying close to the original design.
Typography
The site uses a clean sans-serif font stack for readability.
Headings
Headings use a semi-bold weight and have a subtle bottom border to separate sections.
Heading 1 – Page Title
Heading 2 – Section Header
Heading 3 – Sub-section Header
Heading 4 – Minor Header
Code
The site uses Chroma with a Light Theme (GitHub) for syntax highlighting.
Inline code snippets look like this, and code blocks look like this:
/* Color variables */
$black: #212529;
$primary: #007bff;
$danger: #dc3545;
Components
The website is built using a combination of Shortcodes (used in markdown content) and Partials (global layout elements).
Interactive Components
Buttons
Buttons come in different variants and sizes.
Default Button Primary Button Info Button
Alerts
Alerts are used for providing contextual feedback.
Tables
Tables are styled with simple borders and background highlights for headers.
| Header A | Header B | Header C |
|---|---|---|
| Value 1 | Value 2 | Value 3 |
| Value 4 | Value 5 | Value 6 |
Blockquotes
Blockquotes are used to highlight quotes and important snippets.
“Gaze ye upon my spaghetti, and despair.” — The CSS Source Code
Shortcodes
Notice (notice)
Used to highlight important information, tips, or warnings.
Types and Icons
| Type | Icon | Shortcode Example |
|---|---|---|
danger | Red Triangle | {{< notice type="danger" >}} |
warning | Yellow Square | {{< notice type="warning" >}} |
tip | Green Tip | {{< notice type="tip" >}} |
info | Blue Circle | {{< notice type="info" >}} |
Examples
Critical Warning
Critical Warning
Normal Alert
Normal Alert
Informational
Information
Image (img)
The img shortcode provides a consistent container for images, handling responsiveness and captions.
Example:
Map (map)
Embeds a responsive OpenStreetMap centered on specific coordinates.
Example:
End (end)
Inserts the “unit” symbol to signal the conclusion of a thought or article.
Example: The square is the unit.
Hero (hero)
A hero section introducing the author, optimized for clarity and professional aesthetics.
Example: Welcome! I'm Daniel, a student of Data Engineering
at the University of Zaragoza. I love exploring computation, design, and the science
behind solving real-world problems.
Connecting people through data. Clarity. Logic. Precision.
CTA (cta)
A call-to-action component to encourage users to view the CV.
Example:
Footnote (fn)
A professional footnote system with inline symbols and a grouped section at the bottom of the article.
Usage:
Place your note anywhere in the text:
This is a statement{{< fn symbol="◊" >}}This is the note content.{{< /fn >}}
Features:
- Inline superscript symbols (◊, †, ‡).
- Grouped notes in a grey breakout box at the bottom.
Global Components (Partials)
Navigation (nav)
The navigation bar provides the primary branding and site-wide links. It follows a clean, minimalist aesthetic.
Footer (footer)
The footer serves as the persistent base of every page, providing legal links, the design system link, and system metadata.
The Philosophical Clock: Displays UTC time. Living in Spain, this creates a deliberate temporal displacement: it represents a perpetual past. It serves as a reminder that the past is not a static memory, but a moving front—constantly advancing, always present.
Language Switcher (lang-switcher)
Enables seamless transitions between English and Spanish versions of the same content. It identifies related pages using a translationkey parameter in the frontmatter.
Structural Elements
Grid System
The main grid system uses a two-column layout (4fr 2fr) for content and sidebars.
Structural Accents
The site uses $primary blue to highlight specific structural elements such as section dividers, accents, and links.