diff --git a/app/assets/images/barcelona/heading-icon.svg b/app/assets/images/barcelona/heading-icon.svg
new file mode 100644
index 0000000000..58ea3cab26
--- /dev/null
+++ b/app/assets/images/barcelona/heading-icon.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/assets/images/barcelona/logo.svg b/app/assets/images/barcelona/logo.svg
new file mode 100644
index 0000000000..a3b8a5f7b9
--- /dev/null
+++ b/app/assets/images/barcelona/logo.svg
@@ -0,0 +1,70 @@
+
+
+
diff --git a/app/assets/images/barcelona/pattern-big.svg b/app/assets/images/barcelona/pattern-big.svg
new file mode 100644
index 0000000000..aa142f9b22
--- /dev/null
+++ b/app/assets/images/barcelona/pattern-big.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/app/assets/images/barcelona/pattern.svg b/app/assets/images/barcelona/pattern.svg
new file mode 100644
index 0000000000..bf560e571a
--- /dev/null
+++ b/app/assets/images/barcelona/pattern.svg
@@ -0,0 +1,19 @@
+
+
+
diff --git a/app/assets/stylesheets/_barcelona.scss b/app/assets/stylesheets/_barcelona.scss
new file mode 100644
index 0000000000..6c83914624
--- /dev/null
+++ b/app/assets/stylesheets/_barcelona.scss
@@ -0,0 +1,54 @@
+//Section heading
+.section-heading.section-heading:before{
+ //double selector to increase specificity
+ background: image-url("barcelona/heading-icon.svg") no-repeat center;
+ width: .9rem;
+ height: .9rem;
+ margin-right: .3rem;
+ margin-bottom: -.11rem;
+}
+
+//Process cards - home and processes
+.card--full__image{
+ &:after{
+ content: "";
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: image-url("barcelona/pattern-big.svg") no-repeat left top;
+ z-index: 0;
+ background-size: 32px;
+ @include breakpoint(medium){
+ background-size: 90px;
+ }
+ @include breakpoint(mediumlarge){
+ background-size: 160px;
+ }
+ @include breakpoint(large){
+ background-size: 120px;
+ }
+ }
+}
+
+.card--process .card__image-top{
+ position: relative;
+ &:after{
+ content: "";
+ display: block;
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ top: 0;
+ left: 0;
+ background: image-url("barcelona/pattern.svg") no-repeat left bottom;
+ z-index: 0;
+ background-size: 40px;
+ }
+}
+
+.card--process.card--mini .card__image-top:after{
+ background-size: 32px;
+}
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css
index 3bfc4feb2a..f16da05bbc 100644
--- a/app/assets/stylesheets/application.css
+++ b/app/assets/stylesheets/application.css
@@ -11,6 +11,5 @@
* It is generally better to create a new file per style scope.
*
*= require decidim
- *= require_tree .
*= require_self
*/
diff --git a/app/assets/stylesheets/decidim.scss b/app/assets/stylesheets/decidim.scss
index c258db019a..32dd03b96a 100644
--- a/app/assets/stylesheets/decidim.scss
+++ b/app/assets/stylesheets/decidim.scss
@@ -22,3 +22,4 @@
// $border: 1px solid $medium-gray;
@import "decidim/application";
+@import "barcelona";
diff --git a/app/views/layouts/decidim/_logo.html.erb b/app/views/layouts/decidim/_logo.html.erb
new file mode 100644
index 0000000000..f8046be563
--- /dev/null
+++ b/app/views/layouts/decidim/_logo.html.erb
@@ -0,0 +1,3 @@
+<%= link_to root_path do %>
+ <%= image_tag "barcelona/logo.svg", width: "140" %>
+<% end %>