multiple design feedback fixes
This commit is contained in:
jongomez
parent
26950f5d3a
commit
ebe9d88c4b
|
|
@ -39,7 +39,7 @@ export const galleryImages = [
|
|||
{ src: '/28.png'},
|
||||
]
|
||||
|
||||
<ImageGrid>
|
||||
<ImageGrid md={{cols: 2, gap: "16px"}} xs={{cols: 2, gap: "16px"}}>
|
||||
{galleryImages.map((img, index) => (
|
||||
<Grid.Item key={index}>
|
||||
<img src={img.src} />
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ displayed_sidebar: main
|
|||
pagination_label: LSD - UI Library
|
||||
---
|
||||
|
||||
import { CardWithIcon, FigmaIcon, ChromaticIcon } from '@site/src/components/mdx';
|
||||
import { CardWithIcon, FigmaIcon, ChromaticIcon, Grid } from '@site/src/components/mdx';
|
||||
|
||||
# Overview
|
||||
|
||||
|
|
@ -14,18 +14,21 @@ LSD is an open-source design system challenging conventional norms in the world
|
|||
|
||||
### Radical Theme
|
||||
|
||||
<div style={{display: "flex", justifyContent: "center", gap: "16px"}}>
|
||||
<CardWithIcon
|
||||
title="LSD - Radical"
|
||||
subtitle="www.figma.com"
|
||||
href="https://www.figma.com/file/DVfLHVRl8adBPYkgq02Qki/LSD-%E2%80%93-Radical?type=design&node-id=22%3A796&mode=design&t=17y4ysCLSxyCKece-1"
|
||||
icon={<FigmaIcon />}
|
||||
/>
|
||||
|
||||
<CardWithIcon
|
||||
title="Library • acid-info/lsd"
|
||||
subtitle="www.chromatic.com"
|
||||
href="https://www.chromatic.com/library?appId=63e4f71c39dc65c5c703c1e8"
|
||||
icon={<ChromaticIcon />}/>
|
||||
</div>
|
||||
<Grid xs={{ cols: 1, wrap: true, gap: '16px' }} md={{ cols: 2 }}>
|
||||
<Grid.Item xs={1}>
|
||||
<CardWithIcon
|
||||
title="LSD - Radical"
|
||||
subtitle="www.figma.com"
|
||||
href="https://www.figma.com/file/DVfLHVRl8adBPYkgq02Qki/LSD-%E2%80%93-Radical?type=design&node-id=22%3A796&mode=design&t=17y4ysCLSxyCKece-1"
|
||||
icon={<FigmaIcon />}
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item xs={1}>
|
||||
<CardWithIcon
|
||||
title="Library • acid-info/lsd"
|
||||
subtitle="www.chromatic.com"
|
||||
href="https://www.chromatic.com/library?appId=63e4f71c39dc65c5c703c1e8"
|
||||
icon={<ChromaticIcon />}/>
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
---
|
||||
title: Presentation kits
|
||||
displayed_sidebar: main
|
||||
---
|
||||
|
||||
# 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)
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
---
|
||||
title: Presentation kits
|
||||
displayed_sidebar: main
|
||||
---
|
||||
|
||||
import { GoogleSlidesIcon, PresentationKit } from '@site/src/components/mdx';
|
||||
|
||||
# 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.
|
||||
|
||||
<PresentationKit
|
||||
imgSrc="/Presentation-kit-slide1.png"
|
||||
title="Logos Presentation Template MAKE A COPY"
|
||||
subtitle="docs.google.com"
|
||||
href="https://docs.google.com/presentation/d/1extQeoMdbY2VZbTZH0sNKOM0AGMzpXjGsq9eG44zWjo/edit#slide=id.g158930d3f51_0_105"
|
||||
icon={<GoogleSlidesIcon />}
|
||||
/>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
|
||||
# Social media assets
|
||||
|
||||
[Network State Press templates](https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=212%3A175&mode=design&t=0bOCaBBwhofQKq0c-1)
|
||||
|
||||
[Tweet templates](https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=212%3A391&mode=design&t=0bOCaBBwhofQKq0c-1)
|
||||
|
||||
[Logos podcast templates](https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=0%3A1&mode=design&t=0bOCaBBwhofQKq0c-1)
|
||||
|
||||
[Hashing It Out templates](https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=212%3A325&mode=design&t=0bOCaBBwhofQKq0c-1)
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
|
||||
# Social media assets
|
||||
|
||||
import { CardWithIcon, FigmaIcon, ImageGrid, Grid } from '@site/src/components/mdx';
|
||||
|
||||
<Grid xs={{ cols: 1, wrap: true, gap: '16px' }} md={{ cols: 2 }}>
|
||||
<Grid.Item xs={1}>
|
||||
<div className="template-card-title">Network State Press templates</div>
|
||||
<CardWithIcon
|
||||
title="Logos templates"
|
||||
subtitle="www.figma.com"
|
||||
href="https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=212%3A175&mode=design&t=0bOCaBBwhofQKq0c-1"
|
||||
icon={<FigmaIcon />}
|
||||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item xs={1}>
|
||||
<div className="template-card-title">Tweet templates</div>
|
||||
<CardWithIcon
|
||||
title="Logos templates"
|
||||
subtitle="www.figma.com"
|
||||
href="https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=212%3A391&mode=design&t=0bOCaBBwhofQKq0c-1"
|
||||
icon={<FigmaIcon />}/>
|
||||
</Grid.Item>
|
||||
<Grid.Item xs={1}>
|
||||
<div className="template-card-title">Logos podcast templates</div>
|
||||
<CardWithIcon
|
||||
title="Logos templates"
|
||||
subtitle="www.figma.com"
|
||||
href="https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=0%3A1&mode=design&t=0bOCaBBwhofQKq0c-1"
|
||||
icon={<FigmaIcon />}/>
|
||||
</Grid.Item>
|
||||
<Grid.Item xs={1}>
|
||||
<div className="template-card-title">Hashing It Out templates</div>
|
||||
<CardWithIcon
|
||||
title="Logos templates"
|
||||
subtitle="www.figma.com"
|
||||
href="https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=212%3A325&mode=design&t=0bOCaBBwhofQKq0c-1"
|
||||
icon={<FigmaIcon />}/>
|
||||
</Grid.Item>
|
||||
</Grid>
|
||||
|
||||
|
|
@ -2,10 +2,10 @@
|
|||
title: Grid and Layout
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
|
||||
# Grid and Layout
|
||||
|
||||
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.
|
||||
|
||||
[Web environment](/visual-language/grid-and-layout/web-environment)
|
||||
|
||||
[Non-web environment](/visual-language/grid-and-layout/non-web-environment)
|
||||
<DocCardList className="DocCardList--no-overview"/>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
---
|
||||
title: Non-web Environment
|
||||
---
|
||||
|
||||
# Non-web environment
|
||||
|
||||
Non-web grids are based on a 20px unit. All elements are sized and spaced in multiples of 20, though which multiples depends on the particular medium. Below we have examples of grids for podcast promotion, podcast video, and 16:9 twitter layouts. These grids work for 16:9 @1920x1080, 1:1 @1920x1920 or 1080x1080, and 9:16 @1080x1920. They can also work for print in 1:2, 4:3, 1:1, and other aspect ratios.
|
||||
|
||||
The typestack for these grids is also based in multiples of 20px, line height adjusted on type styles so that the resulting blocks neatly fit into the grid.
|
||||
|
||||
### Logos State Podcast
|
||||
|
||||
2 column 20px
|
||||
|
||||
|
||||
|
||||
4 column 20px
|
||||
|
||||
|
||||
|
||||
### Hashing It Out
|
||||
|
||||
3 column 20px
|
||||
|
||||
|
||||
|
||||
2 column 20px
|
||||
|
||||
|
||||
|
||||
### Generic Twitter
|
||||
|
||||
This is a simpler grid based on 96px, used for X. Type sizes are also based on divisions of the 96px unit.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,61 @@
|
|||
---
|
||||
title: Non-web Environment
|
||||
---
|
||||
|
||||
import { ImageGrid, Grid } from "@site/src/components/mdx"
|
||||
|
||||
# Non-web environment
|
||||
|
||||
Non-web grids are based on a 20px unit. All elements are sized and spaced in multiples of 20, though which multiples depends on the particular medium. Below we have examples of grids for podcast promotion, podcast video, and 16:9 twitter layouts. These grids work for 16:9 @1920x1080, 1:1 @1920x1920 or 1080x1080, and 9:16 @1080x1920. They can also work for print in 1:2, 4:3, 1:1, and other aspect ratios.
|
||||
|
||||
The typestack for these grids is also based in multiples of 20px, line height adjusted on type styles so that the resulting blocks neatly fit into the grid.
|
||||
|
||||
### Logos State Podcast
|
||||
|
||||
# Gallery
|
||||
|
||||
<!-- [Sizzle Reel draft.mp4](Gallery%20e5522cb5bfc94082adac41f1ab17a673/Sizzle_Reel_draft.mp4) -->
|
||||
|
||||
2 column 20px and 4 column 20px
|
||||
|
||||
<ImageGrid md={{cols: 2, gap: "16px"}}>
|
||||
<Grid.Item>
|
||||
<img src="/Clip_path_group.png" />
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<img src="/Logos-Example-2.png" />
|
||||
</Grid.Item>
|
||||
</ImageGrid>
|
||||
|
||||
### Hashing It Out
|
||||
|
||||
3 column 20px and 2 column 20px
|
||||
|
||||
<ImageGrid md={{cols: 2, gap: "16px"}}>
|
||||
<Grid.Item title="">
|
||||
<img src="/HIO-Examples-1.png" />
|
||||
</Grid.Item>
|
||||
<Grid.Item title="">
|
||||
<img src="/HIO-Examples-2.png" />
|
||||
</Grid.Item>
|
||||
</ImageGrid>
|
||||
|
||||
|
||||
### Generic Twitter
|
||||
|
||||
This is a simpler grid based on 96px, used for X. Type sizes are also based on divisions of the 96px unit.
|
||||
|
||||
<ImageGrid md={{cols: 2, gap: "16px"}}>
|
||||
<Grid.Item>
|
||||
<img src="/image_5.png" />
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<img src="/image_6.png" />
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<img src="/image_7.png" />
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<img src="/image_8.png" />
|
||||
</Grid.Item>
|
||||
</ImageGrid>
|
||||
|
|
@ -1,53 +0,0 @@
|
|||
---
|
||||
title: Web Environment
|
||||
---
|
||||
|
||||
# Web environment
|
||||
|
||||
## Spacing
|
||||
|
||||
Spacing tokens serve as the building blocks for maintaining consistency in components, grids, and page layouts. Our base unit is 8, and the spacing scale uses multiples of the base unit.
|
||||
|
||||
|
||||
|
||||
## Grid
|
||||
|
||||
Our web grid system is flexible. We typically structure grids and layouts based on our spacing scale.
|
||||
|
||||
Commonly used web grids:
|
||||
|
||||
- Desktop: 24 / 16 columns
|
||||
- Tablet: 16 / 12 columns
|
||||
- Mobile: 2 columns
|
||||
|
||||
Gutter size - 16px.
|
||||
|
||||
|
||||
|
||||
### Web grid templates
|
||||
|
||||
[Figma link](https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=215%3A8&mode=design&t=0bOCaBBwhofQKq0c-1)
|
||||
|
||||
## Examples
|
||||
|
||||
### Desktop
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Tablet
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
### Mobile
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
---
|
||||
title: Web Environment
|
||||
---
|
||||
|
||||
|
||||
import { CardWithIcon, FigmaIcon, ImageGrid, Grid } from '@site/src/components/mdx';
|
||||
|
||||
## Spacing
|
||||
|
||||
Spacing tokens serve as the building blocks for maintaining consistency in components, grids, and page layouts. Our base unit is 8, and the spacing scale uses multiples of the base unit.
|
||||
|
||||
|
||||
|
||||
## Grid
|
||||
|
||||
Our web grid system is flexible. We typically structure grids and layouts based on our spacing scale.
|
||||
|
||||
Commonly used web grids:
|
||||
|
||||
- Desktop: 24 / 16 columns
|
||||
- Tablet: 16 / 12 columns
|
||||
- Mobile: 2 columns
|
||||
|
||||
Gutter size - 16px.
|
||||
|
||||
|
||||
|
||||
### Web grid templates
|
||||
|
||||
<CardWithIcon
|
||||
title="Logos templates"
|
||||
subtitle="www.figma.com"
|
||||
href="https://www.figma.com/file/qH2d0UtCAcrcn23or1WgfB/Logos-templates?type=design&node-id=215%3A8&mode=design&t=0bOCaBBwhofQKq0c-1"
|
||||
icon={<FigmaIcon />}
|
||||
style={{ maxWidth: "390px"}}
|
||||
/>
|
||||
|
||||
## Examples
|
||||
|
||||
### Desktop
|
||||
|
||||
<ImageGrid md={{cols: 2, gap: "16px"}}>
|
||||
<Grid.Item>
|
||||
<img src="/Untitled-1.png" />
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<img src="/Untitled-2.png" />
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<img src="/Untitled-3.png" />
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<img src="/Untitled-4.png" />
|
||||
</Grid.Item>
|
||||
</ImageGrid>
|
||||
|
||||
### Tablet
|
||||
|
||||
<ImageGrid md={{cols: 2, gap: "16px"}}>
|
||||
<Grid.Item>
|
||||
<img src="/Untitled-5.png" />
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<img src="/Untitled-6.png" />
|
||||
</Grid.Item>
|
||||
</ImageGrid>
|
||||
|
||||
### Mobile
|
||||
|
||||
<ImageGrid md={{cols: 2, gap: "16px"}}>
|
||||
<Grid.Item>
|
||||
<img src="/Untitled-7.png" />
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
<img src="/Untitled-8.png" />
|
||||
</Grid.Item>
|
||||
</ImageGrid>
|
||||
|
|
@ -1,62 +0,0 @@
|
|||
---
|
||||
title: Logo
|
||||
sidebar_position: 2
|
||||
displayed_sidebar: main
|
||||
---
|
||||
|
||||
# Logo
|
||||
|
||||
## 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.
|
||||
|
||||
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
|
||||
|
||||
|  |  |
|
||||
| ----------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
|
||||
| Logos primary mark - black | Logos primary mark - white |
|
||||
| [logos-mark-primary-black.png](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-mark-primary-black.png) | [logos-mark-primary-white.png](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-mark-primary-white.png) |
|
||||
| [logos-mark-primary-black.svg](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-mark-primary-black.svg) | [logos-mark-primary-white.svg](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-mark-primary-white.svg) |
|
||||
|
||||
|
||||
## Lockup — Vertical
|
||||
|
||||
These vertical lockups are best used arranged horizontally in a line.
|
||||
|
||||
|  |  |
|
||||
| -------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| Logos lockup - vertical - black | Logos lockup - vertical - white |
|
||||
| [logos-lockup-vertical-black.png](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-vertical-black.png) | [logos-lockup-vertical-white.png](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-vertical-white.png) |
|
||||
| [logos-lockup-vertical-black.svg](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-vertical-black.svg) | [logos-lockup-vertical-white.svg](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-vertical-white.svg) |
|
||||
|
||||
## Lockup — Horizontal
|
||||
|
||||
These horizontal lockups are best used stacked vertically.
|
||||
|
||||
|  |  |
|
||||
| ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| Logos lockup mark - horizontal - black | Logos lockup mark - horizontal - white |
|
||||
| [logos-lockup-horizontal-black.png](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-horizontal-black.png) | [logos-lockup-horizontal-white.png](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-horizontal-white.png) |
|
||||
| [logos-lockup-horizontal-black.svg](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-horizontal-black.svg) | [logos-lockup-horizontal-white.svg](https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-horizontal-white.svg) |
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
|
@ -0,0 +1,92 @@
|
|||
---
|
||||
title: Logo
|
||||
sidebar_position: 2
|
||||
displayed_sidebar: main
|
||||
---
|
||||
|
||||
import { LogoCard } from '@site/src/components/mdx/LogoCard';
|
||||
|
||||
|
||||
# Logo
|
||||
|
||||
## 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.
|
||||
|
||||
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
|
||||
|
||||
<div style={{display: "flex", gap: "16px"}}>
|
||||
<LogoCard
|
||||
title="Mark - Black"
|
||||
logoHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-mark-display-black.svg"
|
||||
svgHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-mark-primary-black.svg"
|
||||
pngHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-mark-primary-black.png"
|
||||
/>
|
||||
|
||||
<LogoCard
|
||||
title="Mark - White"
|
||||
logoHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-mark-display-white.svg"
|
||||
svgHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-mark-primary-white.svg"
|
||||
pngHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-mark-primary-white.png"
|
||||
/>
|
||||
</div>
|
||||
|
||||
## Lockup — Vertical
|
||||
|
||||
These vertical lockups are best used arranged horizontally in a line.
|
||||
|
||||
<div style={{display: "flex", gap: "16px"}}>
|
||||
<LogoCard
|
||||
title="Vertical lockup - Black"
|
||||
logoHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-vertical-display-black.svg"
|
||||
svgHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-vertical-black.svg"
|
||||
pngHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-vertical-black.png"
|
||||
/>
|
||||
|
||||
<LogoCard
|
||||
title="Vertical lockup - White"
|
||||
logoHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-vertical-display-white.svg"
|
||||
svgHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-vertical-white.svg"
|
||||
pngHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-vertical-white.png" />
|
||||
</div>
|
||||
|
||||
## Lockup — Horizontal
|
||||
|
||||
These horizontal lockups are best used stacked vertically.
|
||||
|
||||
<div style={{display: "flex", gap: "16px"}}>
|
||||
<LogoCard
|
||||
title="Horizontal lockup - Black"
|
||||
logoHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-horizontal-display-black.svg"
|
||||
svgHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-horizontal-black.svg"
|
||||
pngHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-horizontal-black.png"
|
||||
/>
|
||||
|
||||
<LogoCard
|
||||
title="Horizontal lockup - White"
|
||||
logoHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-horizontal-display-white.svg"
|
||||
svgHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-horizontal-white.svg"
|
||||
pngHref="https://raw.githubusercontent.com/acid-info/design-assets/fd0fcfd7b2a2ff641bd3b0663e541d26d9f1de16/logos/logos-lockup-horizontal-white.png" />
|
||||
</div>
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
|
||||
## 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
|
||||
|
|
@ -2,10 +2,10 @@
|
|||
title: Typography
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
|
||||
# Typography
|
||||
|
||||
Typography is a fundamental element in our design philosophy, where the message takes precedence over fonts. We prioritize accessibility, simplicity, and functionality, relying on default typefaces across various operating systems and devices for consistency. Our inspiration from underground culture and the DIY ethos shapes a brand accessible and reproducible by all, regardless of tools or location. Our approach emphasizes readability, addressing contrast, tracking, leading, and dynamic text for all users, including those with visual impairments. Typeface selection aligns with these principles, prioritizing accessibility, simplicity, and functionality through default system fonts, ensuring cross-platform compatibility and maintaining a neutral and dependable brand presentation. Typography, in our view, is the art of balancing typeface, size, style, and spacing to optimize readability, reflecting our dedication to content accessibility and a consistent, reliable message.
|
||||
|
||||
[Web Environments](/visual-language/typography/web-environment)
|
||||
|
||||
[Non-web environments](/visual-language/typography/non-web-environment)
|
||||
<DocCardList className="DocCardList--no-overview"/>
|
||||
|
|
@ -11,11 +11,11 @@ In non-web and print environments, we suggest using free/open-source fonts or th
|
|||
|
||||
We recommend the following free/open-source fonts that meet the above criteria:
|
||||
|
||||
| Font Type | Suggested Free/Open-Source Font Family |
|
||||
| Font Type | Suggested Default Font Family |
|
||||
| --- | --- |
|
||||
| Mono | https://fonts.google.com/specimen/Inconsolata?query=inconso, https://fonts.google.com/specimen/Fira+Mono, https://www.jetbrains.com/lp/mono/, https://fonts.google.com/specimen/IBM+Plex+Mono |
|
||||
| Serif | https://fonts.google.com/specimen/Lora |
|
||||
| Sans-Serif | https://fonts.google.com/specimen/Inter |
|
||||
| Mono | [Iconsolata](https://fonts.google.com/specimen/Inconsolata?query=inconso), [Fira Mono](https://fonts.google.com/specimen/Fira+Mono), [JetBrains Mono](https://www.jetbrains.com/lp/mono/), [IBM Plex Mono](https://fonts.google.com/specimen/IBM+Plex+Mono) |
|
||||
| Serif | [Lora](https://fonts.google.com/specimen/Lora) |
|
||||
| Sans-Serif | [Inter](https://fonts.google.com/specimen/Inter) |
|
||||
|
||||
## Examples
|
||||
|
||||
|
|
|
|||
|
|
@ -152,6 +152,9 @@ const sidebars = {
|
|||
type: 'category',
|
||||
label: 'Templates',
|
||||
collapsible: true,
|
||||
link: {
|
||||
type: 'generated-index',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'doc',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react'
|
||||
|
||||
export const DownloadIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="10"
|
||||
height="10"
|
||||
viewBox="0 0 10 10"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M5.00065 7.33337L2.08399 4.41671L2.90065 3.57087L4.41732 5.08754V0.333374H5.58399V5.08754L7.10065 3.57087L7.91732 4.41671L5.00065 7.33337ZM1.50065 9.66671C1.17982 9.66671 0.905069 9.55237 0.676402 9.32371C0.447735 9.09504 0.333596 8.82049 0.333985 8.50004V6.75004H1.50065V8.50004H8.50065V6.75004H9.66732V8.50004C9.66732 8.82087 9.55299 9.09562 9.32432 9.32429C9.09565 9.55296 8.8211 9.6671 8.50065 9.66671H1.50065Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './DownloadIcon'
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
import React from 'react'
|
||||
|
||||
export const GoogleSlidesIcon = () => {
|
||||
return (
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 32 32"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20.982 19.9276H11.166V14.3632H20.982V19.9276ZM23.0556 9.69998H26.5476V28.4368C26.5476 29.5216 25.668 30.4 24.5832 30.4H7.56476C7.30695 30.4 7.05166 30.3492 6.81348 30.2505C6.57529 30.1519 6.35887 30.0073 6.17657 29.825C5.8084 29.4568 5.60156 28.9574 5.60156 28.4368V3.56318C5.60156 2.47838 6.47996 1.59998 7.56476 1.59998H18.4464V9.69998H23.0556ZM22.62 12.7276H9.52796V21.5632H22.62V12.7276ZM19.3464 5.55278V8.79998H26.5476L19.3476 1.59998L19.3464 5.55278Z"
|
||||
fill="white"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './GoogleSlidesIcon'
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
.root {
|
||||
width: 210px;
|
||||
}
|
||||
|
||||
.mainContent {
|
||||
border: 1px solid rgb(var(--lsd-border-primary));
|
||||
padding: 16px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.imgContainer {
|
||||
margin: 16px 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.linkContainer {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
padding: 6px 10px;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
width: 100%;
|
||||
|
||||
border-bottom: 1px solid rgb(var(--lsd-border-primary));
|
||||
border-right: 1px solid rgb(var(--lsd-border-primary));
|
||||
&:first-child {
|
||||
border-left: 1px solid rgb(var(--lsd-border-primary));
|
||||
}
|
||||
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
import React from 'react'
|
||||
import styles from './LogoCard.module.scss'
|
||||
import clsx from 'clsx'
|
||||
import { Typography } from '@acid-info/lsd-react'
|
||||
import Link from '@docusaurus/Link'
|
||||
import { DownloadIcon } from '../Icons/DownloadIcon'
|
||||
|
||||
export type LogoCardProps = Omit<
|
||||
React.HTMLProps<HTMLDivElement>,
|
||||
'title' | 'color'
|
||||
> & {
|
||||
title: React.ReactNode
|
||||
logoHref: string
|
||||
pngHref: string
|
||||
svgHref: string
|
||||
}
|
||||
|
||||
export const LogoCard: React.FC<LogoCardProps> = ({
|
||||
title,
|
||||
logoHref,
|
||||
pngHref,
|
||||
svgHref,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<div {...props} className={clsx(props.className, styles.root)}>
|
||||
<div className={styles.mainContent}>
|
||||
<Typography variant="body2" component="div">
|
||||
{title}
|
||||
</Typography>
|
||||
|
||||
<div className={styles.imgContainer}>
|
||||
<img src={logoHref} />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className={styles.linkContainer}>
|
||||
<Link className={styles.link} href={pngHref} download>
|
||||
<Typography variant="body3" component="div">
|
||||
PNG
|
||||
</Typography>
|
||||
<DownloadIcon />
|
||||
</Link>
|
||||
<Link className={styles.link} href={svgHref} download>
|
||||
<Typography variant="body3" component="div">
|
||||
SVG
|
||||
</Typography>
|
||||
<DownloadIcon />
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './LogoCard'
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
.root {
|
||||
border: 1px solid rgb(var(--lsd-border-primary));
|
||||
max-width: 390px;
|
||||
}
|
||||
|
||||
.link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
border-top: 1px solid rgb(var(--lsd-border-primary));
|
||||
padding: 16px;
|
||||
|
||||
text-decoration: none !important;
|
||||
&:hover {
|
||||
text-decoration: underline !important;
|
||||
}
|
||||
|
||||
svg {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.textContainer {
|
||||
padding-left: 16px;
|
||||
overflow: hidden;
|
||||
|
||||
div {
|
||||
max-width: 310px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
import React from 'react'
|
||||
import styles from './PresentationKit.module.scss'
|
||||
import { Typography } from '@acid-info/lsd-react'
|
||||
import Link from '@docusaurus/Link'
|
||||
|
||||
export type PresentationKitProps = {
|
||||
imgSrc: string
|
||||
title: string
|
||||
subtitle: string
|
||||
href: string
|
||||
icon: React.ReactNode
|
||||
}
|
||||
|
||||
export const PresentationKit: React.FC<PresentationKitProps> = ({
|
||||
imgSrc,
|
||||
title,
|
||||
subtitle,
|
||||
href,
|
||||
icon,
|
||||
}) => {
|
||||
return (
|
||||
<div className={styles.root}>
|
||||
<img src={imgSrc} />
|
||||
|
||||
<Link className={styles.link} href={href} target="_blank">
|
||||
{icon}
|
||||
<div className={styles.textContainer}>
|
||||
<Typography variant="body1" component="div">
|
||||
{title}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="body3"
|
||||
component="div"
|
||||
className={styles.subtitle}
|
||||
>
|
||||
{subtitle}
|
||||
</Typography>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
export * from './PresentationKit'
|
||||
|
|
@ -4,7 +4,10 @@ export * from './ComponentGrid'
|
|||
export * from './StorybookDemo'
|
||||
export * from './ImageGrid'
|
||||
export * from './CardWithIcon'
|
||||
export * from './FigmaIcon'
|
||||
export * from './ChromaticIcon'
|
||||
export * from './Icons/FigmaIcon'
|
||||
export * from './Icons/ChromaticIcon'
|
||||
export * from './Icons/GoogleSlidesIcon'
|
||||
export * from './LogoCard'
|
||||
export * from './PresentationKit'
|
||||
|
||||
export * from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
|
||||
|
|
|
|||
|
|
@ -7,4 +7,23 @@
|
|||
|
||||
.sidebar-menu-divider {
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.DocCardList--no-overview {
|
||||
article:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
article a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
article a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.template-card-title {
|
||||
margin-bottom: 24px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 28 KiB |
Loading…
Reference in New Issue