Stylescape

Brand Assets & Visual Identity Guide

Contents

• Logo
• Typography
• Color
• Graphics
• Diagrams
• Elements
• Colophon

Welcome to the official Brand Repository of Stylescape

Introduction

This repository is an all-inclusive resource of our brand identity, encapsulating our ethos, vision, and the graphical elements that distinguish us in the global arena of architectural innovation.

Logo

(Back to top)

Logomark

| Variant | PNG | SVG | WEBP | JPG | | :---------- | ----- | ----- | ----- | ----- | | dark | | | | | | dark transparant | | | | | | gray | | | | | | gray transparant | | | | | | light | | | | | | light transparant | | | | |

Logotype

Will be provided shortly.

Favicon

Badge

Share that your organisation or project endorses Stylescape by adding our badge to your readme or website.

Will be provided shortly.

Typography

Main Display Font

We us Barlow.

• Creators: Jeremy Tribby (Principal Design) and Nguyễn Hồng Nhung (Vietnamese)
• Repository: jpt/barlow
• License: OFL
• GIF courtesy of the original creators.

Secondary Font

Will be provided shortly.

Text Conventions

Brand Name

Capitalize the first "S" in "Stylescape" in all copy text. Stylescape should only be presented in all uppercase when displayed in our official logos; e.g.: "STYLESCAPE". In code, "stylescape" is all lowercase / snakecase.

• ✓ STYLESCAPE (in Logo)
• ✓ Stylescape (in Text)
• ✓ stylescape (in Code)
• × StyleScape
• × stylescape
• × Style-scape
• × Style scape
• × Style Acape

Headers

All headers are written in Title Case.

Color

Base Colors

| | Color | HEX | RGB | HSL | HSB | CMYK | | --------- | --------- | --------- | --------- | --------- | --------- | --------- | | | Base 01 | #041B26 | 4, 27, 38 | 199, 81%, 8% | 200, 90, 15 | 13%, 4%, 0%, 85% | | | Base 02 | #E1E4E5 | 225, 228, 229 | 195, 7%, 89% | 200, 2, 90 | 2%, 0%, 0%, 10% | | | Base 03 | #F0F1F2 | 240, 241, 242 | 210, 7%, 95% | 200, 1, 95 | 1%, 0%, 0%, 5% | | | Base 04 | #FFFFFF | 255, 255, 255 | 0, 0%, 100% | 0, 0, 0 | 0%, 0%, 0%, 0% |

Secondary Colors

Will be provided shortly.

Graphics

Artworks

Our repositories use the following artworks to make them just a little bit moe enticing!

| Color | Monochrome | Acccent | | ----- | ---------- | ------- | | structure-03-color | structure-03-mono | structure-03-accent |

Diagrams

We use Mermaid in our repositories for simple data and process visualisations. Some examples:

Flowchart

mermaid flowchart LR Light:::class_light --> Neutral:::class_neutral --> Dark:::class_dark classDef class_light fill:#FFFFFF,color:#041B26,stroke:#041B26,stroke-width:2px; classDef class_neutral fill:#E1E4E5,color:#041B26,stroke:#041B26,stroke-width:2px; classDef class_dark fill:#041B26,color:#FFFFFF,stroke:#041B26,stroke-width:2px;

class_light

md classDef class_light fill:#FFFFFF,color:#041B26,stroke:#041B26,stroke-width:2px;

class_neutral

md classDef class_neutral fill:#E1E4E5,color:#041B26,stroke:#041B26,stroke-width:2px;

class_dark

md classDef class_dark fill:#041B26,color:#FFFFFF,stroke:#041B26,stroke-width:2px;

Pie chart

mermaid %%{init: {"theme": "base", "pie": {"textPosition": 0.5}, "themeVariables": { "pieOuterStrokeWidth": "2px", "pie1": "#FFFFFF", "pie2": "#E1E4E5", "pie3": "#041B26"}}}%% pie title Crypto "Bitcoin" : 386 "Ethereum" : 85 "Algorand" : 15

md %%{init: {"theme": "base", "pie": {"textPosition": 0.5}, "themeVariables": { "pieOuterStrokeWidth": "2px", "pie1": "#FFFFFF", "pie2": "#E1E4E5", "pie3": "#041B26"}}}%%

Elements

Icons

Within our repositories we use simple-icons for most iconographic purposes. This brand repository includes a copy this icon set (downloaded per 2023-07-25): /src/icons/simple-icons/

• simple-icons website: simpleicons.org
• simple-icons reposiory: github.com/simple-icons/simple-icons
• simple-icons license: CC0 1.0 Universal

IO Shields

We use IO Shields combined with simple-icons to display repository information.

Parameters

| Field | Value | Description | | :-------------- | :-------------- | :---------- | | style | flat-square | | | logo | bitcoin | Named logo via simple-icons | | logoColor | #FFFFFF | All white logo to match the text color | | label | License: | Title caps label text | | labelColor | #041B26 | Completely dark background | | color | #041B26 | | | cacheSeconds | default | | | link | misc. | Always try to provide a link |

Shields

| | | shield.io url | simpleicons tag | | :-------------------- | :---- | :---- | :---- | | License | | /badges/git-hub | readthedocs | | Docker Pulls | | docker | | Docker Stars | | /badges/docker-stars | docker | | Docker Version | | /badges/docker-stars | docker | | Docker Size | | /badges/docker-image-size-tag | docker | | devContainer | | /badges | visualstudiocode | | DOI | | /badges | DOI | | Zotero | | /badges | Zotero | | Download | | /badges | files |

Repository Headers

All repositories include the basic header, in some cases combined with additional shields.

Basic Repository Header

Basic Repository Interactions

Docker Container Repository Header

TypeScript / NPM Repository Header

Python / PyPi Repository Header