Skip to content

feat: update color palette and icons #817

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vanshika-srivastava merged 4 commits into from
Nov 17, 2025
Merged

feat: update color palette and icons #817

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5b254f8
feat: update color palette and icons
Wagalidoom Nov 17, 2025
2de288f
add accent colour
vanshika-srivastava Nov 17, 2025
6a76621
add fonts
vanshika-srivastava Nov 17, 2025
2892d81
change logo svg
vanshika-srivastava Nov 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 6 additions & 6 deletions docusaurus.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ const config = {
},
colorMode: {
defaultMode: "dark", // Set default mode to dark
disableSwitch: true, // Disable the theme switch
disableSwitch: false, // Enable the theme switch
respectPrefersColorScheme: false, // Do not change theme based on user preference
},
docs: {
Expand All @@ -101,7 +101,7 @@ const config = {
navbar: {
logo: {
alt: "Gnosis Logo",
src: "img/gnosis-logo-name.svg",
src: "img/gnosis.svg",
},
items: [
{
Expand Down Expand Up @@ -135,8 +135,8 @@ const config = {
href: "https://twitter.com/gnosischain",
html: `
<svg class="socialButton" width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="53" height="53" rx="26.5" fill="white"/>
<path d="M34.837 13.5H39.286L29.5689 24.5125L41 39.5H32.0517L25.038 30.4125L17.0224 39.5H12.5671L22.9585 27.7188L12 13.5H21.1751L27.5083 21.8062L34.837 13.5ZM33.2742 36.8625H35.7382L19.8329 16H17.1862L33.2742 36.8625Z" fill="#3E6957"/>
<rect width="53" height="53" rx="26.5" fill="#8CE8AB"/>
<path d="M34.837 13.5H39.286L29.5689 24.5125L41 39.5H32.0517L25.038 30.4125L17.0224 39.5H12.5671L22.9585 27.7188L12 13.5H21.1751L27.5083 21.8062L34.837 13.5ZM33.2742 36.8625H35.7382L19.8329 16H17.1862L33.2742 36.8625Z" fill="black"/>
</svg>
`,
position: "right",
Expand All @@ -145,8 +145,8 @@ const config = {
href: "http://discord.gg/gnosis",
html: `
<svg class="socialButton" width="53" height="53" viewBox="0 0 53 53" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="53" height="53" rx="26.5" fill="white"/>
<path d="M38.8123 15.6959C38.8025 15.6775 38.7864 15.6631 38.7668 15.6553C36.4975 14.6401 34.1028 13.9163 31.6426 13.5018C31.6202 13.4977 31.5971 13.5006 31.5766 13.5101C31.556 13.5196 31.5391 13.5352 31.5281 13.5546C31.202 14.1316 30.906 14.7244 30.6412 15.3305C27.9892 14.938 25.2916 14.938 22.6396 15.3305C22.3731 14.7228 22.0723 14.1299 21.7387 13.5546C21.7273 13.5356 21.7103 13.5204 21.6898 13.511C21.6694 13.5016 21.6465 13.4983 21.6242 13.5018C19.1637 13.9154 16.7689 14.6393 14.4999 15.6553C14.4805 15.6633 14.4641 15.677 14.453 15.6945C9.91555 22.3012 8.67257 28.7455 9.28233 35.1099C9.28405 35.1255 9.28896 35.1406 9.29678 35.1543C9.30461 35.168 9.31518 35.1801 9.32787 35.1897C11.97 37.0971 14.9252 38.553 18.0675 39.4953C18.0896 39.5018 18.1132 39.5015 18.1352 39.4945C18.1571 39.4875 18.1764 39.4741 18.1903 39.4561C18.8652 38.5608 19.4632 37.6127 19.9782 36.6215C19.9853 36.6079 19.9893 36.593 19.9901 36.5778C19.9908 36.5625 19.9882 36.5473 19.9825 36.5331C19.9768 36.519 19.968 36.5061 19.9568 36.4955C19.9456 36.4848 19.9322 36.4766 19.9175 36.4713C18.9745 36.1195 18.0616 35.6955 17.1873 35.2031C17.1714 35.194 17.1581 35.1812 17.1485 35.1659C17.1388 35.1506 17.1332 35.1332 17.1322 35.1152C17.1311 35.0973 17.1345 35.0794 17.1422 35.0631C17.1499 35.0467 17.1616 35.0325 17.1763 35.0217C17.3597 34.8876 17.5433 34.7482 17.7185 34.6075C17.7341 34.595 17.7529 34.5869 17.7729 34.5843C17.7929 34.5817 17.8132 34.5846 17.8316 34.5926C23.5595 37.1414 29.7608 37.1414 35.4209 34.5926C35.4394 34.584 35.4599 34.5808 35.4802 34.5832C35.5005 34.5856 35.5196 34.5935 35.5355 34.6061C35.7107 34.7469 35.8942 34.8876 36.079 35.0217C36.0938 35.0324 36.1056 35.0465 36.1134 35.0628C36.1212 35.0791 36.1248 35.0969 36.1239 35.1149C36.1229 35.1328 36.1174 35.1502 36.1079 35.1656C36.0984 35.181 36.0852 35.1939 36.0694 35.2031C35.1971 35.6996 34.2833 36.1234 33.3378 36.47C33.3231 36.4754 33.3098 36.4839 33.2987 36.4947C33.2876 36.5055 33.2789 36.5185 33.2733 36.5328C33.2677 36.5471 33.2652 36.5624 33.2661 36.5777C33.2669 36.593 33.2711 36.6079 33.2783 36.6215C33.802 37.6072 34.3991 38.5541 35.0649 39.4545C35.0784 39.473 35.0975 39.4869 35.1195 39.4942C35.1416 39.5015 35.1654 39.5018 35.1877 39.4952C38.3355 38.556 41.296 37.1 43.9414 35.1897C43.9543 35.1806 43.965 35.1688 43.9728 35.1553C43.9807 35.1418 43.9855 35.1267 43.9869 35.1113C44.7169 27.7533 42.7648 21.3619 38.8123 15.6959ZM20.8336 31.2346C19.1091 31.2346 17.6881 29.6916 17.6881 27.7967C17.6881 25.9017 19.0815 24.3585 20.8336 24.3585C22.5994 24.3585 24.0066 25.9151 23.979 27.7965C23.979 29.6916 22.5856 31.2346 20.8336 31.2346ZM32.4634 31.2346C30.739 31.2346 29.318 29.6916 29.318 27.7967C29.318 25.9017 30.7114 24.3585 32.4634 24.3585C34.2293 24.3585 35.6365 25.9151 35.6089 27.7965C35.6089 29.6916 34.2293 31.2346 32.4634 31.2346Z" fill="#325B4B"/>
<rect width="53" height="53" rx="26.5" fill="#8CE8AB"/>
<path d="M38.8123 15.6959C38.8025 15.6775 38.7864 15.6631 38.7668 15.6553C36.4975 14.6401 34.1028 13.9163 31.6426 13.5018C31.6202 13.4977 31.5971 13.5006 31.5766 13.5101C31.556 13.5196 31.5391 13.5352 31.5281 13.5546C31.202 14.1316 30.906 14.7244 30.6412 15.3305C27.9892 14.938 25.2916 14.938 22.6396 15.3305C22.3731 14.7228 22.0723 14.1299 21.7387 13.5546C21.7273 13.5356 21.7103 13.5204 21.6898 13.511C21.6694 13.5016 21.6465 13.4983 21.6242 13.5018C19.1637 13.9154 16.7689 14.6393 14.4999 15.6553C14.4805 15.6633 14.4641 15.677 14.453 15.6945C9.91555 22.3012 8.67257 28.7455 9.28233 35.1099C9.28405 35.1255 9.28896 35.1406 9.29678 35.1543C9.30461 35.168 9.31518 35.1801 9.32787 35.1897C11.97 37.0971 14.9252 38.553 18.0675 39.4953C18.0896 39.5018 18.1132 39.5015 18.1352 39.4945C18.1571 39.4875 18.1764 39.4741 18.1903 39.4561C18.8652 38.5608 19.4632 37.6127 19.9782 36.6215C19.9853 36.6079 19.9893 36.593 19.9901 36.5778C19.9908 36.5625 19.9882 36.5473 19.9825 36.5331C19.9768 36.519 19.968 36.5061 19.9568 36.4955C19.9456 36.4848 19.9322 36.4766 19.9175 36.4713C18.9745 36.1195 18.0616 35.6955 17.1873 35.2031C17.1714 35.194 17.1581 35.1812 17.1485 35.1659C17.1388 35.1506 17.1332 35.1332 17.1322 35.1152C17.1311 35.0973 17.1345 35.0794 17.1422 35.0631C17.1499 35.0467 17.1616 35.0325 17.1763 35.0217C17.3597 34.8876 17.5433 34.7482 17.7185 34.6075C17.7341 34.595 17.7529 34.5869 17.7729 34.5843C17.7929 34.5817 17.8132 34.5846 17.8316 34.5926C23.5595 37.1414 29.7608 37.1414 35.4209 34.5926C35.4394 34.584 35.4599 34.5808 35.4802 34.5832C35.5005 34.5856 35.5196 34.5935 35.5355 34.6061C35.7107 34.7469 35.8942 34.8876 36.079 35.0217C36.0938 35.0324 36.1056 35.0465 36.1134 35.0628C36.1212 35.0791 36.1248 35.0969 36.1239 35.1149C36.1229 35.1328 36.1174 35.1502 36.1079 35.1656C36.0984 35.181 36.0852 35.1939 36.0694 35.2031C35.1971 35.6996 34.2833 36.1234 33.3378 36.47C33.3231 36.4754 33.3098 36.4839 33.2987 36.4947C33.2876 36.5055 33.2789 36.5185 33.2733 36.5328C33.2677 36.5471 33.2652 36.5624 33.2661 36.5777C33.2669 36.593 33.2711 36.6079 33.2783 36.6215C33.802 37.6072 34.3991 38.5541 35.0649 39.4545C35.0784 39.473 35.0975 39.4869 35.1195 39.4942C35.1416 39.5015 35.1654 39.5018 35.1877 39.4952C38.3355 38.556 41.296 37.1 43.9414 35.1897C43.9543 35.1806 43.965 35.1688 43.9728 35.1553C43.9807 35.1418 43.9855 35.1267 43.9869 35.1113C44.7169 27.7533 42.7648 21.3619 38.8123 15.6959ZM20.8336 31.2346C19.1091 31.2346 17.6881 29.6916 17.6881 27.7967C17.6881 25.9017 19.0815 24.3585 20.8336 24.3585C22.5994 24.3585 24.0066 25.9151 23.979 27.7965C23.979 29.6916 22.5856 31.2346 20.8336 31.2346ZM32.4634 31.2346C30.739 31.2346 29.318 29.6916 29.318 27.7967C29.318 25.9017 30.7114 24.3585 32.4634 24.3585C34.2293 24.3585 35.6365 25.9151 35.6089 27.7965C35.6089 29.6916 34.2293 31.2346 32.4634 31.2346Z" fill="black"/>
</svg>`,
position: "right",
},
Expand Down
62 changes: 42 additions & 20 deletions src/css/custom.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,18 @@
--ifm-code-font-size: 95%;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.1);
--tab-gray: #ddd;
font-family: Karla,sans-serif;
font-family: 'Suisse Intl',sans-serif;
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
[data-theme='dark'] {
--ifm-color-primary: #e07444;
--ifm-color-primary-dark: #de6b37;
--ifm-color-primary-darker: #dc612b;
--ifm-color-primary-darkest: #d75b24;
--ifm-color-primary-light: #e4875d;
--ifm-color-primary-lighter: #e6906a;
--ifm-color-primary-lightest: #ecac8f;
--ifm-color-primary: #8CE8AB;
--ifm-color-primary-dark: #7DD299;
--ifm-color-primary-darker: #6EC487;
--ifm-color-primary-darkest: #5FB675;
--ifm-color-primary-light: #9AECB8;
--ifm-color-primary-lighter: #A8F0C5;
--ifm-color-primary-lightest: #B6F4D2;
--docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
}

Expand Down Expand Up @@ -55,7 +55,7 @@ footer.footer--dark{
// }

nav.navbar {
background-color: #3E6957;
background-color: #3F2ACD;
height: 80px;
padding: 0 2rem;
box-shadow: none;
Expand All @@ -68,11 +68,12 @@ nav.navbar {
}

.navbar__link:hover {
color: #DD7143;
color: #8CE8AB;
}

.navbar__link--active {
background-color: #DD7143;
background-color: #8CE8AB;
color: black;
font-weight: bold;
border-radius: 10px;
}
Expand Down Expand Up @@ -133,7 +134,7 @@ nav.navbar .searchBox {
padding-left: 8px;
display: flex;
align-items: center;
justify-content: center;
justify-content: center;
}

.navbar__items--right a:hover {
Expand Down Expand Up @@ -169,7 +170,7 @@ nav.navbar .searchBox {
}

.navbar-sidebar__brand {
background-color: #325b4b;
background-color: #3F2ACD;
}

// .navbar-sidebar__item li .socialButton {
Expand All @@ -182,6 +183,27 @@ nav.navbar .searchBox {
width: 38px;
}

/* Social media icons with white logos on blue background */
.navbar__items--right a svg rect,
.socialButton svg rect {
fill: #8CE8AB !important;
}

.navbar__items--right a svg path,
.socialButton svg path {
fill: black !important;
}

.navbar__items--right a:hover svg rect,
.socialButton:hover svg rect {
fill: #7DD299 !important;
}

.navbar__items--right a:hover svg path,
.socialButton:hover svg path {
fill: black !important;
}

// @media (min-width: 1301px) {
// .navbar__link::before {
// display: none;
Expand Down Expand Up @@ -385,7 +407,7 @@ html[data-theme='dark'] .install-tabs .tabs__item:first-child:hover {
}

body, h1, h2, h3, h4, h5, h6 {
font-family: 'GT Planar', sans-serif;
font-family: 'Suisse Intl', sans-serif;
}

@media (max-width: 500px) {
Expand All @@ -405,8 +427,8 @@ body, h1, h2, h3, h4, h5, h6 {
}

.custom-card {
background: #3E695766;
border: 1px solid #3E6957 !important;
background: #3F2ACD;
border: 1px solid #1A1751 !important;
border-radius: 15px;
color: white;
padding: 15px;
Expand Down Expand Up @@ -468,15 +490,15 @@ aside ul.menu__list {

.breadcrumbs__item--active .breadcrumbs__link {
color: white;
background-color: #3e6957;
background-color: #3F2ACD;
}

:root {
--doc-sidebar-hidden-width: 80px !important;
}

@media (min-width: 997px) {
.collapseSidebarButton_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-CollapseButton-styles-module,
.collapseSidebarButton_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-CollapseButton-styles-module,
.collapseSidebarButton_PEFL {
position: fixed !important;
top: 120px !important;
Expand Down Expand Up @@ -538,15 +560,15 @@ aside ul.menu__list {

.breadcrumbs__item--active .breadcrumbs__link {
color: white;
background-color: #3e6957;
background-color: #3F2ACD;
}

:root {
--doc-sidebar-hidden-width: 120px !important;
}

@media (min-width: 997px) {
.collapseSidebarButton_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-CollapseButton-styles-module,
.collapseSidebarButton_node_modules-\@docusaurus-theme-classic-lib-theme-DocSidebar-Desktop-CollapseButton-styles-module,
.collapseSidebarButton_PEFL {
position: fixed !important;
top: 120px !important;
Expand Down
Binary file added src/fonts/SuisseIntl-Light.otf
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/SuisseIntl-Light.ttf
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/SuisseIntl-Light.woff2
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/SuisseIntl-Medium.otf
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/SuisseIntl-Medium.ttf
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/SuisseIntl-Medium.woff2
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/SuisseIntl-Regular.otf
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/SuisseIntl-Regular.ttf
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/SuisseIntl-Regular.woff2
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/SuisseIntl-Semibold.otf
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/SuisseIntl-Semibold.ttf
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/SuisseIntl-Semibold.woff2
View file
Open in desktop
Binary file not shown.
143 changes: 81 additions & 62 deletions src/pages/index.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,26 +2,45 @@
* CSS files with the .module.css suffix will be treated as CSS modules
* and scoped locally.
*/
@font-face {
font-family: 'GT Planar';
src: url("../fonts/GT-Planar-Regular.woff2") format("woff2"),
url("../fonts/GT-Planar-Regular.woff") format("woff")
url("../fonts/GT-Planar-Regular.ttf") format("true-type");
font-weight: normal;
font-style: normal;

@font-face {
font-family: "Suisse Intl";
src:
url("../fonts/SuisseIntl-Regular.woff2") format("woff2"),
url("../fonts/SuisseIntl-Regular.ttf") format("truetype");
font-weight: normal;
font-style: normal;
}

@font-face {
font-family: "Suisse Intl";
src:
url("../fonts/SuisseIntl-Medium.woff2") format("woff2"),
url("../fonts/SuisseIntl-Medium.ttf") format("truetype");
font-weight: 500;
font-style: normal;
}

@font-face {
font-family: "Suisse Intl";
src:
url("../fonts/SuisseIntl-Semibold.woff2") format("woff2"),
url("../fonts/SuisseIntl-Semibold.ttf") format("truetype");
font-weight: 600;
font-style: normal;
}

.homePage {
background: linear-gradient(0deg, #133629 0%, #3E6957 100%) !important;
background: linear-gradient(180deg, #3f2acd 0%, #151629 100%) !important;
}

.fixedLine {
position: sticky;
top: 0;
left: 3%;
width: 94%;
height: 1.5px;
background-color: white;
position: sticky;
top: 0;
left: 3%;
width: 94%;
height: 1.5px;
background-color: white;
}

.homePage h1,
Expand All @@ -30,86 +49,86 @@
.homePage h4,
.homePage h5,
.homePage span {
font-family: 'GT Planar', sans-serif;
color: #F0EBDE;
font-family: "Suisse Intl", sans-serif;
color: #f0ebde;
}

.container {
color: white !important;
color: white !important;
}

.announcementBarContent {
color: rgb(9, 30, 66) !important;
color: rgb(9, 30, 66) !important;
}

.homePage h1 {
font-size: 2rem;
font-size: 2rem;
}

.heroBanner {
padding: 3rem 0 2rem 0;
text-align: center;
position: relative;
overflow: hidden;
background-color: transparent;
display: flex;
flex-direction: column;
width: 100%;
padding: 3rem 0 2rem 0;
text-align: center;
position: relative;
overflow: hidden;
background-color: transparent;
display: flex;
flex-direction: column;
width: 100%;
}

.heroBanner img {
max-width: 550px;
max-width: 550px;
}

@media screen and (max-width: 1000px) {
.heroBanner {
padding: 2rem;
}
.heroBanner {
padding: 2rem;
}
}

/* general flex column */
.flexCol {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}

.copyField {
padding: 8px 14px 8px 14px;
border-radius: 10px;
border: 1px solid #F0EBDE;
width: fit-content;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-width: 300px;
padding: 8px 14px 8px 14px;
border-radius: 10px;
border: 1px solid #f0ebde;
width: fit-content;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
min-width: 300px;
}

@media screen and (max-width: 320px) {
.copyField {
width: 100%;
min-width: 100%;
}

.homePage h1 {
font-size: 1.5rem;
}

.homePage h2 {
font-size: 1.2rem;
}
.copyField {
width: 100%;
min-width: 100%;
}

.homePage h1 {
font-size: 1.5rem;
}

.homePage h2 {
font-size: 1.2rem;
}
}

.iconButton {
background-color: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
background-color: transparent;
border: none;
display: flex;
align-items: center;
justify-content: center;
}

.icon:hover {
transition: transform 0.3s ease;
transform: scale(1.2);
transition: transform 0.3s ease;
transform: scale(1.2);
}
2 changes: 1 addition & 1 deletion static/img/features/bridge.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading