We ended up with 64 different styles for organizers to use. One of the newest ideas I implemented into here was using neon shapes and colors in addition to a black background. This enabled us to bring in a theme of "we might've been flickering before but now we're up bright". The neon design theme also brings in a host of animation possibilities. MA Hacks is one of the first hackathons to use Hack Club Bank's new hackathon program and associated assorted tools and perks for organizers.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcfukCHkaNNVQLDlwsXT9oVSkM7A3%2FE9j7FFMJT2Fr5QGQDw8N%2Ff2b4a760-5107-4264-a7a8-2d2bb7d783f3.png?alt=media&token=fe4bbc12-c1e6-43f5-9ed0-a4c969d77df8","id":"f2b4a760-5107-4264-a7a8-2d2bb7d783f3","width":1236,"height":416,"filename":"Logo.png","type":"image/png","caption":"MA Hack 6 Logo in Neon White","border":false}]}
```

The MA Hacks fonts are 4 distinct fonts: Hello Denver (the tube lookin' one), Palmer Sans, Inter, and Outfit. All were chosen to fit well together. Logos use the first two while documents and any text use the last two. We can see this on the prospectus.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcfukCHkaNNVQLDlwsXT9oVSkM7A3%2FE9j7FFMJT2Fr5QGQDw8N%2Fa4ffa51d-fb69-45c6-9ad6-8af31be423a9.png?alt=media&token=52345abd-c2ec-4431-8b40-a9ede682a11f","id":"a4ffa51d-fb69-45c6-9ad6-8af31be423a9","width":638,"height":1014,"filename":"Screen Shot 2022-08-12 at 3.12.55 AM.png","type":"image/png","caption":"","border":false}]}
```

This very low-quality image is a screenshot from the prospectus. Outfit and Inter are both shown here as well as our accessory shapes. We use the following shapes and colors to enhance the UI anywhere during the event.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcfukCHkaNNVQLDlwsXT9oVSkM7A3%2FE9j7FFMJT2Fr5QGQDw8N%2F336cb946-112a-4422-b498-0c87d2f1b5e1.png?alt=media&token=31c23d67-a30e-431f-8e37-2ea8429c6c50","id":"336cb946-112a-4422-b498-0c87d2f1b5e1","width":1764,"height":416,"filename":"Neon glow.png","type":"image/png","caption":"Color Scheme with Neon for MA Hacks 6","border":false}]}
```

Above are colors and below are the shapes. I've put them in a commonly used pattern that can be seen throughout the branding.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcfukCHkaNNVQLDlwsXT9oVSkM7A3%2FE9j7FFMJT2Fr5QGQDw8N%2F3e98c498-a97d-4ac8-af0d-2ffc9cd3c8c3.png?alt=media&token=cfed9478-0c6f-4578-a642-e93e35e6ac41","id":"3e98c498-a97d-4ac8-af0d-2ffc9cd3c8c3","width":2684,"height":784,"filename":"Shapes.png","type":"image/png","caption":"Shapes with colors","border":false}]}
```

Creating the MA Hacks Branding

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcfukCHkaNNVQLDlwsXT9oVSkM7A3%2FQnmfF9XPuTjCbdxeZZb2%2Fc7999f7e-fa80-44ec-80fd-c087b0bb0a9f.png?alt=media&token=cf6d9f90-0245-4c3f-bb15-548bf45b4ce5","id":"c7999f7e-fa80-44ec-80fd-c087b0bb0a9f","width":3584,"height":2154,"filename":"image (1).png","type":"image/png","caption":"Screenshot of Days of Service Website","border":false}]}
```

This website was created for the new Days of Service initiative. The site was inspired by [Gemma Copeland](https://gemmacope.land) and [Andy Matuschak](https://andymatuschak.org)'s personal websites.

Most of the Hack Club sites use bright, bold colors and card components sectioning off different parts. This site does quite the opposite featuring a muted red background on the left to separate the left and right, and a monochrome color palette (minus the event logos). Event cards still exist and display pictures in a scrolling marquee.

See the site [here](https://daysofservice.hackclub.com). See the code [here](https://github.com/hackclub/days-of-service).

Creating a site for a new grant

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcfukCHkaNNVQLDlwsXT9oVSkM7A3%2Fblossom-site%2Fed22ea07-b6b6-4c81-b282-3a3ad4993545.png?alt=media&token=a0c4f531-5e79-4029-b05d-66e151d8393f","id":"ed22ea07-b6b6-4c81-b282-3a3ad4993545","width":3584,"height":2154,"filename":"Screenshot 2024-02-18 at 6.12.24 PM.png","type":"image/png","caption":"First page load of the Blossom Day of Service website.","border":false}]}
```

This website was given to me to redesign after a couple of design attempts by younger members of the community. I wanted to keep a lot of their design choices so here's a list of things I did not change:

* Images and Logos

* Layouts

* Text

* Colors

Given that I was now re-styling rather than redesigning per se, I'm going to talk about some design choices I made during this process.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcfukCHkaNNVQLDlwsXT9oVSkM7A3%2Fblossom-site%2F139c87c7-ce06-42df-9bc7-d225999ed099.png?alt=media&token=d4c54251-1b51-45c8-93d6-dbb0203de03b","id":"139c87c7-ce06-42df-9bc7-d225999ed099","width":830,"height":434,"filename":"Screenshot 2024-02-18 at 6.18.08 PM.png","type":"image/png","caption":"A screenshot of a text block, a coupled heading and paragraph.","border":false}]}
```

### Headings and paragraphs

Previously, there wasn't really a direction. There was a font, but it wasn't imported, and hence defaulted to the system serif font. It looked like an HTML page with no CSS, but not in a brutalist way that looks pleasing for some reason.

I wanted to emphasize the headings, and making them bold didn't do the trick. Recently, I've been playing around with borders to containerize and emphasize different parts of a webpage. I love this pill-shape border on small headings and buttons. I kept the same color used in the previous design.

The previous design had lowercase copy, probably to make the copy more casual. I removed the old font, or rather lack of, and replaced it with the browser sans font. I don't really like big text blocks as they're harsh to my eye and barely readable from any distance. To create some sort of separation between words, i added span elements throughout the paragraphs with wavy underlines and different font weights.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcfukCHkaNNVQLDlwsXT9oVSkM7A3%2Fblossom-site%2Fbea81dc7-1f58-41c3-a629-73a0d7c9a524.png?alt=media&token=aa536481-6280-48f4-b564-b287625e5125","id":"bea81dc7-1f58-41c3-a629-73a0d7c9a524","width":596,"height":956,"filename":"Screenshot 2024-02-18 at 6.24.29 PM.png","type":"image/png","caption":"Screenshot of the Frequently Asked Questions (FAQ) section.","border":false}]}
```

### "Containers for questions"

The previous site designed used DaisyUI to create an accordion for the FAQ. I took the not-so-bold design decision to remove that because there were only 3 questions and replace it with plain text. This resulted in a weird text block that did not visually give me any rest.

I changed the headings to be semibold and italic and wrapped the question in a dotted border. This provides a container for the question, but doesn't make it too secluded from the others. I think this was a good option for these because of the small number and the surplus whitespace on the page.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FcfukCHkaNNVQLDlwsXT9oVSkM7A3%2Fblossom-site%2F9be34473-8b4f-4189-b610-7ab2a8db8afb.png?alt=media&token=569face8-ba50-43fb-94c5-32a98964adad","id":"9be34473-8b4f-4189-b610-7ab2a8db8afb","width":908,"height":84,"filename":"Screenshot 2024-02-18 at 6.29.07 PM.png","type":"image/png","caption":"Screenshot of the footer of the webpage.","border":false}]}
```

### Footer

After I was satisfied with the site, I sent it back to the organizers of the event. When they shared it, I realized there was no link to the open-source repository. For the footer, I chose a darker hue of the pink used on the background and put a similarly styled span element to the anchor tag in the footer.

See the site [here](https://blossom.hackclub.com). See the code [here](https://github.com/hackclub/blossom).