MADE Pattern Library

This page documents the design system and components used on the Maine Ad + Design website.

Quick Reference

Content Guide Typography Colors Components Events Icons

Content Guide

This section provides a quick reference for where to modify content on the MADE website. This is helpful for users who are familiar with code and GitHub but may not know Jekyll well.

File Structure Overview

The MADE website follows Jekyll’s file structure conventions:

Regular Pages: Individual Markdown files in the root directory (e.g., about.md, membership.md)
Collections: Groups of related content in folders with an underscore prefix (_events, _brodersons)
Data Files: Structured content in YAML files in the _data directory
Layouts: Templates for different page types in the _layouts directory
Includes: Reusable components in the _includes directory
Assets: Images, CSS, and JavaScript in the assets directory

Common Content Locations

Content Type	Location	File Format	Notes
Regular pages	Root directory	Markdown (`.md`)	e.g., `about.md`, `membership.md`
Events	`_events/` directory	Markdown (`.md`)	Each event is a separate file
Brodersons content	`_brodersons/` directory	Markdown (`.md`)	For Broderson Awards content
Global banner	`_data/banner.yml`	YAML	Configure the site-wide banner
Footer content	`_data/footer.yml`	YAML	Update contact info and footer text
Home page CTAs	`_data/home_ctas.yml`	YAML	Main call-to-action buttons on homepage
Site config	`_config.yml`	YAML	Site-wide configurations

Editing Events

Events are managed as a Jekyll collection. To add a new event:

Create a new Markdown file in the _events/ directory with a descriptive filename (e.g., made-mixer-june.md)
Include required front matter (YAML at the top of the file):

---
layout: page
title: Event Title
date: 2025-06-15  # YYYY-MM-DD format
start_time: "6:00 PM"
end_time: "8:00 PM"
location: Venue Name
address: |
  123 Main Street
  Portland, Maine
image: /assets/images/events/your-image.jpg
price: "$10"  # Optional
ticket_link: https://example.com/tickets  # Optional
---

Add event description in Markdown below the front matter

Events will automatically appear in the upcoming events section if their date is in the future.

Modifying Global Elements

Edit _data/banner.yml to update the site-wide banner:

enabled: true  # Set to false to disable
text: "Your banner text here"
url: "/target-page"
theme: "tomato"  # Options: tomato, harbor, sunshine, neutral
exclude_paths: "/path1,/path2/"  # Pages where banner shouldn't show

Edit _data/footer.yml to update footer content:

# Contact information
contact:
  email: "your@email.com"
  linkedin: "YourLinkedIn"
  instagram: "YourInstagram"
  facebook: "YourFacebook"
  signup_url: "https://signup-form.com"
  signup_text: "Sign up text"

# Footer text (supports Markdown)
fineprint: |
  Your footer text here
  Can span multiple lines

# Copyright information
copyright_name: "Your organization name"
copyright_start_year: 1923

Homepage

The homepage is controlled by index.md. The hero section is configured directly in the file:

{% include hero.html
  image_src="/path/to/image.jpg"
  title="Your title here"
  cta_links=site.data.home_ctas
  theme="harbor"
%}

The homepage CTA buttons are defined in _data/home_ctas.yml:

- url: /about
  text: About
- url: /membership
  text: Join

Adding Images

Images should be placed in the appropriate subdirectory within the assets/images/ directory:

Event images: assets/images/events/
Board member photos: assets/images/board/
General images: assets/images/
Brodersons images: assets/images/brodersons/

Using the Capture Technique for Markdown

Jekyll and Liquid have some limitations when it comes to processing Markdown within certain contexts. To ensure your Markdown content is properly processed, use the “capture” technique:

Wrap your Markdown content in a Liquid capture tag:

{% capture your_content_name %}
Your **Markdown** content goes here.
   
- With lists
- And other formatting
{% endcapture %}

Output the captured content with the markdownify filter:
```
{{ your_content_name | markdownify }}
```

This technique is especially useful for:

Content that includes complex Markdown formatting
Content that includes Liquid tags and variables
Content that needs to be reused in multiple places

You can see this technique used throughout the site, particularly on the About page and in components like the hero section.

Overview

The MADE website uses a minimal design system focused on typography, color, and whitespace. The design system is built around:

Fluid Typography: Font sizes adjust based on viewport size
Modular Components: Reusable patterns for consistent design
Color Themes: Variations that can be applied to sections
3D Effects: A playful, distinctive treatment for interactive elements

Typography

The MADE site uses a combination of typefaces for different purposes:

Primary Fonts

Golos Text - Primary sans-serif for body text
Brandon Grotesque - Used for headings
LfA Aluminia - Used for lead paragraphs
Fragment Mono - Used for code, straplines, and buttons

Type Scale

Heading 1

Heading 2

Heading 3

Lede text

Body text

Strapline

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Copy

This is a lede paragraph, set in Aluminia. It’s used to introduce sections with a distinctive, editorial feel. Aluminia was designed for Mainer Bruce Kennett’s excellent book on the excellent W.A. Dwiggins (this is the book, and here’s more on the font).

Regular paragraph text is set in Golos Text. It’s clean, contemporary, and highly readable at all sizes. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Links are generally underlined and inherit their color from the parent element.

Bold text and italic text and highlighted text can be used for emphasis.

Lists

Unordered lists use a custom square bullet
Items have comfortable spacing
For better readability and scannability

Ordered lists maintain the same styling
But with numerical indicators
Consistent spacing with unordered lists

Straplines and Headlines

Straplines and headlines are custom elements used to introduce sections:

This is a strapline

This is a headline that follows the strapline

<span class="strapline">This is a strapline</span>
<h2 class="headline">This is a headline that follows the strapline</h2>

Colors

The MADE color palette builds upon the brand’s heritage while introducing new accent colors.

--page
#FAF7EF

--ink
#062138

--seadogs
#52C1B1

--tomato
#CA583C

--tomato-alt
#D85E38

--sunshine
#F0C86D

--harbor
#062138

--wintermint
#9ECCBF

Color Modifiers

Colors can be used with transparency modifiers from 10% to 90%:

.bg-tomato-1 (10%)

.bg-tomato-3 (30%)

.bg-tomato-5 (50%)

.bg-tomato-7 (70%)

.bg-tomato-9 (90%)

Components

Buttons

Buttons use a distinctive 3D effect with pill-shaped styling:

Primary Button Secondary Button Large Button Small Button

<a href="#" class="cta">Primary Button</a>
<a href="#" class="cta cta-secondary">Secondary Button</a>
<a href="#" class="cta cta-large">Large Button</a>
<a href="#" class="cta cta-small">Small Button</a>

Mini Panels

Mini panels are floating content sections that can contain a call to action:

<div class="panel mini-panel">
  <h3>Ready to join?</h3>
  <a href="#" class="cta">Become a member</a>
</div>

<div class="panel mini-panel mini-panel-filled">
  <h3>Ready to join?</h3>
  <a href="#" class="cta">Become a member</a>
</div>

Themed Panels

Panels are content containers that can have different color themes:

Our mission

To celebrate, cultivate, and connect Maine's professional creative community

We provide:

Educational workshops
Networking events

We serve:

Agencies and studios
Independent professionals

Inclusion

Maine Ad + Design is a community of tolerance and pride. We stand against oppression in all its forms.

Join us

Become part of Maine's vibrant creative community.

Become a member

<div class="panel panel-sunshine">
  <span class="strapline">Our mission</span>
  <h2 class="headline">To celebrate, cultivate, and connect</h2>
  
  <div class="two-up">
    <!-- Two-column content -->
  </div>
</div>

Two-Column Layout

The two-up layout creates a simple two-column grid for content organization:

Left Column

This content appears in the left column on larger screens, and stacks on mobile.

Right Column

This content appears in the right column on larger screens, and stacks on mobile.

<div class="two-up">
  <div>
    <h3>Left Column</h3>
    <p>Content here...</p>
  </div>
  <div>
    <h3>Right Column</h3>
    <p>Content here...</p>
  </div>
</div>

Membership Tiers

Membership tiers use a card-based layout with the 3D hover effect:

Individual

$50/year

Perfect for independent creatives and professionals.

Join

Studio

$150/year

Ideal for small agencies and design studios.

Join

<div class="tier">
  <div>
    <h2>Individual</h2>
    <p class="price">$50/year</p>
    <p>Description here...</p>
  </div>
  <a href="#" class="cta">Join</a>
</div>

Board Member Cards

Board members are displayed in a grid of cards with photos:

Dustyn Bailey

President

Abby Lank

Member

<div class="board-member">
  <img src="/path/to/image.jpg" alt="Name">
  <h3>Name</h3>
  <p>Role</p>
</div>

Event Cards

Events are displayed in a responsive grid with cards that have rounded corners and a distinctive style:

RSVP

MADE Mixer

Thursday, April 17 5:30 PM–7:30 PM

Factory 3

105 St James St, Portland, ME

<!-- Date formatting handled directly with the date filter -->

<div class="event-card">
  <div class="event-image">
    <div class="event-image-bg" style="background-image: url('');"></div>
    <div class="event-image-overlay"></div>
    
  </div>
  <div class="event-content">
    <h3 class="event-title text-seadogs"></h3>
    <div class="event-date">
      <time datetime="">
        
      </time>
      <span class="event-time">
        
      </span>
    </div>
    <div class="event-location">
      <div class="location-name"></div>
      
    </div>
  </div>
</div>

To display a list of upcoming events:

<section class="events-section panel panel-seadogs">
  <div class="container">
    <div class="events-container">
      <div class="events-intro">
        <div class="strapline">Events</div>
        <h2 class="headline">What’s coming up?</h2>
        <p>Some ways to spend time IRL with friends and strangers. (It’s good for the soul.)</p>
      </div>
      
      
      <div class="events-carousel">
        
        <button class="scroll-button scroll-left" aria-label="Scroll left">&#10094;</button>
        <div class="events-scroll-outer">
          <div class="events-scroll" data-count="2">
            
              


<!-- Date formatting handled directly with the date filter -->

<div class="event-card">
  <div class="event-image">
    <div class="event-image-bg" style="background-image: url('/assets/images/events/bluelobster.webp');"></div>
    <div class="event-image-overlay"></div>
    
  </div>
  <div class="event-content">
    <h3 class="event-title text-seadogs">MADE Mixer</h3>
    <div class="event-date">
      <time datetime="2025-05-22T00:00:00+00:00">
        Thursday, May 22
      </time>
      <span class="event-time">
        5:30 PM&ndash;7:30 PM
      </span>
    </div>
    <div class="event-location">
      <div class="location-name">Blue Lobster Urban Winery</div>
      
        <div class="location-address">200 Anderson Street Portland, Maine</div>
      
    </div>
  </div>
</div>
            
              


<!-- Date formatting handled directly with the date filter -->

<div class="event-card">
  <div class="event-image">
    <div class="event-image-bg" style="background-image: url('/assets/images/events/brodersons.png');"></div>
    <div class="event-image-overlay"></div>
    
      <a href="https://www.eventbrite.com/e/made-broderson-awards-2025-tickets-1321673213159?aff=oddtdtcreator" class="event-ticket-link cta cta-sunshine cta-small" target="_blank">
        
          Buy Tickets
        
      </a>
    
  </div>
  <div class="event-content">
    <h3 class="event-title text-seadogs">Broderson Awards 2025</h3>
    <div class="event-date">
      <time datetime="2025-06-05T00:00:00+00:00">
        Thursday, June 5
      </time>
      <span class="event-time">
        6:00 PM&ndash;9:00 PM
      </span>
    </div>
    <div class="event-location">
      <div class="location-name">UNE Innovation Hall</div>
      
        <div class="location-address">Portland, Maine</div>
      
    </div>
  </div>
</div>
            
          </div>
        </div>
        <button class="scroll-button scroll-right" aria-label="Scroll right">&#10095;</button>
      </div>
      
    </div>
  </div>
</section>

The site features a configurable global banner at the top:

The banner is configured in _data/banner.yml and can be:

Enabled/disabled
Customized with different text and links
Themed with different colors

Icons

SVG Icons

SVG icons are included as inline SVG for better styling control:

Instagram

Facebook

External Link

Wave

Size variations:

<!-- Default SVG icon -->

  <span class="icon ">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
  <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
</svg>
  </span>

<!-- Size variations -->

  <span class="icon icon-sm">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
  <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
</svg>
  </span>

  <span class="icon icon-lg">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
  <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
</svg>
  </span>

  <span class="icon icon-xl">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
  <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
</svg>
  </span>

<!-- Available icons -->

  <span class="icon ">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
  <path d="M416 32H31.9C14.3 32 0 46.5 0 64.3v383.4C0 465.5 14.3 480 31.9 480H416c17.6 0 32-14.5 32-32.3V64.3c0-17.8-14.4-32.3-32-32.3zM135.4 416H69V202.2h66.5V416zm-33.2-243c-21.3 0-38.5-17.3-38.5-38.5S80.9 96 102.2 96c21.2 0 38.5 17.3 38.5 38.5 0 21.3-17.2 38.5-38.5 38.5zm282.1 243h-66.4V312c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9V416h-66.4V202.2h63.7v29.2h.9c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9V416z"/>
</svg>
  </span>

  <span class="icon ">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="currentColor">
  <path d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
</svg>
  </span>

  <span class="icon ">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
  <path d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/>
</svg>
  </span>

  <span class="icon ">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
  <path d="M432,320H400a16,16,0,0,0-16,16V448H64V128H208a16,16,0,0,0,16-16V80a16,16,0,0,0-16-16H48A48,48,0,0,0,0,112V464a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V336A16,16,0,0,0,432,320ZM488,0h-128c-21.37,0-32.05,25.91-17,41l35.73,35.73L135,320.37a24,24,0,0,0,0,34L157.67,377a24,24,0,0,0,34,0L435.28,133.32,471,169c15,15,41,4.5,41-17V24A24,24,0,0,0,488,0Z"/>
</svg>
  </span>

  <span class="icon ">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" fill="currentColor">
  <path d="M277.4 97.9c-11.3-11.6-27.2-19-45.4-19c-13.5 0-26.7 4.2-37.4 12c-13.5 9.7-22.2 24.1-24.5 40.6c-8.4-6.4-19-10.4-30.7-10.4c-13.5 0-26.6 5.2-36.3 14.6c-9.8 9.4-15.8 22.2-16.1 36.3c-.1 4.4 2.4 8.3 6.4 10.3c2.1 1 4.5 1.5 6.9 1c2.4-.4 4.6-1.6 6.3-3.3c3.2-3.3 4.9-7.7 4.8-12.3c.2-8.8 3.5-16.6 9.4-22.3c6-5.8 14.2-9 23-9c14.7 0 27.5 10.5 30.3 24.8c1.5 7.5 9.1 12.2 16.6 10.8c7.5-1.5 12.2-9.1 10.8-16.6c-1.9-9.4-6.2-18-12.2-25c.5-5.1 2.2-12.2 6.6-19.1c3.1-4.8 9.7-13.7 22.2-22.3c7.1-4.9 15-7.2 23.2-7.2c12.6 0 22.6 5.2 29.5 12.3c10.3 10.7 14.4 24.5 14.4 35.9c0 7.7 6.3 14 14 14s14-6.3 14-14C312.3 131.6 305.8 106.8 277.4 97.9zM290.8 274.1c-2.4-7.4-10.4-11.4-17.8-9c-7.4 2.4-11.4 10.4-9 17.8c1.1 3.4 1.6 6.8 1.6 10.3c0 8.5-3.2 16.7-9.1 22.8c-5.5 5.7-12.9 8.9-20.8 8.9c-15.3 0-28.9-11.9-30.1-27.2c-.5-7.7-7-13.6-14.7-13c-7.7 .5-13.6 7-13 14.7c2.1 31.2 27.4 53.5 57.9 53.5c15.3 0 29.7-6.2 40-17c11.9-12.3 18.4-28.7 18.4-45.3C293.9 284.9 292.9 279.3 290.8 274.1zM111.7 131.1c-7.7 .5-13.6 7-13 14.7C101.3 182.4 129.7 210 159 210c10.4 0 20.4-2.4 29.7-7.1c7-3.6 9.8-12.1 6.2-19.1c-3.6-7-12.1-9.8-19.1-6.2c-5.2 2.6-10.4 4-16.7 4c-16.9 0-31.7-14.6-33.5-31.5C125 142.4 119.4 130.5 111.7 131.1zM304 0c-7.7 0-14 6.3-14 14v14c0 7.7 6.3 14 14 14s14-6.3 14-14V14c0-7.7-6.3-14-14-14zM395.4 106.8l9.9-9.9c5.5-5.5 5.5-14.3 0-19.8s-14.3-5.5-19.8 0l-9.9 9.9c-5.5 5.5-5.5 14.3 0 19.8s14.3 5.5 19.8 0zM212.7 106.8c5.5-5.5 5.5-14.3 0-19.8l-9.9-9.9c-5.5-5.5-14.3-5.5-19.8 0s-5.5 14.3 0 19.8l9.9 9.9c5.5 5.5 14.3 5.5 19.8 0zM488 278c-7.7 0-14 6.3-14 14l0 14c0 7.7 6.3 14 14 14s14-6.3 14-14l0-14c0-7.7-6.3-14-14-14zM437.5 405.9c-5.5-5.5-14.3-5.5-19.8 0s-5.5 14.3 0 19.8l9.9 9.9c5.5 5.5 14.3 5.5 19.8 0s5.5-14.3 0-19.8l-9.9-9.9zM404 368c0-7.7-6.3-14-14-14H376c-7.7 0-14 6.3-14 14s6.3 14 14 14h14c7.7 0 14-6.3 14-14zM209.6 405.9l-9.9 9.9c-5.5 5.5-5.5 14.3 0 19.8s14.3 5.5 19.8 0l9.9-9.9c5.5-5.5 5.5-14.3 0-19.8s-14.3-5.5-19.8 0zM138 368c0 7.7 6.3 14 14 14l14 0c7.7 0 14-6.3 14-14s-6.3-14-14-14l-14 0c-7.7 0-14 6.3-14 14z"/>
</svg>
  </span>

Emoji Icons

For simpler cases, emoji icons are also available:

Wave

External

Instagram

Facebook

<!-- Emoji icons -->

  <span class="emoji-icon wave "></span>

  <span class="emoji-icon external "></span>

  <span class="emoji-icon social-linkedin "></span>

  <span class="emoji-icon social-instagram "></span>

  <span class="emoji-icon social-facebook "></span>

Direct Link Icons

External links can automatically include an icon:

External link example

<a href="https://example.com" class="external">External link example</a>

Responsive Behavior

The MADE website uses a mobile-first approach with fluid typography and layouts.

Typography: Scales fluidly based on viewport size
Layouts: Stack vertically on small screens, expand on larger screens
Components: Adapt to different screen sizes (e.g., two-up becomes single column)
Navigation: Remains accessible across device sizes

The site does not use traditional breakpoints, but instead relies on fluid, relative units for responsiveness.

MADE Pattern Library

Quick Reference

Content Guide

File Structure Overview

Common Content Locations

Editing Events

Modifying Global Elements

Banner

Footer

Homepage

Adding Images

Using the Capture Technique for Markdown

Overview

Typography

Primary Fonts

Type Scale

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Body Copy

Lists

Straplines and Headlines

This is a headline that follows the strapline

Colors

Color Modifiers

Components

Buttons

Mini Panels

Ready to join?

Ready to join?

Ready to join?

Themed Panels

To celebrate, cultivate, and connect Maine's professional creative community

We provide:

We serve:

Two-Column Layout

Left Column

Right Column

Membership Tiers

Individual

Studio

Board Member Cards

Dustyn Bailey

Abby Lank

Event Cards

MADE Mixer

Global Banner

Icons

SVG Icons

Emoji Icons

Direct Link Icons

Responsive Behavior