🐬 Ocean Protocol's assets for community distribution.
Go to file
Matthias Kretschmann 59c772c89c
document all assets
2018-04-23 12:54:56 +02:00
banner document all assets 2018-04-23 12:54:56 +02:00
github document all assets 2018-04-23 12:54:56 +02:00
jellyfish document all assets 2018-04-23 12:54:56 +02:00
logo document all assets 2018-04-23 12:54:56 +02:00
LICENSE document all assets 2018-04-23 12:54:56 +02:00
README.md document all assets 2018-04-23 12:54:56 +02:00

README.md

art

🐳 Ocean Protocol's assets for community distribution.

All assets in this repo can also be viewed and downloaded from oceanprotocol.com/art. You'll find a living styleguide there too.

Repository Contents

Typography

Our branding typefaces are Sharp Sans Medium/Bold in use as body text, and Sharp Sans Display No. 1 Bold for headings.

Those are commercial fonts and the license doesn't allow us to distribute them. Hence you won't find them in this repository. If you're a member of the Ocean Protocol team ask a designer to hand you the font files.

Usage

It's encouraged to use this repo as a submodule within your projects to keep the assets in sync. From the root of your project folder execute the following to put the submodule under lib/art/:

git submodule add git@github.com:oceanprotocol/art.git ./lib/art

Then, fom time to time, update the submodule to get latest upstream changes:

# go into submodule folder
cd ./lib/art
git checkout master
git pull
# get back to your project root
cd ../../

# or if you're a busy person, update all your submodules at once from the root of your project
git submodule foreach git pull origin master

Usage in JavaScript/React

Import the required assets into your project, which will return the file source path:

import Logo from './lib/art/logo/logo.svg'

<img src={Logo} />

But you usually want SVG assets to be inlined for full control over styling with CSS. To achieve that, you can incorporate svgr into your build process to import SVG assets as actual React components:

import Logo from './lib/art/logo/logo.svg'

<Logo className="logo" />

And then style away in CSS:

.logo {
    fill: #141414;
    stroke: none;
}

License

All assets are licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.