--- title: AFFiNE Downhills Recap - New Design System of AFFiNE author: AFFiNE tags: Release Events slug: downhills-recap-design-system description: AFFINE Downhills Introduces New Design System for Improved Visual Experience created: 2023-04-03 updated: 2023-04-03 layout: blog publish: true ---  # Introduction: AFFINE Downhills has introduced a new design system that promises a better visual experience for users. This article will discuss the details of the design system, which is composed of two main parts: the design language and the components. <div style="text-align:center;"> <iframe style="border-radius: 15px;" width="560" height="315" src="https://www.youtube.com/embed/LSM6gVWKjq8" title="Introduction of AFFiNE - the next-gen knowledge-base - Open Source Notion/Miro Alternative" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> </div> ## Layout: The layout of the new design system has been adjusted for better cross-platform compatibility, and a gutter value of 20px has been chosen for a better sense of balance and comfort. ## Font: The font settings have been evaluated through four distinct aspects, and the best fit size for reading text size was determined to be 16. The font color has been intentionally designed to avoid pure neutrals and incorporates thematic colors to make them elegant and not so dull. ## Color: The color choice has been enhanced to provide clear and powerful contrast to various elements. The brightness and saturation of the colors have been enhanced to make linked text clearer and more visually expressive. The new theme colors generate a multi-step palette of similar and secondary colors, making the colors more logical and reusable. ## Icon: The icon part has been improved to form a uniform style, while reducing the complexity of the specification. The font shape, visual style, line thickness, inner and outer rounded corners, and safety margins of the icon have been determined to create a consistent and harmonious look. ## Conclusion: The contents of the components will continue to be open for open-source use, and the design system promises to provide a simple, comfortable, and distinct visual experience for users.
title: AFFiNE Downhills Recap - New Design System of AFFiNE
author: AFFiNE
tags: Release Events
slug: downhills-recap-design-system
description: AFFINE Downhills Introduces New Design System for Improved Visual Experience
created: 2023-04-03
updated: 2023-04-03
layout: blog
publish: true
Introduction:
AFFINE Downhills has introduced a new design system that promises a better visual experience for users. This article will discuss the details of the design system, which is composed of two main parts: the design language and the components.
Layout:
The layout of the new design system has been adjusted for better cross-platform compatibility, and a gutter value of 20px has been chosen for a better sense of balance and comfort.
Font:
The font settings have been evaluated through four distinct aspects, and the best fit size for reading text size was determined to be 16. The font color has been intentionally designed to avoid pure neutrals and incorporates thematic colors to make them elegant and not so dull.
Color:
The color choice has been enhanced to provide clear and powerful contrast to various elements. The brightness and saturation of the colors have been enhanced to make linked text clearer and more visually expressive. The new theme colors generate a multi-step palette of similar and secondary colors, making the colors more logical and reusable.
Icon:
The icon part has been improved to form a uniform style, while reducing the complexity of the specification. The font shape, visual style, line thickness, inner and outer rounded corners, and safety margins of the icon have been determined to create a consistent and harmonious look.
Conclusion:
The contents of the components will continue to be open for open-source use, and the design system promises to provide a simple, comfortable, and distinct visual experience for users.