docs: update content
This commit is contained in:
jinhojang6
parent
36f48138d2
commit
9a301c30dd
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"position": 2,
|
||||
"label": "Anatomy",
|
||||
"collapsible": true
|
||||
}
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
---
|
||||
title: Anatomy
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
The Logos Design Language Guidelines are structured to provide a modular and adaptable system that can be customized to suit different branding needs. The guidelines are divided into three main sections:
|
||||
|
||||
- Philosophy
|
||||
- Voice
|
||||
- Visual Language & Design Systems
|
||||
|
||||
Each section is comprised of individual components that can be mixed and matched as needed to create a cohesive and consistent brand experience.
|
||||
|
||||
|
||||
|
||||
## Modularity
|
||||
|
||||
At the heart of the Logos Design Language Guidelines is a modular approach to branding. By breaking down the guidelines into smaller components, it becomes easier to build and maintain a cohesive brand identity. The modularity allows for a more flexible and adaptable approach, allowing the brand to evolve as needed while maintaining consistency.
|
||||
|
||||
## Branching
|
||||
|
||||
The Logos Design Language Guidelines are based on a Master Guideline and Branching system. The Master Guideline serves as the foundational framework for branding, providing the core components and principles that guide the overall branding strategy. The Branching system allows for customization and adaptation of the Master Guideline to meet the needs of different sub-brands or applications.
|
||||
|
||||
The Branching system works by taking the Master Guideline and creating a new branch that can be customized as needed. The customizable components are highlighted in blue, while the non-customizable components that remain consistent across all branches are shown in black.
|
||||
|
||||
## Anatomy of each section
|
||||
|
||||
|
||||
|
||||
### Philosophy
|
||||
|
||||
The Philosophy section outlines the core values and principles that guide the brand. It includes components such as the brand manifesto, brand mission statement, and brand vision statement.
|
||||
|
||||
### Voice
|
||||
|
||||
The Voice section provides guidelines for the tone and language used in brand communication. It includes components such as voice and tone guidelines, writing style guidelines, and brand vocabulary.
|
||||
|
||||
### Visual Language & Design Systems
|
||||
|
||||
The Visual Language & Design Systems section provides guidelines for the visual elements of the brand. It includes components such as logo guidelines, typography guidelines, color guidelines, imagery guidelines, and design systems.
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"position": 6,
|
||||
"label": "Design systems",
|
||||
"collapsible": true
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
content
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"position": 7,
|
||||
"label": "Gallery",
|
||||
"collapsible": true
|
||||
}
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
---
|
||||
title: Gallery
|
||||
title: Overview
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"position": 3,
|
||||
"label": "Philosophy",
|
||||
"collapsible": true
|
||||
}
|
||||
|
|
@ -1,8 +1,10 @@
|
|||
---
|
||||
title: Design systems
|
||||
sidebar_position: 3
|
||||
title: Overview
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Overview
|
||||
|
||||
Each of our design system is an open source ecosystem for creating high-quality products and digital experiences. At its core is the **[Logos Brand Guidelines - Master](https://www.notion.so/Logos-Brand-Guidelines-Master-2d65ca6f71684f41b2223bd690c2bc30?pvs=21)**, which provides the foundation for a system of working code, design tools and resources, human interface guidelines, and a community of contributors.
|
||||
|
||||
By following our design system, you can create products that are consistent, scalable, and efficient. Each clone of the Logos Brand Language will have its own set of design systems, which can be entirely customized to meet the unique needs of your brand. With our design system, you can focus on creating a great user experience, knowing that you are building on a solid foundation of best practices and community support.
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
---
|
||||
title: Logos Docusaurus Framework
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Logos Docusaurus Framework
|
||||
|
||||
Content
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Design tokens
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# **Design tokens**
|
||||
|
||||
Design tokens are variables that store values for the base layer of LSD, like colour and typography. They’re used in components, so changes on this level will resonate throughout the whole system.
|
||||
|
||||
## Colour
|
||||
|
||||
|
||||
|
||||
## Layout
|
||||
|
||||
|
||||
|
||||
## **Typography**
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
---
|
||||
title: Overview
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
## Logos System Design (LSD)
|
||||
|
||||
LSD is a rebellious open-source design system for products and digital experiences that defy the norm. Based on the [Philosophy](https://www.notion.so/Philosophy-e9f9330417fa4c4db19b32f3ad9c0e14?pvs=21) & [Visual Language](https://www.notion.so/Visual-Language-ba5c311d09c74fc4bc97ad0d4ed545ac?pvs=21) , we're tearing down the established order by removing unnecessary visual design layers and logic. Our core principle, "The message is the message," is a call to arms against the homogenized and trendy design that's suffocating the industry. We're giving the power back to the people by decentralizing design and placing more value on the content and message. This minimalistic and functional approach is a middle finger to the status quo.
|
||||
|
||||
We're fed up with the bloated and superficial web design world and its endless parade of visual pollution. That's why we're taking a stand and focusing on what really matters: the message. LSD aims to reduce visual elements in its implementation, resulting in a radical approach that challenges the hype and noise in the current web design world (2.0 or 3.0). We want to take design back to its roots and make it accessible to everyone. LSD is about the message and nothing else. With working code, design tools and resources, human interface guidelines, and a community of fellow dissidents, LSD leads the charge against the establishment.
|
||||
|
||||
## Theming
|
||||
|
||||
LSD offers two unique themes, each with its approach to design.
|
||||
|
||||
### Radical Theme
|
||||
|
||||
The "Radical Theme" is a unified minimal style that brings a sense of radicalism and anarchism to your design. This theme emphasizes minimalistic and unified design that challenges the status quo and empowers the user to think outside the box.
|
||||
|
||||
→ Available in Figma
|
||||
|
||||
[LSD – Radical / Dark v0.1](https://www.figma.com/community/file/1232693110330710020?searchSessionId=lh7x36gl-kmmloagxs0f)
|
||||
|
||||
[LSD – Radical / Light v0.1](https://www.figma.com/community/file/1232692398360647682?searchSessionId=lh7x36gl-kmmloagxs0f)
|
||||
|
||||
→ Available in React
|
||||
|
||||
[Library • acid-info/lsd](https://www.chromatic.com/library?appId=63e4f71c39dc65c5c703c1e8)
|
||||
|
||||
### Anarcho-Default theme (not available)
|
||||
|
||||
The "Anarcho-Default" theme is an even more radical approach to design. It eliminates the need for extra data and downloads by adopting the native built-in design for each component and element. This theme is a true expression of the message being the message, as it works in any environment without the need for additional design elements.
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
---
|
||||
title: Presentation kits
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Presentation kits
|
||||
|
||||
Copy and save as a new presentation with a new title if you plan to make one from the template. Also, make sure to check the Layout pull-down for all the placeholder goodies.
|
||||
|
||||
[Logos Presentation Template MAKE A COPY](https://docs.google.com/presentation/d/1extQeoMdbY2VZbTZH0sNKOM0AGMzpXjGsq9eG44zWjo/edit#slide=id.g158930d3f51_0_105)
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"position": 8,
|
||||
"label": "Tools and Resources",
|
||||
"collapsible": true
|
||||
}
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
---
|
||||
title: Brand Comm Notes
|
||||
sidebar_position: 13
|
||||
---
|
||||
|
||||
**Brand / Comms**
|
||||
|
||||
I find metaphysics / perennial philosophy a really important pillar for our branding and communications - like speaking to these meta narratives of human soul (specific to a culture) kinda like Jungian collective unconscious. Especially Spengler's concept of the Faustian man (Western Culture) and its 'infinite' symbol - which also ties into Frontier concept in War and Peace and War (which is what network state or parallel societies are about)
|
||||
|
||||
A drive for knowledge and self mastery. Faustian man, Spengler boasted, discovers his own potentialities in confronting an unbounded universe of unlimited possibilities. He strives to see all things in relation to the highest or most distant horizons, which, in turn, he seeks to surpass and extend. The souls of Faustian men (and they were all men) make them visionaries, creators, and discoverers. In their souls, Spengler told them, they are pioneers, builders, and conquerors of time, space, and human subjectivity. Faustian men are always preternaturally more: more creative, more daring, more individualistic, more heroic, more ambitious, more restless, more demanding, more lethal, more self-denying.
|
||||
|
||||
This ties into Hoppian positive freedom of libertarianism, freedom for excellence, greatness - rather than negative freedom aka 'freedom from' (all constraints) as in liberalism
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,38 +0,0 @@
|
|||
---
|
||||
title: Logos DAO Brand Mission, Vision, Principles
|
||||
sidebar_position: 11
|
||||
---
|
||||
|
||||
# About Logos
|
||||
|
||||
Logos DAO works at the intersection of technology and liberty to ensure that every community has equitable access to digital technology and its benefits. We promote universal access to communications technologies that are both open and secure, using a multidisciplinary approach that brings together advocates, researchers, organizers, and innovators.
|
||||
|
||||
Our current focus areas include surveillance, privacy and security, net neutrality, broadband access, and consumer privacy. Logos DAO conducts data-driven research, develops policy and regulatory reforms, and builds real-world pilot projects to impact both public policy and physical communications infrastructure that people interact with every day.
|
||||
|
||||
The Logos DAO supports free expression and open technologies at home and around the world, and is committed to supporting engaged, self-sufficient communities by promoting safe and affordable access to connectivity. We view technology not as an end in and of itself, but a means.
|
||||
|
||||
Across our work, we are guided by these principles:
|
||||
|
||||
## **Openness**
|
||||
|
||||
Our source code, processes, materials and reports are open and available. We encourage participation by individuals and communities adapting, improving and using our tools.
|
||||
|
||||
## **Privacy**
|
||||
|
||||
We support and defend the right to privacy and freedom from surveillance; our technologies are designed for safety and security; our research methods are respectful and sensitive to privacy concerns.
|
||||
|
||||
## Liberty
|
||||
|
||||
We believe in the equality of all individuals. We do not empower the communities we work with; they are already empowered, or they empower themselves. We support their work by providing trainings, tools, and resources.
|
||||
|
||||
## **Collective self-determination**
|
||||
|
||||
Community partners decide how they want to engage and how they want to use our tools. We follow their lead.
|
||||
|
||||
## **Service**
|
||||
|
||||
We show respect and give back to the communities we engage with locally and virtually.
|
||||
|
||||
## **Integrity**
|
||||
|
||||
We are accountable to these principles in everything we do.
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
---
|
||||
title: Logos Presentation Tool-kits
|
||||
sidebar_position: 14
|
||||
---
|
||||
|
||||
|
||||
[Old](https://docs.google.com/presentation/d/1ZlsNRVs3TgPTL2-o9fbd5-tGsf8PAxHhveSeWe2BdwY/edit?usp=drivesdk)
|
||||
|
||||
[Logos Presentation Imagery](https://docs.google.com/presentation/d/1-B-u7KTBYb-loii7MIpRmPMAnokDbm3AoJW-v9gOEMw/edit?usp=drivesdk)
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"position": 5,
|
||||
"label": "Visual Language",
|
||||
"collapsible": true
|
||||
}
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
title: Color
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Color
|
||||
|
||||
## **Introduction**
|
||||
|
||||
At Logos, we approach color with a clear purpose and intention. Our belief is that color should be used intentionally to communicate a message and evoke a specific emotion, rather than as an aesthetic choice. As a result, our color palette is minimalistic and designed to complement our typography and other visual elements.
|
||||
|
||||
Our philosophy towards color is grounded in our core values of simplicity, functionality, and accessibility. We take inspiration from our roots in underground culture, where black and white copy machine zines were a powerful tool for change. We use black and white as our primary colors because they are neutral, accessible, and have the least cultural and social connotations. We believe in the power of minimalism and the impact that can be achieved with simple and clear communication.
|
||||
|
||||
We also believe in the power of DIY culture and accessibility. Our brand is designed to be accessible and reproducible by anyone, anywhere, with any tool. Whether you're a professional designer with access to Adobe software or a person in a war or protest environment with just a stencil and spray can, we want our brand to be accessible and reproducible for all.
|
||||
|
||||
## Web-**Default Color Systems**
|
||||
|
||||
In order to maintain a consistent experience for our users, we prefer to rely on the default color systems available on each platform or device. This approach ensures that our designs are accessible to the widest possible audience and that they adhere to the platform conventions. Additionally, by relying on the default color systems, we reduce the amount of data that our users need to consume, making our designs more accessible and faster to load.
|
||||
|
||||
We only allow non-default colors when black and white are not enough to fulfill a specific function or need, such as the default yellow color of the **`<mark>`** element, or the blue color of hyperlinks.
|
||||
|
||||
It is important to note that when using colors, we adhere to the W3C's Web Content Accessibility Guidelines (WCAG) to ensure that our designs are accessible to as many people as possible, regardless of their visual abilities. This includes providing sufficient color contrast, and avoiding the use of color alone to convey important information. By following these guidelines, we can create designs that are inclusive and accessible for everyone.
|
||||
|
||||
## **Purposeful Color Usage**
|
||||
|
||||
When we do use color, we do so purposefully. Our color palette is designed to complement the typography and other visual elements and to evoke a particular emotion or convey a message. The color should not distract or detract from the message, but rather, serve to enhance it.
|
||||
|
||||
We also believe in the importance of accessibility and ensuring that our designs are inclusive and accessible to all. We follow the Web Content Accessibility Guidelines set by the World Wide Web Consortium (W3C) to ensure that our color usage is accessible to individuals with visual impairments or color blindness.
|
||||
|
||||
In summary, our approach to color is rooted in our core values of simplicity, functionality, and accessibility. We rely on default color systems to ensure consistency and accessibility, and we use color purposefully to complement our typography and other visual elements.
|
||||
|
||||
[Primary Palette](https://www.notion.so/8b15323df0d84a7c9ee520ecbcf38930?pvs=21)
|
||||
|
||||
PNG
|
||||
|
||||
|
||||
|
||||
SVG
|
||||
|
||||
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
---
|
||||
title: Elements
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
| Name | Status | placeholder-2022 | V0 (q1 2023) | V1 (q2-3 2023) |
|
||||
|--------------------|-------------|------------------|--------------|----------------|
|
||||
| [Logo](/visual-language/elements/logo) | In progress | Yes | Yes | Yes |
|
||||
| Typography | In progress | No | Yes | Yes |
|
||||
| Color | Done | No | Yes | Yes |
|
||||
| Grid | In progress | No | Yes | Yes |
|
||||
| Iconography | Not started | No | Yes | Yes |
|
||||
| Illustration | Not started | No | No | Yes |
|
||||
| Photography | Not started | No | No | Yes |
|
||||
| Data visualisation | Not started | No | No | Yes |
|
||||
| Infographics | Not started | No | No | Yes |
|
||||
| Layout | Not started | No | No | Yes |
|
||||
| Animation | Not started | No | No | Yes |
|
||||
| Video | Not started | No | No | Yes |
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
---
|
||||
title: Logo
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
content
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
---
|
||||
title: Grid & Layout
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Grid & Layout
|
||||
|
||||
## **Grid System**
|
||||
|
||||
At the core of our design philosophy is the belief that good design is functional and accessible. To achieve this, we rely on a grid system that provides a consistent and reliable foundation for all of our designs. Our grid system is not only a tool for organizing content and creating layouts, but also a reflection of our values and principles.
|
||||
|
||||
### **Modularity**
|
||||
|
||||
Our grid system is modular, meaning it can be scaled and adapted to fit any medium or device. The grid is made up of equal-width columns, with gutters in between. The size of the columns and gutters are based on a 12-point scale, with a minimum width of 16px for gutters. This modularity ensures that our designs are flexible and adaptable, while also maintaining consistency and structure.
|
||||
|
||||
### **Flexibility**
|
||||
|
||||
Flexibility is essential in today's constantly evolving design landscape. Our grid system allows for a wide range of possibilities, from complex, multi-column layouts to simple, single-column designs. This flexibility also enables designers to experiment and push boundaries, while still maintaining a consistent structure and aesthetic.
|
||||
|
||||
### **Accessibility**
|
||||
|
||||
Accessibility is a fundamental part of our design philosophy, and our grid system reflects this. By providing a consistent structure and hierarchy, our grid system makes it easier for users to navigate and understand our designs. It also ensures that our designs are accessible to as many people as possible, regardless of their technical expertise or physical abilities.
|
||||
|
||||
### **Inspiration**
|
||||
|
||||
Our grid system is inspired by the works of Kimberly Elam and other pioneers of grid-based design. However, we have adapted and customized this system to fit our own needs and values. We encourage designers to experiment with our grid system, and to find their own ways of using it to create beautiful, functional designs.
|
||||
|
||||
In summary, our grid system is a fundamental part of our design philosophy, reflecting our values of modularity, flexibility, accessibility, and experimentation. By using this system as a foundation, we create designs that are not only beautiful and aesthetically pleasing, but also functional and accessible to all.
|
||||
|
||||
## Examples
|
||||
|
||||
### Primitives
|
||||
|
||||
PNG
|
||||
|
||||
|
||||
|
||||
SVG
|
||||
|
||||
|
||||
|
||||
### Tokens
|
||||
|
||||
PNG
|
||||
|
||||
|
||||
|
||||
SVG
|
||||
|
||||
|
||||
|
||||
## Logos State Podcast
|
||||
|
||||
2 column 20px
|
||||
|
||||
|
||||
|
||||
4 column 20px
|
||||
|
||||
|
||||
|
||||
## Hashing It Out
|
||||
|
||||
3 column 20px
|
||||
|
||||
|
||||
|
||||
2 column 20px
|
||||
|
||||
|
||||
|
||||
## Generic Twitter
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
---
|
||||
title: Logo
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Brand Marks
|
||||
|
||||
### Choosing the right mark
|
||||
|
||||
Our mark is the primary brand element on our own properties, such as our websites and products. Here it can stand on its own. A simple bold mark can make a powerful statement. When our brand is represented in other contexts, throughout the web or in products we do not own, it is usually best to use a lockup.
|
||||
|
||||
Please do not edit, change, distort, recolor, or reconfigure the Logos mark. Our mark is the primary brand element on our own properties, such as our websites and products.
|
||||
|
||||
## Primary Mark
|
||||
|
||||
[Untitled Database](https://www.notion.so/86e8c3f2be7c4f60901f653a0f35ce25?pvs=21)
|
||||
|
||||
---
|
||||
|
||||
## Lockup - Vertical
|
||||
|
||||
When we represent our brand throughout the web or in products we do not own, it is usually best to use a lockup. These vertical lockups are best used arranged horizontally in a line.
|
||||
|
||||
[Untitled Database](https://www.notion.so/68cef135a831455abd309dc1ce5a00b2?pvs=21)
|
||||
|
||||
---
|
||||
|
||||
## Lockup - Horizontal
|
||||
|
||||
When we represent our brand throughout the web or in products we do not own, it is usually best to use a lockup. These horizontal lockups are best used stacked vertically.
|
||||
|
||||
[Untitled Database](https://www.notion.so/23686be708a0493f98851b2562c05dc9?pvs=21)
|
||||
|
||||
---
|
||||
|
||||
### Clearspace
|
||||
|
||||
When placing the logo, it’s important that it’s given enough space from other elements on the surface it’s presented on. The Clearspace is 50% of the width of the Logos mark. This Clearspace is accounted for as a margin in all our logo assets, so simply mind the edges of the image.
|
||||
|
||||
If you need to define the unit of space, the best way is to measure the bottom of any given mark to the edge of the image or the baseline of the logotype in the lockup to the bottom edge of the image. This unit is the same across all of our marks.
|
||||
|
||||
|
||||
|
||||
### Co-Branding
|
||||
|
||||
Often, our brand marks will be used as a family or in different combinations. All of our marks and lockups are designed to work together. The two major rules here are the consistency of size and the consistency of style.
|
||||
|
||||
Hierarchy is determined by the placement order, the most important being left in the case of horizontal layouts, or top in the vertical case. Vertical lockups are used in horizontal layouts and horizontal lockups in vertical layouts.
|
||||
|
||||
- All marks should be the same size
|
||||
- Priority is determined by order, not scale
|
||||
- All marks should be the same style
|
||||
- Do not mix lockups and non-lockups
|
||||
- Do not mix vertical lockups with horizontal lockups
|
||||
|
||||
---
|
||||
|
||||
# Social Assets
|
||||
|
||||
Our asset library will be more robust in the future, but the images below are branded avatars social accounts, followed by a preview of how they will look on Twitter.
|
||||
|
||||
|
||||
|
||||
[Untitled Database](https://www.notion.so/d4660e2f486143dbb37c87b93722b510?pvs=21)
|
||||
|
||||
---
|
||||
|
|
@ -0,0 +1,123 @@
|
|||
---
|
||||
title: Typography
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Typography
|
||||
|
||||
## Introduction
|
||||
|
||||
Typography is an integral part of our design process, and we believe that the message we convey should be the focus, not the typography. We prioritize accessibility, simplicity, and functionality when it comes to typography by relying on the default typefaces available on each operating system and device.
|
||||
|
||||
Our typography strategy reflects the values of accessibility, simplicity, and functionality. We prioritize readability over aesthetics and utilize default typefaces to ensure consistency across platforms and devices. By drawing inspiration from underground culture and the DIY ethos, we aim to create a brand that is accessible and reproducible by anyone, anywhere, using any tool. Our approach to typography is designed to present our content in a neutral and reliable way, allowing the message to take center stage without being hindered by the typography.
|
||||
|
||||
## **Readability**
|
||||
|
||||
Good typography is essential for readability, which is why we pay close attention to contrast, tracking and leading, and dynamic text. The contrast between the text and the background is important to ensure legibility, especially for users with visual impairments. Tracking and leading are used to adjust the spacing between letters and lines of text, respectively, to make the text easier to read. The dynamic text allows users to adjust the size of the text, which is essential for accessibility.
|
||||
|
||||
## **Typeface**
|
||||
|
||||
In our branding and design endeavors, our foremost priorities when selecting typefaces are accessibility, simplicity, and functionality. By consciously opting for the default fonts present on each device and operating system, we ensure that our content remains easily readable. This choice not only sidesteps the transient allure of trendy fonts but also anchors our brand, making it easily reproducible across diverse media, no matter one's technical prowess or physical capabilities.
|
||||
|
||||
Given that content can span multiple languages, our recommendation leans towards the innate fonts of devices and operating systems. This provides a dual advantage: it resonates with the familiar platform conventions and assures a vast linguistic compatibility. Regardless of the platform—be it online or print—our typographic decisions are rooted in showcasing our content in a manner that's both neutral and dependable, ensuring the core message remains undiluted by typography.
|
||||
|
||||
Good typography, in our belief, is the art of balancing typeface, size, style, and spacing to achieve optimal readability. This is mirrored in our choices that champion content accessibility and its neutral, reliable presentation. With inspiration drawn from the rich tapestry of underground culture and the DIY spirit, our brand vision is clear: to be universally accessible, allowing for replication anywhere and by anyone, with any tool at hand.
|
||||
|
||||
There are two ways to choose appropriate typefaces depending on the medium:
|
||||
|
||||
### **Platform-specific fonts (web environments)**
|
||||
|
||||
We recognize that the majority of our communication channels occur within web environments, and therefore, we prioritize web fonts. By relying on the default web fonts available on each browser, we ensure that the user experience is consistent with platform conventions and that our message is accessible to as many people as possible, regardless of their technical expertise or physical abilities.
|
||||
|
||||
In web environments, we recommend relying on the operating system to select the appropriate typeface. This means specifying the typeface type (serif, sans-serif, or mono) in the CSS code, which will allow the browser to select the appropriate typeface based on the user's operating system and browser. This approach keeps the experience consistent with the platform conventions and ensures the widest language script support as provided by the operating systems themselves.
|
||||
|
||||
Below you can see an example CSS code to support the default system fonts:
|
||||
|
||||
```css
|
||||
/**
|
||||
* System font stack for sans-serif fonts
|
||||
*
|
||||
* `-apple-system` ('San Francisco' font) – Support Safari 9+ macOS and iOS, Firefox macOS
|
||||
* `BlinkMacSystemFont` ('San Francisco' font) – Chrome 48+ macOS and iOS
|
||||
* `Segoe UI` – Windows Vista & newer
|
||||
* `Roboto` – Android 4.0+
|
||||
* `Lato` – Wikimedia Design choice, OFL licensed
|
||||
* `Helvetica, Arial, sans-serif` – (Generic) Web fallback
|
||||
* Note that standard `system-ui` value has resulted in unresolved side-effects in certain OS/language combinations as of now and is therefore not included.
|
||||
*/
|
||||
|
||||
font-family: Serif
|
||||
```
|
||||
|
||||
### **Platform-neutral fonts (non-web and print environments)**
|
||||
|
||||
In non-web and print environments, we suggest using free/open-source fonts or the default fonts provided by the most common operating systems and devices. These fonts should follow the following criteria:
|
||||
|
||||
- Be close to the default fonts already provided on the most common operating systems and devices, to ensure consistency and ease of access.
|
||||
- Have an extensive character set to support various languages and scripts.
|
||||
|
||||
We recommend the following free/open-source fonts that meet the above criteria:
|
||||
|
||||
| Font Type | Suggested Default Font Family | Suggested Free/Open-Source Font Family |
|
||||
| --- | --- | --- |
|
||||
| Mono | Consolas (Windows), Monaco (macOS), DejaVu Sans Mono (Linux) | Inconsolata, Fira Mono, JetBrains Mono, IBM Plex Mono |
|
||||
| Serif | Georgia (Windows), Times New Roman (macOS), DejaVu Serif (Linux) | Lora |
|
||||
| Sans-Serif | Segoe UI (Windows), Helvetica (macOS), DejaVu Sans (Linux) | Inter |
|
||||
|
||||
## UI typography specs (WIP)
|
||||
|
||||
### **Type Size**
|
||||
|
||||
We follow the W3C's Web Content Accessibility Guidelines (WCAG) recommendations on font size, which state that body copy should be at least 16px and that text should scale up to 200% without causing a loss in readability or functionality. We recommend following this guideline for all types of sizes used in our designs.
|
||||
|
||||
### **Line Height**
|
||||
|
||||
Line height is the vertical spacing between lines of text. We recommend a line height of at least 1.5 times the font size, as it enhances legibility and readability.
|
||||
|
||||
### **Letter Spacing**
|
||||
|
||||
Letter spacing is the horizontal spacing between letters. We recommend using the default letter spacing for each typeface, as it ensures consistent typography across different devices and platforms.
|
||||
|
||||
### **Font Weight**
|
||||
|
||||
Font weight refers to the thickness of the typeface. We recommend using bold or semi-bold weights for headings and subheadings to differentiate them from the body copy. For body copy, we recommend using regular or light weights to improve readability.
|
||||
|
||||
### **Font Style**
|
||||
|
||||
Font style refers to whether the typeface is italicized or in a bold style. We recommend using these styles sparingly and only for emphasis or to differentiate between headings and subheadings.
|
||||
|
||||
### **Text Transform**
|
||||
|
||||
Text transform refers to how the text is styled, such as all uppercase or lowercase. We recommend using lowercase for body copy and using uppercase for headings and subheadings sparingly.
|
||||
|
||||
By following these typography specifications, we ensure that our designs are consistent and legible across different devices and platforms.
|
||||
|
||||
## Examples
|
||||
|
||||
### Sans Serif
|
||||
|
||||
PNG
|
||||
|
||||
|
||||
|
||||
SVG
|
||||
|
||||
|
||||
|
||||
### Serif
|
||||
|
||||
PNG
|
||||
|
||||
|
||||
|
||||
SVG
|
||||
|
||||
|
||||
|
||||
## Mono
|
||||
|
||||
PNG
|
||||
|
||||
|
||||
|
||||
SVG
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
{
|
||||
"position": 4,
|
||||
"label": "Voice",
|
||||
"collapsible": true
|
||||
}
|
||||
|
|
@ -28,6 +28,7 @@ const config = {
|
|||
/** @type {import('@acid-info/logos-docusaurus-preset').PluginOptions} */
|
||||
({
|
||||
businessUnit: 'Logos',
|
||||
customSiteConfig: true,
|
||||
theme: {
|
||||
name: 'default',
|
||||
options: {
|
||||
|
|
@ -46,6 +47,7 @@ const config = {
|
|||
},
|
||||
docs: {
|
||||
routeBasePath: '/',
|
||||
sidebarPath: require.resolve("./sidebars.js"),
|
||||
},
|
||||
og: {},
|
||||
}),
|
||||
|
|
|
|||
95
sidebars.js
95
sidebars.js
|
|
@ -14,20 +14,99 @@
|
|||
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
|
||||
const sidebars = {
|
||||
// By default, Docusaurus generates a sidebar from the docs folder structure
|
||||
tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
|
||||
// tutorialSidebar: [{ type: 'autogenerated', dirName: '.' }],
|
||||
|
||||
// But you can create a sidebar manually
|
||||
/*
|
||||
tutorialSidebar: [
|
||||
'intro',
|
||||
'hello',
|
||||
main: [
|
||||
'index',
|
||||
{
|
||||
type: 'html',
|
||||
value: '<div class="sidebar-menu-section">Philosophy</div>', // The HTML to be rendered
|
||||
defaultStyle: true, // Use the default menu item styling
|
||||
},
|
||||
'philosophy/overview',
|
||||
'philosophy/principles',
|
||||
{
|
||||
type: 'html',
|
||||
value: '<div class="sidebar-menu-section">Brand Guidelines</div>',
|
||||
defaultStyle: true,
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Tutorial',
|
||||
items: ['tutorial-basics/create-a-document'],
|
||||
label: 'Voice',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{
|
||||
type: 'link',
|
||||
label: 'Overview',
|
||||
href: '/voice',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Visual Language',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{
|
||||
type: 'link',
|
||||
label: 'Overview',
|
||||
href: '/visual-language',
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
label: 'Logo',
|
||||
href: '/visual-language/logo',
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
label: 'Typography',
|
||||
href: '/visual-language/typography',
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
label: 'Color',
|
||||
href: '/visual-language/color',
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
label: 'Grid & Layout',
|
||||
href: '/visual-language/grand-and-layout',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'html',
|
||||
value: '<div class="sidebar-menu-section">Resources & Tools</div>',
|
||||
defaultStyle: true,
|
||||
},
|
||||
'resources-and-tools/index',
|
||||
{
|
||||
type: 'category',
|
||||
label: 'LSD - UI library',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{
|
||||
type: 'link',
|
||||
label: 'Overview',
|
||||
href: '/resources-and-tools/lsd',
|
||||
},
|
||||
{
|
||||
type: 'link',
|
||||
label: 'Design tokens',
|
||||
href: '/resources-and-tools/lsd/design-tokens',
|
||||
},
|
||||
],
|
||||
},
|
||||
'resources-and-tools/presentation-kits',
|
||||
'resources-and-tools/logos-docusaurus-framework',
|
||||
{
|
||||
type: 'html',
|
||||
value: '<div class="sidebar-menu-section">Gallery</div>',
|
||||
defaultStyle: true,
|
||||
},
|
||||
'gallery/index',
|
||||
],
|
||||
*/
|
||||
}
|
||||
|
||||
module.exports = sidebars
|
||||
|
|
|
|||
|
|
@ -4,3 +4,7 @@
|
|||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-menu-section {
|
||||
margin-top: 20px;
|
||||
}
|
||||
Loading…
Reference in New Issue