Horizon Design System

HashiCorp's 오픈소스 디자인 시스템 를 위한 consistent, accessible 클라우드 management interfaces.

제품 개요

Horizon is HashiCorp's official open-source design system, evolving from the earlier Garden system, providing reusable components, patterns, and guidelines to build unified, accessible, and performant user experiences across HashiCorp's cloud products like Terraform, Vault, Consul, and Boundary. It focuses on enterprise-scale consistency, developer productivity, and modern aesthetics with light/dark themes, supporting React implementations and Figma libraries for seamless collaboration. Component Library: Reusable elements like buttons, forms, tables, navigation, and data visualizations with variants. Design Tokens: Semantic colors, typography, spacing, icons, and motion for theming. Accessibility: WCAG compliance with inclusive patterns and high-contrast support. Tools: Figma kit for prototyping; React components for implementation.

주요 기능

컴포넌트 라이브러리: Reusable elements 같은 buttons, forms, tables, navigation, 및 데이터 visualizations 를 사용한 variants.
디자인 토큰: Semantic 색상, 타이포그래피, 간격, 아이콘, 및 motion 를 위한 theming.
접근성: WCAG compliance 를 사용한 inclusive 패턴 및 high-대비 지원.
도구: Figma 키트 를 위한 프로토타이핑; React 컴포넌트 를 위한 implementation.

장점

+오픈 소스
+실시간 협업
+클라우드 기반, 설치 불필요
+방대한 아이콘 라이브러리

단점

-도입 시 팀 조율 필요
-커스터마이징이 복잡할 수 있음

/// 스펙

가격:
Free
플랫폼:
Browser

ASSETS_DIRECTORY

figma

/// 유사 도구

Material Design

Google's 오픈소스 디자인 시스템 를 위한 consistent, 직관적인 interfaces 전체에 걸쳐 platforms.

Forma 36 Design System

Contentful's 오픈소스 디자인 시스템 를 위한 consistent, accessible content management interfaces.

Friday Design System

오픈소스 Figma UI 키트 를 위한 rapid 프로토타이핑 를 사용한 사용자 정의 가능 컴포넌트.

GOV.UK Design System

official UK government 프레임워크 를 위한 consistent, accessible public 서비스 interfaces.

Microsoft Teams UI Kit

Figma-기반 컴포넌트 및 템플릿 를 위한 디자인 중 consistent 팀 apps.

Figma UI2

Figma's official 디자인 시스템 를 위한 consistent, accessible product interfaces.

Moon Design System

오픈소스 UI 프레임워크 를 위한 consistent, 사용자 정의 가능 digital experiences.

NativeBase Design System

오픈소스 UI 컴포넌트 라이브러리 를 위한 React 네이티브 를 사용한 사용자 정의 가능, accessible 크로스 플랫폼 디자인.

Fluent UI

Microsoft's 오픈소스 UI 프레임워크 를 위한 consistent, accessible experiences 전체에 걸쳐 웹, Windows, iOS, Android, 및 macOS.

Goldman Sachs Design System

internal 프레임워크 를 위한 consistent, accessible enterprise financial interfaces.