Website - general details

[babalicious-io]

General definitions and details

---

Overview of

• Typeface and font family used
• Various font and spacing values on desktop and mobile
• Color palette
• Logo
• Taglines and blurbs
• SEO keywords

---

[babalicious-io]

Color palette

---

Purple

#220033 - rgb(34, 0, 51) - purpleDark
#440066 - rgb(68, 0, 102) - purpleMedium
#660099 - rgb(102, 0, 153) - purple
#8800CC - rgb(136, 0, 204) - purpleLight
#AA00FF - rgb(170, 0, 255) - purpleBright

---

Grey

#333333 - rgb(51, 51, 51) - greyDark
#666666 - rgb(102, 102, 102) - greyMedium
#999999 - rgb(153, 153, 153) - grey
#CCCCCC - rgb(204, 204, 204) - greyLight
#FFFFFF - rgb(255, 255, 255) - greyBright

---

Purple Background

#0A000F - rgb(10, 0, 15) - purpleDark4
#14001F - rgb(20, 0, 31) - purpleDark3
#1F002E - rgb(31, 0, 46) - purpleDark2

---

Purple and Grey color palettes are used for text - logo, header menus, headings, subheadings and body text.
Attempting to use the Purple palette solely for header, footer, search, filters and stamps and tokens related modules and pages across the website.
Grey for Stampchain related info, modules and pages - Get Stamping, About, Partners and Faq modules. Featured Collection banner cards and input fields, and all the Resources pages - anywhere where there is a lot of text.
Progress bar, sliders and buttons are mixed Purple and Grey.
GreyBright (aka white) is not used - so far.

Purple Background palette is used for the gradient background of modules, stampcards and tokencards.

I haven't had time (prioritised) to create a figma color library and have used hex colors in the mockups.
The naming of the colors is not important for me and you can change them as you like.

[babalicious-io]

I have not yet had time to finetune the background gradients on the site and will share them when finished.

[babalicious-io]

Grey background

#080808 - rgb(8, 8, 8) - greyDark4
#0F0F0F - rgb(15, 15, 15) - greyDark3
#171717 - rgb(23, 23, 23) - greyDark2

---

The palette is used for the Partner and Collections banner cards.

[babalicious-io]

Better background color

[babalicious-io]

Typeface

---

Work Sans
https://fonts.google.com/specimen/Work+Sans

Used for the Stampchain logo - uppercase, italic, black (font weight 900).
All website text - except in the View Code modal popup.

font-family: "Work Sans", "Arial Black", Arial, sans-serif, system-ui; font-optical-sizing: auto; font-weight: <weight>; font-style: normal;

---

Monospace
OS installed or web safe fonts

Only used for the code view popup modal text (displaying html/svg code) - so it's not that important that it's uniform across all devices

font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, monospace; font-weight: normal;

---

Micro 5
https://fonts.google.com/specimen/Micro+5

Proposed typeface for Bitcoin Stamps related promo material.
If you are to use the font, then it needs to be included in the font stack.

font-family: "Micro 5", sans-serif; font-weight: 400; font-style: normal;

---

[babalicious-io]

Icon pack

---

Phosphor Icons

---

[babalicious-io]

Breakpoints

---

The website uses the following breakpoints to scale harmoniously across nearly all devices

1440px-1025px - Desktop
1024px-769px - Tablet
768px-569px - Mobile (landscape)
568px-360px - Mobile (portrait // landscape on smaller phones)

There may be some old relic phones out there with 320px viewports, so anything under 360px should just scale down to fit the viewport width.

There are 5 design versions of each page. Two for mobile (portrait mode) illustrating the layout change that happens at 568px and how it scales down to 360px.

[reinamora137]

Updated the breakpoints to these

[babalicious-io]

Scrollbar

---

Minor restyling of the browser window scrollbar to reflect the sites color scheme

::-webkit-scrollbar {
    border-radius: 3px;
    height: 24px; 
    width: 6px;
}
::-webkit-scrollbar-thumb:hover {
    background: #aa00ff;
}
::-webkit-scrollbar-thumb {
    background: #660099;
    border-radius: 3px;
}
::-webkit-scrollbar-track {
    background: #333333;
    border-radius: 3px;
}

---

The scrollbars used on the site pages - for the code view popup, dispenser/transfers/... data modules and anywhere else needed) are found here:

https://www.figma.com/design/Os9UawIAetoFAqwkNKHN9j/Stampchain-web?node-id=4008-2710&m=dev&t=36XTddt0NPyDLql7-1

[babalicious-io]

Not sure what scrollbar height does, cause my input didn't visually change anything
If it's possible to extend it - make longer - then please experiment with that