decidim-design 0.28.0.rc4

data/app/views/decidim/design/components/forms.html.erb

@@ -0,0 +1,235 @@
+<% content_for :heading do %>
+  <%= cell "decidim/announcement", "This page comes from a legacy view. Content is outdated.", callout_class: "alert" %>
+  Forms
+<% end %>
+
+<% content_for :toc do %>
+  <a href="#common">HTML regular inputs</a>
+  <a href="#helps">Help texts</a>
+  <a href="#disabled">Disabled</a>
+  <a href="#error">Errors</a>
+  <a href="#length">Min/Max length</a>
+  <a href="#emoji">Emojis</a>
+<% end %>
+
+<%
+  text_types = [
+                "date",
+                # "datetime-local",
+                # "email",
+                # "month",
+                "number",
+                "password",
+                # "search",
+                # "tel",
+                "text"
+                # "time",
+                # "url",
+                # "week"
+              ]
+
+  options_types = %w(checkbox radio)
+%>
+
+<section id="common-panel" class="design__section">
+  <h2 class="h2">HTML regular inputs</h2>
+
+  <div class="form__wrapper">
+    <%= cell "decidim/announcement", "Only displays common types, full available list: date, datetime-local, email, month, number, password, search, tel, text, time, url, week" %>
+
+    <% text_types.each do |element| %>
+      <label>
+        input type="<%= element %>"
+        <input type="<%= element %>">
+      </label>
+    <% end %>
+
+    <% options_types.each do |element| %>
+      <fieldset>
+        <legend>fieldset [legend]</legend>
+
+        <% 3.times do |i| %>
+          <label class="form__wrapper-checkbox-label">
+            <input type="<%= element %>">
+            input type="<%= element %>"
+          </label>
+        <% end %>
+      </fieldset>
+    <% end %>
+
+    <label>
+      textarea
+      <textarea cols="30" rows="10"></textarea>
+    </label>
+
+    <label>
+      select
+      <select>
+        <% 3.times do |i| %>
+          <option value="<%= i %>">option <%= i %></option>
+        <% end %>
+      </select>
+    </label>
+  </div>
+</section>
+
+<section id="helps" class="design__section">
+  <h2 class="h2">Help texts</h2>
+
+  <div class="form__wrapper">
+    <% text_types.each do |element| %>
+      <label>
+        input type="<%= element %>"
+        <span class="help-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto!</span>
+        <input type="<%= element %>">
+      </label>
+    <% end %>
+
+    <% options_types.each do |element| %>
+      <fieldset>
+        <legend>fieldset [legend]</legend>
+        <span class="help-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto!</span>
+
+        <% 3.times do |i| %>
+          <label class="form__wrapper-checkbox-label">
+            <input type="<%= element %>">
+            input type="<%= element %>"
+          </label>
+        <% end %>
+      </fieldset>
+    <% end %>
+
+    <label>
+      textarea
+      <span class="help-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto!</span>
+      <textarea cols="30" rows="10"></textarea>
+    </label>
+
+    <label>
+      select
+      <span class="help-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Dignissimos hic quos omnis vero aspernatur architecto!</span>
+      <select>
+        <% 3.times do |i| %>
+          <option value="<%= i %>">option <%= i %></option>
+        <% end %>
+      </select>
+    </label>
+  </div>
+</section>
+
+<section id="disabled" class="design__section">
+  <h2 class="h2">Disabled</h2>
+
+  <div class="form__wrapper">
+    <% text_types.each do |element| %>
+      <label>
+        input type="<%= element %>" disabled
+        <input type="<%= element %>" disabled>
+      </label>
+    <% end %>
+
+    <% options_types.each do |element| %>
+      <fieldset>
+        <legend>fieldset [legend]</legend>
+
+        <% 3.times do |i| %>
+          <label class="form__wrapper-checkbox-label">
+            <input type="<%= element %>" disabled>
+            input type="<%= element %>" disabled
+          </label>
+        <% end %>
+      </fieldset>
+    <% end %>
+
+    <label>
+      textarea disabled
+      <textarea cols="30" rows="10" disabled></textarea>
+    </label>
+
+    <label>
+      select disabled
+      <select disabled>
+        <% 3.times do |i| %>
+          <option value="<%= i %>">option <%= i %></option>
+        <% end %>
+      </select>
+    </label>
+  </div>
+</section>
+
+<section id="error" class="design__section">
+  <h2 class="h2">Errors</h2>
+
+  <div class="form__wrapper">
+    <%= cell "decidim/announcement", "Does not apply for select" %>
+
+    <% text_types.each do |element| %>
+      <label>
+        input type="<%= element %>" required
+        <input type="<%= element %>" required>
+        <div class="form-error">Lorem ipsum dolor sit amet.</div>
+      </label>
+    <% end %>
+
+    <% options_types.each do |element| %>
+      <fieldset>
+        <legend>fieldset [legend]</legend>
+        <div class="form-error">Lorem ipsum dolor sit amet.</div>
+
+        <% 3.times do |i| %>
+          <label class="form__wrapper-checkbox-label">
+            <input type="<%= element %>">
+            input type="<%= element %>"
+          </label>
+        <% end %>
+      </fieldset>
+    <% end %>
+
+    <label>
+      textarea required
+      <textarea cols="30" rows="10" required></textarea>
+      <div class="form-error">Lorem ipsum dolor sit amet.</div>
+    </label>
+  </div>
+</section>
+
+<section id="length" class="design__section">
+  <h2 class="h2">Min/Max length</h2>
+
+  <div class="form__wrapper">
+    <%= cell "decidim/announcement", "Only works for input type='text' and textarea" %>
+
+    <label>
+      input type="text" maxlength="20"
+      <input type="text" maxlength="20">
+    </label>
+
+    <label>
+      textarea maxlength="20"
+      <textarea cols="30" rows="10" maxlength="20"></textarea>
+    </label>
+
+    <label>
+      input type="text" minlength="5" maxlength="20"
+      <input type="text" minlength="5" maxlength="20">
+    </label>
+
+    <label>
+      textarea minlength="5" maxlength="20"
+      <textarea cols="30" rows="10" minlength="5" maxlength="20"></textarea>
+    </label>
+  </div>
+</section>
+
+<section id="emoji" class="design__section">
+  <h2 class="h2">Emojis</h2>
+
+  <div class="form__wrapper">
+    <%= cell "decidim/announcement", "Only works for textarea" %>
+
+    <label>
+      textarea data-input-emoji="true"
+      <textarea cols="30" rows="10" data-input-emoji="true"></textarea>
+    </label>
+  </div>
+</section>

data/app/views/decidim/design/components/report/_static-report.html.erb

@@ -0,0 +1,34 @@
+<button class="button button__sm button__text button__text-secondary" title="Report" data-dialog-open="flagModal" aria-haspopup="dialog">
+  <span>Report</span>
+  <%= icon("flag-line") %>
+</button>
+
+<div id="flagModal" data-dialog="flagModal" role="dialog" tabindex="-1" aria-hidden="false" aria-labelledby="dialog-title-flagModal" aria-describedby="dialog-desc-flagModal" aria-modal="true">
+  <div id="flagModal-content" class="flag-modal">
+    <button type="button" data-dialog-close="flagModal" data-dialog-closable="" aria-label="Close modal">×</button>
+    <form class="new_report" action="#" accept-charset="UTF-8" method="post">
+      <input type="hidden" name="authenticity_token" value="Cw1tZf21dYDKeZ7MWIfUDHYzVeEYdaMhHAyPq4VcDeuqS-WbBQWx0srwBGXqlnq3kDAmSMFSTHrcDTxM0rq_Ig" autocomplete="off">
+      <div data-dialog-container="">
+        <%= icon("flag-line") %>
+        <h2 id="dialog-title-flagModal" tabindex="-1" data-dialog-title="">Report inappropriate content</h2>
+        <div>
+          <div class="form__wrapper flag-modal__form">
+            <p id="dialog-desc-flagModal" class="flag-modal__form-description">Is this content inappropriate?</p>
+            <p class="flag-modal__form-reason">Reason:</p>
+            <input type="hidden" name="report[reason]" value="" autocomplete="off"><label class="form__wrapper-checkbox-label"><input type="radio" value="spam" checked="checked" name="report[reason]">Contains clickbait, advertising, scams or script bots.</label><label class="form__wrapper-checkbox-label"><input type="radio" value="offensive" name="report[reason]">Contains racism, sexism, slurs, personal attacks, death threats, suicide requests or any form of hate speech.</label><label class="form__wrapper-checkbox-label"><input type="radio" value="does_not_belong" name="report[reason]">Contains illegal activity, suicide threats, personal information, or something else you think does not belong on Metadecidim.</label>
+            <label class="flag-modal__form-textarea-label">Additional comments<textarea rows="4" name="report[details]"></textarea></label>
+          </div>
+        </div>
+      </div>
+      <div data-dialog-actions="">
+        <button type="button" class="button button__lg button__transparent-secondary" data-dialog-close="flagModal">
+        Cancel
+        </button>
+        <button type="submit" class="button button__lg button__secondary">
+          <span>Report</span>
+          <%= icon("arrow-right-line") %>
+        </button>
+      </div>
+    </form>
+  </div>
+</div>

data/app/views/decidim/design/components/report.html.erb

@@ -0,0 +1,11 @@
+<% content_for :heading do %>
+  Report
+<% end %>
+
+<% content_for :toc do %>
+  <% report_sections.each do |section| %>
+    <%= link_to(section_text(section), "##{section[:id]}") %>
+  <% end %>
+<% end %>
+
+<%= render partial: "decidim/design/shared/sections", locals: { sections: report_sections } %>

data/app/views/decidim/design/components/share.html.erb

@@ -0,0 +1,11 @@
+<% content_for :heading do %>
+  Share
+<% end %>
+
+<% content_for :toc do %>
+  <% share_sections.each do |section| %>
+    <%= link_to(section_text(section), "##{section[:id]}") %>
+  <% end %>
+<% end %>
+
+<%= render partial: "decidim/design/shared/sections", locals: { sections: share_sections } %>

data/app/views/decidim/design/components/tab_panels.html.erb

@@ -0,0 +1,11 @@
+<% content_for :heading do %>
+  Tab Panels
+<% end %>
+
+<% content_for :toc do %>
+  <% tab_panels_sections.each do |section| %>
+    <%= link_to(section_text(section), "##{section[:id]}") %>
+  <% end %>
+<% end %>
+
+<%= render partial: "decidim/design/shared/sections", locals: { sections: tab_panels_sections } %>

data/app/views/decidim/design/foundations/accessibility.html.erb

@@ -0,0 +1,99 @@
+<% content_for :heading do %>
+  Accessibility
+<% end %>
+
+<% content_for :description do %>
+  <p>Decidim follows the <u>Web Content Accessibility Guidelines (WCAG) 2.1</u>.</p>
+<% end %>
+
+<% content_for :toc do %>
+  <a href="#heading-order">Illogical heading order</a>
+  <a href="#unique-h1">Unique H1</a>
+  <a href="#one-heading">Heading on important sections</a>
+  <a href="#color-contrast">Color contrast</a>
+  <a href="#links-buttons">Links and buttons</a>
+  <a href="#a11y-labels">Accessibility labels</a>
+  <a href="#adjacent-links">Adjacent links</a>
+  <a href="#aria">Use ARIA</a>
+  <a href="#elements-hidden">Elements hidden</a>
+<% end %>
+
+<section id="heading-order" class="design__section">
+  <h2>Illogical heading order</h2>
+
+  <p>Every page should have a logical heading order when using the &#60;h1&#62;, &#60;h2&#62;, &#60;h3&#62;, &#60;h4&#62;, &#60;h5&#62; and &#60;h6&#62; heading elements.</p>
+
+  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_illogical_heading_order" target="_blank" rel="noopener noreferrer">here</a></p>
+</section>
+
+<section id="unique-h1" class="design__section">
+  <h2>Unique H1</h2>
+
+  <p>Every page should have a unique H1 heading on it</p>
+
+  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_unique_h1_on_every_page" target="_blank" rel="noopener noreferrer">here</a></p>
+</section>
+
+<section id="one-heading" class="design__section">
+  <h2>Heading on important sections</h2>
+
+  <p>It is highly important that each important section of the page has a heading to make it easier to understand what important sections are on the page just by browsing through its headings.</p>
+
+  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_heading_on_important_sections" target="_blank" rel="noopener noreferrer">here</a></p>
+</section>
+
+<section id="color-contrast" class="design__section">
+  <h2>Color contrast</h2>
+
+  <p>When creating user interfaces or modifying the colors, always make sure that you are not breaking accessibility with your changes. You can use the Color contrast checker to ensure that your colors have enough contrast against the background color where they are displayed at.</p>
+
+  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_color_contrast " target="_blank" rel="noopener noreferrer">here</a></p>
+</section>
+
+<section id="links-buttons" class="design__section">
+  <h2>Links and buttons</h2>
+
+  <p>The anchor elements (i.e. links) are meant to link to different pages or to anchor positions within the page. If the element is supposed to e.g. open some hidden item on that page, you should use the &#60;button&#62; element instead.</p>
+
+  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_links_and_buttons" target="_blank" rel="noopener noreferrer">here</a></p>
+</section>
+
+<section id="a11y-labels" class="design__section">
+  <h2>Accessibility labels</h2>
+
+  <p>When defining elements, always make sure they make sense for screen reader users.</p>
+
+  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_accessibility_labels" target="_blank" rel="noopener noreferrer">here</a></p>
+</section>
+
+<section id="adjacent-links" class="design__section">
+  <h2>Adjacent links for the same resource</h2>
+
+  <p>If the same resource has multiple adjacent links pointing to it, it makes it difficult for such users to glance through the page because they might need to go through multiple links to get to the next resource.</p>
+
+  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_adjacent_links_for_the_same_resource" target="_blank" rel="noopener noreferrer">here</a></p>
+</section>
+
+<section id="dynamic-changes" class="design__section">
+  <h2>Dynamic functionality changes the page context unintuitively</h2>
+
+  <p>Changes in the form inputs should not change the context of the page automatically.</p>
+
+  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_dynamic_functionality_changes_the_page_context_unintuitively" target="_blank" rel="noopener noreferrer">here</a></p>
+</section>
+
+<section id="aria" class="design__section">
+  <h2>Use ARIA attributes where possible</h2>
+
+  <p>Many elements that provide interactive functionality on the website require ARIA attributes on them to make them accessible.</p>
+
+  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_use_aria_attributes_where_possible" target="_blank" rel="noopener noreferrer">here</a></p>
+</section>
+
+<section id="elements-hidden" class="design__section">
+  <h2>Elements hidden from the accessibility API</h2>
+
+  <p>To hide an element from assistive technologies, use the aria-hidden="true" attribute on it.</p>
+
+  <p>See further info <a href="https://docs.decidim.org/en/develop/develop/guide_accessibility.html#_elements_hidden_from_the_accessibility_api" target="_blank" rel="noopener noreferrer">here</a></p>
+</section>

data/app/views/decidim/design/foundations/color/_table.html.erb

@@ -0,0 +1,26 @@
+<table class="design__table">
+  <thead>
+    <th>Value</th>
+    <th>Tailwind name</th>
+    <% if columns.first[:rgba].present? %>
+      <th>Hex code</th>
+      <th>RGBA code</th>
+    <% end %>
+    <th>Usage</th>
+  </thead>
+  <tbody>
+    <% columns.each do |column| %>
+      <tr>
+        <td>
+          <div class="w-8 h-8 rounded shadow" style="background-color: <%= column[:value] %>;"></div>
+        </td>
+        <td><%= column[:name] %></td>
+        <% if column[:rgba].present? %>
+          <td><code><%= column[:value] %></code></td>
+          <td><code><%= column[:rgba] %></code></td>
+        <% end %>
+        <td><%= column[:usage] %></td>
+      </tr>
+    <% end %>
+  </tbody>
+</table>

data/app/views/decidim/design/foundations/color.html.erb

@@ -0,0 +1,16 @@
+<% content_for :heading do %>
+  Color
+<% end %>
+
+<% content_for :description do %>
+  <p>We provide a Base palette with few colors so simple customizations are easy. You can modify the Base palette either in the Administration area or in the Tailwind configuration file if you need more advanced customization.</p>
+  <p>When customizing your colors, have in mind the <%= link_to "WCAG 2.1 AA compliant contrast ratios", "https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html" %>. You can check the contrast of your choosing with <%= link_to "WebAIM Contrast Checker", "https://webaim.org/resources/contrastchecker" %> or other similar tools.</p>
+<% end %>
+
+<% content_for :toc do %>
+  <% colors_sections.each do |section| %>
+    <%= link_to(section_text(section), "##{section[:id]}") %>
+  <% end %>
+<% end %>
+
+<%= render partial: "decidim/design/shared/sections", locals: { sections: colors_sections } %>

data/app/views/decidim/design/foundations/iconography/_icons.html.erb

@@ -0,0 +1,8 @@
+<div class="mt-5 columns-3 space-y-4">
+  <% icons.each do |elem| %>
+    <div class="flex items-center gap-2 p-2.5 whitespace-nowrap">
+      <%= icon elem[:icon], class: "w-4 h-4 text-gray fill-current flex-none" %>
+      <span class="text-sm text-gray-2"><%= elem[:text] %></span>
+    </div>
+  <% end %>
+</div>

data/app/views/decidim/design/foundations/iconography.html.erb

@@ -0,0 +1,16 @@
+<% content_for :heading do %>
+  Iconography
+<% end %>
+
+<% content_for :description do %>
+  <p>We use icons to reinforce the meaning of actions, titles, etc.</p>
+  <p>We use the Remixicon open source library: <a href="https://remixicon.com" target="_blank" rel="noopener noreferrer">https://remixicon.com</a></p>
+<% end %>
+
+<% content_for :toc do %>
+  <% iconography_sections.each do |section| %>
+    <%= link_to(section_text(section), "##{section[:id]}") %>
+  <% end %>
+<% end %>
+
+<%= render partial: "decidim/design/shared/sections", locals: { sections: iconography_sections } %>

data/app/views/decidim/design/foundations/layout.html.erb

@@ -0,0 +1,128 @@
+<% content_for :heading do %>
+  Layout
+<% end %>
+
+<% content_for :description do %>
+  <p>For desktop, Decidim uses a 12 column grid with limited number of templates (grid configurations) for different types of content. The objective is that a given type of content (homepage, list of elements, individual item) has a distinctive layout, so users can understand in which kind of content they are just by the general look of the page.</p>
+
+  <p>These simple rules should be followed when creating new modules or customizing existing ones, so a Decidim site can maintain its consistency.</p>
+
+  <ul class="list-disc pl-4">
+    <li>Homepage (of the site, of an space): full width</li>
+    <li>List of elements (of spaces, of items inside a space, etc): left aside</li>
+    <li>Individual item (proposal, blog post): centered, optionally with a right aside</li>
+  </ul>
+<% end %>
+
+<% content_for :toc do %>
+  <a href="#desktop">Desktop</a>
+  <a href="#tablet">Tablet</a>
+  <a href="#mobile">Mobile</a>
+  <a href="#code">Code</a>
+  <a href="#breakpoints">Breakpoints</a>
+<% end %>
+
+<section id="desktop" class="design__section">
+  <h2>Desktop <span class="label secondary">lg</span></h2>
+
+  <p>Desktop grid system is composed of 12 flexible columns with a gutter between columns of 16px and left and right margins of 48px</p>
+
+  <div class="grid grid-cols-12 gap-4">
+    <% 12.times do %>
+      <div class="bg-primary/10 text-center h-10"></div>
+    <% end %>
+  </div>
+</section>
+
+<section id="tablet" class="design__section">
+  <h2>Tablet <span class="label secondary">md</span></h2>
+
+  <p>Tablet grid system is composed of 8 flexible columns with a gutter between columns of 16px and left and right margins of 24px</p>
+
+  <div class="grid grid-cols-6 gap-4">
+    <% 6.times do %>
+      <div class="bg-primary/10 text-center h-10"></div>
+    <% end %>
+  </div>
+</section>
+
+<section id="mobile" class="design__section">
+  <h2>Mobile <span class="label secondary">sm</span></h2>
+
+  <p>Mobile grid system is composed of 4 flexible columns with a gutter between columns of 16px and left and right margins of 16px. For sizes below 320px this margins are set to 8px</p>
+
+  <div class="grid grid-cols-4 gap-4">
+    <% 4.times do %>
+      <div class="bg-primary/10 text-center h-10"></div>
+    <% end %>
+  </div>
+</section>
+
+<section id="code" class="design__section">
+  <h2>Code</h2>
+
+  <p>When implementing new modules you have some helpers that automatically provides you with the code needed to setup the HTML structure. You should use these helpers instead of directly using div elements with classes, so you maintain consistency.</p>
+
+  <p>You can find the basic layouts in <a href="https://github.com/decidim/decidim/tree/develop/decidim-core/app/views/layouts/decidim/shared" target="_blank" rel="noopener noreferrer" class="text-secondary underline">https://github.com/decidim/decidim/tree/develop/decidim-core/app/views/layouts/decidim/shared</a></p>
+
+  <h3 class="text-xl">Full width</h3>
+
+  <p>No required</p>
+
+  <h3 class="text-xl">Left aside</h3>
+
+  <code class="p-4 rounded block bg-background">
+    &lt;%= render layout: "layouts/decidim/shared/layout_two_col" do %&gt;
+      ...
+    &lt;% end %&gt;
+  </code>
+
+  <h3 class="text-xl">Right aside</h3>
+
+  <code class="p-4 rounded block bg-background">
+    &lt;%= render layout: "layouts/decidim/shared/layout_two_col", locals: { reverse: true } do %&gt;
+      ...
+    &lt;% end %&gt;
+  </code>
+
+  <h3 class="text-xl">Centered</h3>
+
+  <code class="p-4 rounded block bg-background">
+    &lt;%= render layout: "layouts/decidim/shared/layout_center", locals: { columns: 10 } do %&gt;
+      ...
+    &lt;% end %&gt;
+  </code>
+
+  <p>Being the number of columns 10, 8 or 6.</p>
+
+</section>
+
+<section id="breakpoints" class="design__section">
+  <h2>Breakpoints</h2>
+
+  <p>To manage the responsive max-width of elements we rely on the default `container` Tailwind class, which states the following breakpoints:</p>
+
+  <table class="design__table">
+    <thead>
+      <th>Breakpoint</th>
+      <th>Properties</th>
+    </thead>
+    <tbody>
+      <%
+        rows = []
+        rows << { breakpoint: "sm (640px)", properties: "max-width: 640px;" }
+        rows << { breakpoint: "md (768px)", properties: "max-width: 768px;" }
+        rows << { breakpoint: "lg (1024px)", properties: "max-width: 1024px;" }
+        rows << { breakpoint: "xl (1280px)", properties: "max-width: 1280px;" }
+        rows << { breakpoint: "2xl (1536px)", properties: "max-width: 1536px;" }
+
+        rows.each do |row|
+      %>
+        <tr>
+          <td><%= row[:breakpoint] %></td>
+          <td><%= row[:properties] %></td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</section>

data/app/views/decidim/design/foundations/typography.html.erb

@@ -0,0 +1,15 @@
+<% content_for :heading do %>
+  Typography
+<% end %>
+
+<% content_for :description do %>
+  <p>These guidelines summarize how use typography at Decidim, and serve as guardrails for designers to design freely with best typographic practices in mind</p>
+<% end %>
+
+<% content_for :toc do %>
+  <% typography_sections.each do |section| %>
+    <%= link_to(section_text(section), "##{section[:id]}") %>
+  <% end %>
+<% end %>
+
+<%= render partial: "decidim/design/shared/sections", locals: { sections: typography_sections } %>

data/app/views/decidim/design/home/index.html.erb

@@ -0,0 +1,17 @@
+<% content_for :right_aside do %>
+  <%= link_to "https://github.com/decidim/decidim", target: "_blank", data: { "external-link": false }, class: "flex items-center justify-end gap-1 font-semibold text-secondary" do %>
+    <span class="whitespace-nowrap">Source code on GitHub</span>
+    <%= icon "github-fill", class: "flex-none w-3.5 h-3.5 fill-current" %>
+  <% end %>
+<% end %>
+
+<section>
+  <h1 class="text-[72px] leading-[90px] font-bold text-transparent bg-clip-text bg-[linear-gradient(96deg,_var(--primary)_22.02%,_var(--secondary)_44.83%)] after:content-[''] after:block after:w-20 after:h-2 after:mt-1.5 after:bg-primary after:rounded-b-xl">Decidim Design Guide</h1>
+
+  <div class="text-lg space-y-4 mt-12">
+    <h2 class="font-semibold">The guide to design all things Decidim</h2>
+    <p>Welcome to the Decidim Design Guide (DDG). This guide is the resource for designers and developers who need to customize, develop new modules, and integrate new features.</p>
+    <p>By sharing the principles, philosophy, and rationale behind design decisions we want to empower the community to contribute with consistency so we reach the best participant experience.</p>
+    <p>At the same time, we document the different UI components and patterns in use, that should be reused or extended.</p>
+  </div>
+</section>

data/app/views/decidim/design/shared/_card_grid.html.erb

@@ -0,0 +1,3 @@
+<div class="card__grid-grid">
+  <%= yield %>
+</div>

data/app/views/decidim/design/shared/_cell_snippet.html.erb

@@ -0,0 +1,6 @@
+<div class="design__section-snippet">
+  <p>Source code on GitHub: <%= link_to(text, url, target: "_blank", rel: "noopener noreferrer") %></p>
+  <code>
+    <textarea rows="5"><%= Nokogiri::XML(cell(cell, *args).call, &:noblanks).root %></textarea>
+  </code>
+</div>