Skip to content

Commit

Permalink
ADD visual identity page
Browse files Browse the repository at this point in the history
  • Loading branch information
@hazuremon @MattReimer
hazuremon authored and MattReimer committed Jan 15, 2024
1 parent 7e2090b commit 1d5a57f
Showing 1 changed file with 292 additions and 1 deletion.
293 changes: 292 additions & 1 deletion content/page/documentation/visual-identity.mdx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,297 @@
---
title: Visual Identity
banner: true
banner: false
isHome: true
description: Assets and rules for using the Riverscapes Visual Identity
---

import { Container, Card, CardActionArea, CardMedia, CardContent, Typography } from '@mui/material'

import HeroImage from '/static/images/background-hero.jpg'
import ImageColor from '/static/images/visual-identity/colors.jpg'
import ImageBanners from '/static/images/visual-identity/banners.jpg'
import ImageRCMain from '/static/images/visual-identity/RC_main.png'
import ImageVI from '/static/images/visual-identity/Visual_Identity_Guide.jpg'
import ImageJetbrains from '/static/images/visual-identity/jetbrains.jpg'
import ImageKarla from '/static/images/visual-identity/karla.jpg'
import ImageMUI from '/static/images/visual-identity/mui-templates.jpg'
import ImagePresentations from '/static/images/visual-identity/presentations.jpg'
import ImageDocs from '/static/images/visual-identity/documents.jpg'
import LogoRC from '/static/images/visual-identity/RC_app.png'
import LogoBRAT from '/static/images/visual-identity/BRAT_logo.png'
import LogoChannel from '/static/images/visual-identity/Channel_area.png'
import LogoDataExchange from '/static/images/visual-identity/Data_exchange.png'
import LogoGCD from '/static/images/visual-identity/GCD_logo.png'
import LogoLTPBR from '/static/images/visual-identity/ltpbr-logo.png'
import LogoQRIS from '/static/images/visual-identity/QRIS_logo.png'
import LogoRiverscapesEngine from '/static/images/visual-identity/Riverscapes_engine.png'
import LogoTaudem from '/static/images/visual-identity/Taudem.png'
import LogoGatsby from '/static/images/visual-identity/gatsby-logo.jpg'
import LogoVBET from '/static/images/visual-identity/VBET_logo.png'
import LogoViewer from '/static/images/visual-identity/Viewer_logo.png'


<Hero
image={HeroImage}
>
> Welcome to the Riverscapes Consortium (RC) brand assets hub
Explore and download graphics, digital assets, templates, and guidelines for the RC brand to create visual consistency across various channels.

</Hero>
<Container maxWidth="xl" sx={{mb: 4}}>
# Visual identity guide & logo
<Grid container space={2}>
<Grid container spacing={4} sx={{mt: 3}} padding={0}>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={ImageVI}
imgAlt="Visual Identity Guide"
to="https://drive.google.com/file/d/1pOrOYZAClBOlu_aItwcrWLeHpJytdQlB/view?usp=sharing"
heading="Visual identity guide"
headingVariant="h5"
>
<Typography variant="body2">Your first stop to logo guidelines, typography sets, color codes, and more.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={ImageRCMain}
imgAlt="RC main logo"
to="https://drive.google.com/drive/folders/1TRXi57gOOdcuAM06DnPpkgpUmzsGvhoY?usp=drive_link"
heading="RC main logo"
headingVariant="h5"
>
<Typography variant="body2">Logo files with various lock-ups (horizontal, stacked, wide) in all colour combinations.</Typography>
</ImgCard>
</Grid>
</Grid>
</Grid>
# Typefaces & colour palette
<Grid container space={2}>
<Grid container spacing={4} sx={{mt: 3}} padding={0}>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={ImageJetbrains}
imgAlt="Typeface"
to="https://fonts.google.com/specimen/JetBrains+Mono"
heading="JetBrains Mono typeface"
headingVariant="h5"
>
<Typography variant="body2">Generally used for headings. Fallback font - Courier New. Download the font files on Google fonts</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={ImageKarla}
imgAlt="Karla typeface"
to="https://fonts.google.com/specimen/Karla"
heading="Karla typeface"
headingVariant="h5"
>
<Typography variant="body2">Generally used for body text. Fallback font - Arial. Download the font files on Google fonts</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={ImageColor}
imgAlt="Color Palette"
to="https://drive.google.com/file/d/1xB66r5qwr8hul6EAKjZQvpbETmQHZUiO/view?usp=drive_link"
heading="Color palettes"
headingVariant="h5"
>
<Typography variant="body2">Main blue #004793 | Main teal #21BFD4 | Main green #BBCD3<br />View all color codes for various use cases. MUI light/dark modes.</Typography>
</ImgCard>
</Grid>
</Grid>
</Grid>
# App & model logos & templates
<Grid container space={2}>
<Grid container spacing={4} sx={{mt: 3}} padding={0}>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoRC}
imgAlt="RC logo"
to="https://drive.google.com/drive/folders/1dRTVydrFqvkQQu-n_oaFIGm-jJVOBmKn?usp=drive_link"
heading="RC app and model logo templates"
headingVariant="h5"
>
<Typography variant="body2">RC app logo template files made for Adobe Illustrator, exportable in various formats and sizes.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoBRAT}
imgAlt="BRAT logo"
to="https://drive.google.com/drive/folders/1YXlpF613EpDEvKGqIwUNyjOpF-G018ib?usp=drive_link"
heading="BRAT logo"
headingVariant="h5"
>
<Typography variant="body2">Logo with wordmark (black text, white text) and icon only.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoChannel}
imgAlt="Channel Area Project logo"
to="https://drive.google.com/drive/folders/1rkhDOEd3ju-7n2cYE9gg4Y2YVMA8PzyG?usp=drive_link"
heading="Channel Area Project logo"
headingVariant="h5"
>
<Typography variant="body2">Logo with wordmark (black text, white text) and icon only.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoDataExchange}
imgAlt="Data Exchange logo"
to="https://drive.google.com/drive/folders/1rkhDOEd3ju-7n2cYE9gg4Y2YVMA8PzyG?usp=drive_link"
heading="Data Exchange logo"
headingVariant="h5"
>
<Typography variant="body2">Logo with wordmark (black text, white text) and icon only.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoGCD}
imgAlt="GCD logo"
to="https://drive.google.com/drive/folders/1mwDh6f4ut47Zg_6JGw51gyuS96nQIxGF?usp=drive_link"
heading="GCD logo"
headingVariant="h5"
>
<Typography variant="body2">Logo with wordmark (black text, white text) and icon only.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoLTPBR}
imgAlt="LT-BPR logo"
to="https://drive.google.com/drive/folders/199-xTUEaZ3QIGemOU6XcvB5dLNCow6GP?usp=drive_link"
heading="LT-BPR logo"
headingVariant="h5"
>
<Typography variant="body2">Logo with wordmark (black text, white text) and icon only.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoQRIS}
imgAlt="QRIS logo"
to="https://drive.google.com/drive/folders/1rztR4WpWGsibpvoeQYpdDJw6omPjO24w?usp=drive_link"
heading="QRIS logo"
headingVariant="h5"
>
<Typography variant="body2">Logo with wordmark (black text, white text) and icon only.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoRiverscapesEngine}
imgAlt="Riverscapes Metric Engine logo"
to="https://drive.google.com/drive/folders/1AOvCO7Mhhr7OM22zMOwgOxJGbe-P3Thg?usp=drive_link"
heading="Riverscapes Metric Engine logo"
headingVariant="h5"
>
<Typography variant="body2">Logo with wordmark (black text, white text) and icon only.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoTaudem}
imgAlt="Taudem logo"
to="https://drive.google.com/drive/folders/1wqZxqMulha4ew68Ba-_VGcTPjL8EGyGV?usp=drive_link"
heading="Taudem logo"
headingVariant="h5"
>
<Typography variant="body2">Logo with wordmark (black text, white text) and icon only.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoVBET}
imgAlt="VBET logo"
to="https://drive.google.com/drive/folders/1mJLtLnbnAt7tyBisr4tS80JASm6zwbei?usp=drive_link"
heading="VBET logo"
headingVariant="h5"
>
<Typography variant="body2">Logo with wordmark (black text, white text) and icon only.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoViewer}
imgAlt="Viewer logo"
to="https://drive.google.com/drive/folders/1BLEap70o6jJ7ADlbwGUaMxvrRZXtZ3_-?usp=drive_link"
heading="Viewer logo"
headingVariant="h5"
>
<Typography variant="body2">Logo with wordmark (black text, white text) and icon only.</Typography>
</ImgCard>
</Grid>
</Grid>
</Grid>
# MUI templates & banner images
<Grid container space={2}>
<Grid container spacing={4} sx={{mt: 3}} padding={0}>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={ImageMUI}
imgAlt="MUI components & templates"
to="https://drive.google.com/drive/folders/1GIGPcBCb2oiPAIihU4wspytA50dR3zm1?usp=drive_link"
heading="MUI components & templates"
headingVariant="h5"
>
<Typography variant="body2">MUI components styled with RC colors and fonts - dark and light modes.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={ImageBanners}
imgAlt="Banner images"
to="https://drive.google.com/drive/folders/1tfLRGpyJDDy3kLjMluPSCUIjxvas417y?usp=drive_link"
heading="Banner images"
headingVariant="h5"
>
<Typography variant="body2">Options for web and apps.</Typography>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={LogoGatsby}
imgAlt="Gatsby logo"
to="https://developer.riverscapes.net/documentation/"
heading="Gatsby theme"
headingVariant="h5"
>
<Typography variant="body2">Use MUI components styled with RC colors in fonts, packaged in a Gatsby theme.</Typography>
</ImgCard>
</Grid>
</Grid>
</Grid>
# Document templates
<Grid container space={2}>
<Grid container spacing={4} sx={{mt: 3}} padding={0}>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={ImageDocs}
imgAlt="Google Docs template"
to="https://docs.google.com/document/d/19CkvqARst-OtAdvw8EEkiuVke6X5BCFvQvCrjkKUqlk/edit?usp=drive_link"
heading="Google Docs template"
headingVariant="h5"
>
</ImgCard>
</Grid>
<Grid item xs={12} md={6} lg={3}>
<ImgCard
img={ImagePresentations}
imgAlt="Google Slides template"
to="https://docs.google.com/presentation/d/1QM5oTP-YT_9c9lZTOHhU6oZcqhj0pzRCUTZ3vLL6xYo/edit?usp=drive_link"
heading="Google Slides template"
headingVariant="h5"
>
</ImgCard>
</Grid>
</Grid>
</Grid>
</Container>

0 comments on commit 1d5a57f

Please sign in to comment.