Skip to content

Commit

Permalink
New brand page (#634)
Browse files Browse the repository at this point in the history 
* add token icon

* wip

* wip

* add colors and guidelines

* add ens brand guidelines

* qa fixes
  • Loading branch information
@talentlessguy
talentlessguy authored Oct 3, 2024
1 parent 6f6a4eb commit 67b57f8
Show file tree
Hide file tree
Showing 13 changed files with 374 additions and 35 deletions.
26 changes: 24 additions & 2 deletions locales/en/translation.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -247,6 +247,11 @@
"description": "You're free to use the ENS brand in the ecosystem, no permission needed! Just remember, don't use it to pretend to be ENS, ENS DAO, or ENS Labs, or to suggest a partnership that does not exist."
},
"button": "Download All",
"links": {
"symbols": "Symbols",
"palettes": "Palettes",
"guidelines": "Guidelines"
},
"assets": {
"title": "Brand Assets",
"description": "ENS's brand can be represented using any of our colors, but we prefer Blue, Black, and White.",
Expand All @@ -259,12 +264,29 @@
"description": "Utilize the full lock-up when you need to show the full ENS branded asset. This is also useful for more horizontally-aligned assets."
},
"guidelines": {
"title": "Guidelines",
"description": "If you're unsure of our guidelines and how your project would align, please get in touch."
"title": "Usage Guidelines",
"description": "You can download a PDF version of the ENS brand guidelines which include detailed documentation on how to use brand colours, assets and typography. If you’re unsure of our guidelines and how your project would align, please get in touch.",
"button": "Download Brand PDF"
},
"space": {
"title": "Clear Space",
"description": "Make sure there is enough clear space when using the logo, such that there is enough room for everything to breathe.\nA good rule of thumb is at least 1/3 of the width of the ENS symbol."
},
"token": {
"title": "Icon",
"description": "The icon is used to represents ENS as an avatar and the $ENS token."
},
"palette": {
"title": "Brand Palette",
"description": "ENS's brand can be represented using any of our colors. Please keep in mind that the colors are not a “one-size-fits-all”.",
"primary": {
"title": "Primary Palette",
"description": "Below is the primary color palette for the ENS brand."
},
"secondary": {
"title": "Extended Color Palette",
"description": "Below are the scondary color palettes to be used for creating creative collateral for the ENS brand."
}
}
},
"extra": {
Expand Down
Binary file added public/assets/brand/ENS Brand Guidelines.pdf
View file
Binary file not shown.
20 changes: 20 additions & 0 deletions public/assets/brand/guidelines.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/assets/brand/token-icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
7 changes: 7 additions & 0 deletions public/assets/brand/token-icon.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions src/app/(root)/brand/page.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,22 @@
height: 100%;
}

.colorGrid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
grid-auto-flow: dense;
gap: 1rem;
}

.guidelines {
display: flex;
flex-direction: column;
gap: 40px;
}
.guidelines img {
width: 100%;
}

@media (min-width: 768px) {
.headerContent {
grid-template-columns: repeat(2, 1fr);
Expand All @@ -118,6 +134,9 @@
.blueprint {
grid-template-columns: 1fr 2fr;
}
.colorGrid {
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
}

@media (min-width: 1280px) {
Expand All @@ -128,6 +147,9 @@
grid-template-columns: repeat(3, minmax(10vw, 450px));
grid-template-rows: repeat(1, minmax(10vw, 450px));
}
.colorGrid {
grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
}
.assetGrid > figure {
padding: 120px;
}
Expand Down
217 changes: 186 additions & 31 deletions src/app/(root)/brand/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,126 @@ import { readdir } from 'node:fs/promises';
import { useTranslation } from '~/i18n/useTranslation';
import ui from '~/styles/ui.module.css';
import styles from './page.module.css';
import { PageProps } from '~/utils/types';
import { BrandColorObject, PageProps } from '~/utils/types';
import { AssetDownloadButton } from '~/components/brand/AssetDownloadButton';
import type { Metadata } from 'next';
import { LinkList } from '~/components/LinkList/LinkList';
import { BrandColor } from '~/components/brand/BrandColor';
import { ExternalLink } from 'react-external-link';

const common = './public/assets/brand';

const primaryPalette: BrandColorObject[] = [
{
name: 'ENS Blue',
hex: '#0080BC',
RGB: '0, 128, 188',
textColor: 'white',
CMYK: '84%, 41%, 5%, 0%',
},
{
name: 'Light Blue',
hex: '#CEE1E8',
RGB: '206, 255, 232',
textColor: 'black',
CMYK: '18%, 4%, 6%, 0%',
},
{
name: 'Dark Blue',
hex: '#011A25',
RGB: '1, 26, 37',
textColor: 'white',
CMYK: '88%, 71%, 59%, 72%',
},
{
name: 'White',
hex: '#f6f6f6',
RGB: '255, 255, 255',
textColor: 'black',
CMYK: '2%, 2%, 2%, 0%',
},
];

const extendedPalette: BrandColorObject[] = [
{
name: 'Green',
hex: '#007C23',
RGB: '44, 24, 172',
CMYK: '88%, 26%, 100%, 15%',
textColor: 'white',
},
{
name: 'Magenta',
hex: '#F53293',
RGB: '218, 94, 204',
CMYK: '0%, 92%, 1%, 0%',
textColor: 'white',
},
{
name: 'Yellow',
hex: '#FFF72F',
RGB: '240, 223, 19',
CMYK: '4%, 0%, 87%, 0%',
textColor: 'black',
},
{
name: 'Dark Brown',
hex: '#674D49',
RGB: '103, 77, 73',
CMYK: '50%, 63%, 61%, 34%',
textColor: 'white',
},
{
name: 'Light Green',
hex: '#C5DDCC',
RGB: '197, 221, 204',
CMYK: '23%, 3%, 22%, 0%',
textColor: 'black',
},
{
name: 'Light Magenta',
hex: '#F2C4DA',
RGB: '242, 196, 218',
CMYK: '2%, 27%, 1%, 0%',
textColor: 'black',
},
{
name: 'Light Yellow',
hex: '#F8F6D6',
RGB: '248, 246, 214',
CMYK: '3%, 1%, 19%, 0%',
textColor: 'black',
},
{
name: 'Midnight Blue',
hex: '#093C52',
RGB: '9, 60, 82',
CMYK: '89%, 27%, 0%, 68%',
textColor: 'white',
},
{
name: 'Gray',
hex: '#4A5C63',
RGB: '74, 92, 99',
CMYK: '26%, 7%, 0%, 61%',
textColor: 'white',
},
{
name: 'Gray 3',
hex: '#C4C7C8',
RGB: '196, 199, 200',
CMYK: '2%, 0%, 0%, 22%',
textColor: 'black',
},
{
name: 'Gray 2',
hex: '#E5E5E5',
RGB: '229, 229, 229',
CMYK: '9%, 6%, 7%, 0%',
textColor: 'black',
},
];

const filesToPaths = (files: string[], dir: string) => files.filter(x => x.endsWith('.svg')).map(x => `${common.replace('./public', '')}/${dir}/${x}`);
const filenameToVariantName = (file: string) => file.slice(file.lastIndexOf('-') + 1, file.indexOf('.svg')).replace('_', ' ');

Expand Down Expand Up @@ -38,17 +151,16 @@ export default async function Brand({ params }: PageProps) {
const { markLogos, logos } = await getStaticProps();

return (
<div className={ui.page}>
<div className={clsx(ui.page)}>
<header className={clsx(ui.flex, ui['flex-col'], styles.headerLayout)}>
<h1>{t('brand.header.title')}</h1>
<div className={styles.headerContent}>
<ul className={styles.linkList}>
<li><a href="#symbol">{t('brand.assets.symbol.title')}</a></li>
<li><a href="#lockup">{t('brand.assets.lockup.title')}</a></li>
<li><a href="#guidelines">{t('brand.assets.guidelines.title')}</a></li>
<li><a href="#symbol">{t('brand.links.symbols')}</a></li>
<li><a href="#palettes">{t('brand.links.palettes')}</a></li>
<li><a href="#guidelines">{t('brand.links.guidelines')}</a></li>
</ul>
<p className={ui['max-w-text']}>{t('brand.header.description')}</p>

</div>
</header>
<section className={clsx(ui.flex, ui['flex-col'], styles.content)}>
Expand Down Expand Up @@ -83,41 +195,84 @@ export default async function Brand({ params }: PageProps) {
<p className={ui['max-w-text']}>{t('brand.assets.space.description')}</p>
</div>
</div>
</section>
<section id="lockup" className={clsx(ui.flex, ui['flex-col'], styles.content)}>
<div className={styles.assetsDescription}>
<a download href="/assets/brand/mark.zip" className={styles.downloadButton}>{t('brand.button')}</a>
<h5 className={styles.contentTitle}>{t('brand.assets.lockup.title')}</h5>
<p className={ui['max-w-text']}>{t('brand.assets.lockup.description')}</p>
</div>
<div className={styles.assetGrid}>
{Object.entries(logos).map(([name, url]) => (
<figure key={url}>
<img src={url} alt="" height={230} width={201} />
<AssetDownloadButton links={[
{ title: 'PNG', url: url.replace('svg', 'png') },
{ title: 'SVG', url },
]}
/>
<figcaption>{name}</figcaption>
</figure>
))}
</div>
<div className={clsx(styles.assetGrid, styles.blueprint)}>
<figure>
<img src="/assets/brand/token-icon.svg" alt="Logo Blueprint" width={358} height={358} />
<AssetDownloadButton links={[
{ title: 'SVG', url: '/assets/brand/token-icon.svg' },
{ title: 'PNG', url: '/assets/brand/token-icon.png' },
]}
/>
</figure>
<div>
<img src="/assets/brand/logo-text-blueprint.svg" alt="Logo with text blueprint" width={358} height={358} />
<h5 className={styles.contentTitle}>{t('brand.assets.token.title')}</h5>
<p className={ui['max-w-text']}>{t('brand.assets.token.description')}</p>
</div>
<div>
<h5 className={styles.contentTitle}>{t('brand.assets.space.title')}</h5>
<p className={ui['max-w-text']}>{t('brand.assets.space.description')}</p>
</div>
<div id="lockup" className={clsx(ui.flex, ui['flex-col'], styles.content)}>
<div className={styles.assetsDescription}>
<a download href="/assets/brand/mark.zip" className={styles.downloadButton}>{t('brand.button')}</a>
<h5 className={styles.contentTitle}>{t('brand.assets.lockup.title')}</h5>
<p className={ui['max-w-text']}>{t('brand.assets.lockup.description')}</p>
</div>
<div className={styles.assetGrid}>
{Object.entries(logos).map(([name, url]) => (
<figure key={url}>
<img src={url} alt="" height={230} width={201} />
<AssetDownloadButton links={[
{ title: 'PNG', url: url.replace('svg', 'png') },
{ title: 'SVG', url },
]}
/>
<figcaption>{name}</figcaption>
</figure>
))}
</div>
<div className={clsx(styles.assetGrid, styles.blueprint)}>
<div>
<img src="/assets/brand/logo-text-blueprint.svg" alt="Logo with text blueprint" width={358} height={358} />
</div>
<div>
<h5 className={styles.contentTitle}>{t('brand.assets.space.title')}</h5>
<p className={ui['max-w-text']}>{t('brand.assets.space.description')}</p>
</div>
</div>
</div>
</section>

<section className={clsx(ui.flex, ui['flex-col'], styles.content)} id="palettes">
<div className={clsx(ui.flex, ui['flex-col'], styles.sectionDescription)}>
<h4>{t('brand.assets.palette.title')}</h4>
<p className={ui['max-w-text']}>{t('brand.assets.palette.description')}</p>
</div>
<div className={styles.assetsDescription}>
<h5 className={styles.contentTitle}>{t('brand.assets.palette.primary.title')}</h5>
<p className={ui['max-w-text']}>{t('brand.assets.palette.primary.description')}</p>
</div>
<div className={styles.colorGrid}>
{primaryPalette.map(color => <BrandColor {...color} key={color.name} />)}
</div>
<div className={styles.assetsDescription}>
<h5 className={styles.contentTitle}>{t('brand.assets.palette.secondary.title')}</h5>
<p className={ui['max-w-text']}>{t('brand.assets.palette.secondary.description')}</p>
</div>
<div className={styles.colorGrid}>
{extendedPalette.map(color => <BrandColor {...color} key={color.name} />)}
</div>
</section>

<section id="guidelines">
<LinkList links={[
{
title: t('brand.assets.guidelines.title'),
description: t('brand.assets.guidelines.description'),
description: (
<div className={styles.guidelines}>
<div>{t('brand.assets.guidelines.description')}</div>
<ExternalLink className={ui.button} href="/assets/brand/ENS Brand Guidelines.pdf">
{t('brand.assets.guidelines.button')}
</ExternalLink>
</div>
),
},
{
title: t('brand.extra.partnerships.title'),
Expand Down
5 changes: 5 additions & 0 deletions src/components/LinkList/LinkList.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,6 +52,11 @@
width: 12px;
}

.paragraph {
max-width: 550px;
width: 100%;
}

@media (min-width: 768px) {
.list > li {
grid-template-columns: 1fr 1fr;
Expand Down
3 changes: 2 additions & 1 deletion src/components/LinkList/LinkList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import type { FC, ReactNode } from 'react';
import ui from '~/styles/ui.module.css';
import styles from './LinkList.module.css';
import { ExternalLink } from 'react-external-link';
import { clsx } from 'clsx';

export type ILink = {
title: string;
Expand All @@ -27,7 +28,7 @@ export const LinkList: FC<{ links: ILink[] }> = ({ links }) => {
: (
<span>{title}</span>
)}
<p className={ui.serif}>{description}</p>
<p className={clsx(ui.serif, styles.paragraph)}>{description}</p>
</li>
))}
</ul>
Expand Down
Loading

0 comments on commit 67b57f8

Please sign in to comment.