all new brand assets, folder reorg

README.md

@@ -2,100 +2,54 @@
 
 <h1 align="center">art</h1>
 
-> 🐬 Ocean Protocol's assets for community distribution.
+> 🐬 Ocean Protocol's brand assets for community distribution.
 
 [![npm](https://img.shields.io/npm/v/@oceanprotocol/art.svg)](https://www.npmjs.com/package/@oceanprotocol/art)
 
-All assets in this repo can also be viewed and downloaded from [oceanprotocol.com/art](https://oceanprotocol.com/art). You'll find a living styleguide there too.
+All assets in this repo can also be viewed and downloaded from [oceanprotocol.com/art](https://oceanprotocol.com/art). You'll find a living style guide there too.
 
-- [Repository Contents](#repository-contents)
+- [Brand Assets](#brand-assets)
-- [Typography](#typography)
 - [Usage](#usage)
-  - [Use as npm package](#use-as-npm-package)
+- [Typography](#typography)
-  - [Use as a submodule](#use-as-a-submodule)
-  - [Usage in JavaScript/React](#usage-in-javascriptreact)
 - [License](#license)
 
 ---
 
-## Repository Contents
+## Brand Assets
 
 - [Logo](logo/)
 - [Banner](banner/)
-- [Jellyfish](jellyfish/)
+- [Creatures](creatures/)
-- [Manta ray](mantaray/)
-- [Squid](squid/)
 - [GitHub](github/)
 
-## Typography
-
-Our branding typefaces are [Sharp Sans Medium/Bold](https://sharptype.co/typefaces/sharp-sans/#features) in use as body text, and [Sharp Sans Display No. 1 Bold](https://sharptype.co/typefaces/sharp-sans-display-no1/) 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.
-
-If you only need them for use on the web, you can grab them from inside the private `site` repo's [fonts folder](https://github.com/oceanprotocol/site/tree/master/public/fonts).
-
 ## Usage
 
 It's encouraged to use this repo as a dependency within your projects to keep the assets in sync.
 
-### Use as npm package
-
 The whole repo is published as a npm module so just run for installation:
 
 ```bash
 npm i @oceanprotocol/art
 ```
 
-### Use as a submodule
+Then in your app, you can import the required assets:
 
- From the root of your project folder execute the following to put the submodule under `lib/art/`:
+```jsx
+import logo from '@oceanprotocol/art/logo/logo.svg'
 
-```bash
+function MyComponent() {
-git submodule add git@github.com:oceanprotocol/art.git lib/art
+  return <img src={logo} />
-```
-
-Then, from time to time, update the submodule to get latest upstream changes:
-
-```bash
-# 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:
-
-```js
-import Logo from '@oceanprotocol/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](https://github.com/smooth-code/svgr) into your build process to import SVG assets as actual React components:
-
-```js
-import Logo from '@oceanprotocol/art/logo/logo.svg'
-
-<Logo className="logo" />
-```
-
-And then style away in CSS:
-
-```css
-.logo {
-    fill: #141414;
-    stroke: none;
 }
 ```
 
+## Typography
+
+Our branding typefaces are [Sharp Sans Medium/Bold](https://sharptype.co/typefaces/sharp-sans/#features) in use as body text, and [Sharp Sans Display No. 1 Bold](https://sharptype.co/typefaces/sharp-sans-display-no1/) 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.
+
+If you only need them for use on the web, you can grab them from inside the private `site` repo's [fonts folder](https://github.com/oceanprotocol/site/tree/master/src/global/fonts).
+
 ## License
 
 All assets are licensed under a [Creative Commons Attribution 4.0 International License](http://creativecommons.org/licenses/by/4.0/).

banner/README.md

@@ -5,11 +5,3 @@ Spruce up your blog posts with these Ocean Protocol banners.
 ![Ocean Banner 1](banner-ocean-01@2x.png)
 
 ![Ocean Banner 2](banner-ocean-02@2x.png)
-
-![Ocean Banner 3](banner-ocean-03@2x.png)
-
-![Ocean Banner 4](banner-ocean-04@2x.png)
-
-![Ocean Banner 5](banner-ocean-05@2x.png)
-
-![Ocean Banner 6](banner-ocean-06@2x.png)

creatures/README.md

@@ -0,0 +1,12 @@
+# Ocean Protocol Creatures
+
+Use any of the variations of the Ocean Protocol creatures. Make sure to place the full versions on a dark background like our black (#141414).
+
+<img src="jellyfish/jellyfish-grid.svg" width="400" />
+<img src="jellyfish/jellyfish-full.svg" width="400" />
+
+<img src="mantaray/mantaray-grid.svg" width="400" />
+<img src="mantaray/mantaray-full.svg" width="400" />
+
+<img src="squid/squid-grid.svg" width="400" />
+<img src="squid/squid-full.svg" width="400" />

jellyfish/README.md

@@ -1,7 +0,0 @@
-# Ocean Protocol Jellyfish
-
-Use any of the variations of the Ocean Protocol jellyfish. Make sure to always place it on a dark background like our black (#141414).
-
-<img src="jellyfish-full.svg" width="400" />
-<img src="jellyfish-grid.svg" width="400" />
-<img src="jellyfish-back-fill.svg" width="400" />

mantaray/README.md

@@ -1,7 +0,0 @@
-# Ocean Protocol Mantaray
-
-Use any of the variations of the Ocean Protocol jellyfish. Make sure to always place it on a dark background like our black (#141414).
-
-<img src="mantaray-full.svg" width="400" />
-<img src="mantaray-grid.svg" width="400" />
-<img src="mantaray-back-fill.svg" width="400" />

squid/README.md

@@ -1,7 +0,0 @@
-# Ocean Protocol Squid
-
-Use any of the variations of the Ocean Protocol squid. Make sure to always place it on a dark background like our black (#141414).
-
-<img src="squid-full.svg" width="400" />
-<img src="squid-grid.svg" width="400" />
-<img src="squid-back-fill.svg" width="400" />