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

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;

Loading

class_light

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

class_neutral

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

class_dark

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

Pie chart

%%{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

Loading

%%{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

---