diff --git a/_data/en.yml b/_data/en.yml
index 60a0649..f236e60 100644
--- a/_data/en.yml
+++ b/_data/en.yml
@@ -65,6 +65,7 @@ layouts:
   post: Article
   menu: Menu
   about: About this site
+  theme: Customize theme
 menu:
   title: Menu
 share:
diff --git a/_data/es.yml b/_data/es.yml
index 358e94b..f56b2e4 100644
--- a/_data/es.yml
+++ b/_data/es.yml
@@ -51,6 +51,7 @@ layouts:
   post: Artículo
   menu: Menú
   about: Información del sitio
+  theme: Personalizar plantilla
 menu:
   title: Menú
 share:
diff --git a/_data/layouts/theme.yml b/_data/layouts/theme.yml
new file mode 100644
index 0000000..3768ab5
--- /dev/null
+++ b/_data/layouts/theme.yml
@@ -0,0 +1,255 @@
+---
+title:
+  type: string
+  required: true
+  label:
+    en: Title
+    es: Título
+  help:
+    en: 'The name you want to give to this customization'
+    es: 'El nombre que quieras darle a esta personalización'
+font_family_sans_serif:
+  type: predefined_value
+  label:
+    en: Select a typography for the site
+    es: Selecciona una tipografía para el sitio
+  help:
+    en: 'If you want us to add support for a typography, please send us an e-mail'
+    es: 'Si quieres que agreguemos una tipografía, por favor envíanos un e-mail'
+  default:
+    en: sans-serif
+    es: sans-serif
+  values:
+    en:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
+    es:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
+headings_font_family:
+  type: predefined_value
+  label:
+    en: Select a typography for the headings
+    es: Selecciona una tipografía para los títulos del sitio
+  help:
+    en: 'If you want us to add support for a typography, please send us an e-mail'
+    es: 'Si quieres que agreguemos una tipografía, por favor envíanos un e-mail'
+  default:
+    en: sans-serif
+    es: sans-serif
+  values:
+    en:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
+    es:
+      sans-serif: 'Sans Serif'
+      Roboto: 'Roboto'
+enable_rounded:
+  type: boolean
+  label:
+    en: 'Rounded corners'
+    es: 'Esquinas redondeadas'
+  help:
+    en: 'For buttons, form inputs, etc.'
+    es: 'De los botones, campos de formularios, etc.'
+  default:
+    es: true
+    en: true
+enable_shadows:
+  type: boolean
+  label:
+    en: 'Shadows'
+    es: 'Sombras'
+  help:
+    en: 'Shadows behind elements'
+    es: 'Sombras en los elementos'
+  default:
+    es: true
+    en: true
+body_bg:
+  type: color
+  label:
+    en: 'Background color'
+    es: 'Color de fondo'
+  help:
+    en: "Site's background color"
+    es: 'Color de fondo del sitio'
+  default:
+    es: '#FFFFFF'
+    en: '#FFFFFF'
+body_color:
+  type: color
+  label:
+    en: 'Text color'
+    es: 'Color del texto'
+  help:
+    en: ''
+    es: ''
+  default:
+    es: '#212529'
+    en: '#212529'
+primary:
+  type: color
+  label:
+    en: 'Primary color'
+    es: 'Color principal'
+  help:
+    en: 'Highlights certain elements'
+    es: 'Resalta algunos elementos'
+  default:
+    es: '#007bff'
+    en: '#007bff'
+link_color:
+  type: color
+  label:
+    en: 'Link color'
+    es: 'Color de los vínculos'
+  help:
+    en: ''
+    es: ''
+  default:
+    es: '#007bff'
+    en: '#007bff'
+link_hover_color:
+  type: color
+  label:
+    en: 'Link color when selected'
+    es: 'Color de los vínculos al seleccionarlos'
+  help:
+    en: ''
+    es: ''
+  default:
+    es: '#0056b3'
+    en: '#0056b3'
+h1_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for first level headings'
+    es: 'Altura de los títulos de primer nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 2.5
+    en: 2.5
+h2_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for second level headings'
+    es: 'Altura de los títulos de segundo nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 2
+    en: 2
+h3_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for third level headings'
+    es: 'Altura de los títulos de tercer nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 1.75
+    en: 1.75
+h4_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for fourth level headings'
+    es: 'Altura de los títulos de cuarto nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 1.5
+    en: 1.5
+h5_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for fifth level headings'
+    es: 'Altura de los títulos de quinto nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 1.25
+    en: 1.25
+h6_font_size:
+  type: float
+  unit: rem
+  label:
+    en: 'Height for sixth level headings'
+    es: 'Altura de los títulos de sexto nivel'
+  help:
+    en: 'Proportional to font base height.  For instance, 2 is double height.'
+    es: 'En proporción al alto base de la tipografía.  Por ejemplo 2 es el doble.'
+  default:
+    es: 1
+    en: 1
+mark_bg:
+  type: color
+  label:
+    en: 'Highlight color'
+    es: 'Color de resaltado'
+  help:
+    en: 'Default color for highlighted text'
+    es: 'Color por defecto para el texto resaltado'
+  default:
+    es: '#fcf8e3'
+    en: '#fcf8e3'
+navbar_light_color:
+  type: color
+  label:
+    en: 'Navigation bar item color'
+    es: 'Color de ítem en la barra de navegación'
+  help:
+    en: 'Text and icons'
+    es: 'Texto e íconos'
+  default:
+    es: '#ced4da'
+    en: '#ced4da'
+navbar_light_hover_color:
+  type: color
+  label:
+    en: 'Navigation bar item color when selected'
+    es: 'Color de ítem seleccionado en la barra de navegación'
+  help:
+    en: 'Text and icons'
+    es: 'Texto e íconos'
+  default:
+    es: '#6c757d'
+    en: '#6c757d'
+navbar_light_active_color:
+  type: color
+  label:
+    en: 'Navigation bar item color when active'
+    es: 'Color de ítem activo en la barra de navegación'
+  help:
+    en: 'Text and icons'
+    es: 'Texto e íconos'
+  default:
+    es: '#212529'
+    en: '#212529'
+order:
+  type: order
+  label:
+    en: Order
+    es: Orden
+  help:
+    en: Position in articles list
+    es: La posición del artículo en la lista de artículos
+draft:
+  type: boolean
+  label:
+    en: Draft
+    es: Borrador
+  help:
+    en: This post isn't ready to be published yet
+    es: Este artículo aun no está listo para publicar
diff --git a/_sass/fonts.scss b/_sass/fonts.scss
index e69de29..21aa3b5 100644
--- a/_sass/fonts.scss
+++ b/_sass/fonts.scss
@@ -0,0 +1,29 @@
+// https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700&display=swap
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOkCnqEu92Fr1Mu52xP-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOjCnqEu92Fr1Mu51TzBhc9-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOmCnqEu92Fr1Me5Q-subset.woff2) format('woff2');
+}
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(../fonts/roboto/v27/KFOlCnqEu92Fr1MmWUlvAw-subset.woff2) format('woff2');
+}
diff --git a/assets/css/styles.scss b/assets/css/styles.scss
index a03496c..406eb99 100644
--- a/assets/css/styles.scss
+++ b/assets/css/styles.scss
@@ -6,11 +6,41 @@
 /// @group Principal
 ////
 
-/// Traemos el primer artículo de tipo `about` para obtener los valores
+/// Traemos el primer artículo de tipo `theme` para obtener los valores
 /// personalizados.
-///
-/// @todo Mover a su propio SCSS
-{% assign about = site.posts | find: 'layout', 'about' %}
+
+{% comment %}
+  Los artículos con layout `theme` contienen variables utilizadas por
+  Bootstrap que pueden ser redefinidas por les usuaries de Sutty a través
+  del panel.
+{% endcomment %}
+{% assign theme = site.posts | find: 'layout', 'theme' %}
+{% assign theme_defaults = site.data.layouts.theme %}
+{% comment %}
+  Ignorar estos campos que no son variables.
+{% endcomment %}
+{% assign ignored_keys = 'title,draft,order,last_modified_at,uuid,layout,liquid,usuaries' | split: ',' %}
+{% comment %}
+  Cada variable de Bootstrap viene desde la definición de `theme`.  Por
+  convención usamos snake_case, pero Bootstrap usa guión medio, así que
+  las convertimos.
+
+  Utilizamos los valores que vengan del artículo y si no existen, usamos
+  los valores por defecto de sutty-base.  De lo contrario mantenemos los
+  de Bootstrap.
+{% endcomment %}
+{% for variable in theme_defaults %}
+{% assign key = variable[0] %}
+{% if ignored_keys contains key %}{% continue %}{% endif %}
+{% assign default_value = variable[1].default[site.locale] %}
+{% assign variable_name = key | replace: '_', '-' %}
+{% if theme[key] or default_value %}
+{% comment %}
+  Generamos una definición de variable de SASS
+{% endcomment %}
+${{ variable_name }}: {{ theme[key] | default: default_value }}{{ variable[1].unit }};
+{% endif %}
+{% endfor %}
 
 /// El modo debug se desactiva en producción
 $debug: {{ jekyll.environment | not: 'production' }};
@@ -22,21 +52,6 @@ $vendor-prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
 /// para generar animaciones.
 $bezier: cubic-bezier(0.75, 0, 0.25, 1);
 
-/// Redefinir la tipografía aquí, o borrar si usamos las de Bootstrap
-$font-family-sans-serif: sans-serif;
-/// El color primario de la paleta, se trae desde el `about` o sea usa
-/// el color por defecto.
-///
-/// @link _data/layouts/about.yml
-$primary: {{ about.primary | default: site.data.layouts.about.primary.default[site.locale] }};
-
-/// El color secundario de la paleta, se trae desde el `about` o sea usa
-/// el color por defecto.
-///
-/// @link _data/layouts/about.yml
-$secondary: {{ about.secondary | default: site.data.layouts.about.secondary.default[site.locale] }};
-
-
 /// Agregamos los colores propios de la plantilla aquí.  Bootstrap los
 /// agrega a su propia paleta de colores.  Si usamos el mismo nombre
 /// podemos redefinir el color.
diff --git a/assets/fonts/roboto/v27/KFOjCnqEu92Fr1Mu51TzBhc9-subset.woff2 b/assets/fonts/roboto/v27/KFOjCnqEu92Fr1Mu51TzBhc9-subset.woff2
new file mode 100644
index 0000000..72f9cbf
Binary files /dev/null and b/assets/fonts/roboto/v27/KFOjCnqEu92Fr1Mu51TzBhc9-subset.woff2 differ
diff --git a/assets/fonts/roboto/v27/KFOkCnqEu92Fr1MmgWxP-subset.woff2 b/assets/fonts/roboto/v27/KFOkCnqEu92Fr1MmgWxP-subset.woff2
new file mode 100644
index 0000000..bddfb4e
Binary files /dev/null and b/assets/fonts/roboto/v27/KFOkCnqEu92Fr1MmgWxP-subset.woff2 differ
diff --git a/assets/fonts/roboto/v27/KFOkCnqEu92Fr1Mu52xP-subset.woff2 b/assets/fonts/roboto/v27/KFOkCnqEu92Fr1Mu52xP-subset.woff2
new file mode 100644
index 0000000..f630b95
Binary files /dev/null and b/assets/fonts/roboto/v27/KFOkCnqEu92Fr1Mu52xP-subset.woff2 differ
diff --git a/assets/fonts/roboto/v27/KFOlCnqEu92Fr1MmWUlvAw-subset.woff2 b/assets/fonts/roboto/v27/KFOlCnqEu92Fr1MmWUlvAw-subset.woff2
new file mode 100644
index 0000000..3ac3e9c
Binary files /dev/null and b/assets/fonts/roboto/v27/KFOlCnqEu92Fr1MmWUlvAw-subset.woff2 differ
diff --git a/assets/fonts/roboto/v27/KFOmCnqEu92Fr1Me5Q-subset.woff2 b/assets/fonts/roboto/v27/KFOmCnqEu92Fr1Me5Q-subset.woff2
new file mode 100644
index 0000000..4b12e9d
Binary files /dev/null and b/assets/fonts/roboto/v27/KFOmCnqEu92Fr1Me5Q-subset.woff2 differ