Skip to content

test.md

Latest commit

 

History

History
171 lines (128 loc) · 3.62 KB

test.md

File metadata and controls

171 lines (128 loc) · 3.62 KB
Raw

Design System - Helix Project

Generated by Project Helix v0.6.0 Date: 2026-04-19T17:06:22.009356

Brand Identity

Property Value
Brand Name Helix Project
Version 1.0.0

Color Palette

Primary Colors

Color Name Hex Usage
Primary #0066CC Main actions, links, highlights
Secondary #6B7280 Secondary elements, body text
Accent #14B8A6 CTAs, notifications, focus states

Semantic Colors

Color Name Hex Usage
Success #10B981 Success states, positive feedback
Warning #F59E0B Warning states, caution
Error #EF4444 Error states, destructive actions
Info #3B82F6 Information states

Neutral Colors

Name Hex Usage
White #FFFFFF Background
Gray 50 #F9FAFB Light backgrounds
Gray 100 #F3F4F6 Borders, dividers
Gray 200 #E5E7EB Disabled states
Gray 300 #D1D5DB Placeholders
Gray 400 #9CA3AF Secondary text
Gray 500 #6B7280 Body text
Gray 600 #4B5563 Headings
Gray 700 #374151 Primary headings
Gray 800 #1F2937 Dark text
Gray 900 #111827 Darkest text

Typography

Font Family

Element Font Fallback
Headings Inter, system-ui, sans-serif system-ui, sans-serif
Body Inter, system-ui, sans-serif system-ui, sans-serif
Code JetBrains Mono, monospace monospace

Font Sizes

Name Size Line Height Usage
xs 12px 1.5 Captions, labels
sm 14px 1.5 Secondary text
base 16px 1.6 Body text
lg 18px 1.6 Lead text
xl 20px 1.4 H4
2xl 24px 1.4 H3
3xl 30px 1.2 H2
4xl 36px 1.2 H1
5xl 48px 1.1 Hero

Font Weights

Weight Value Usage
Regular 400 Body text
Medium 500 Emphasized body
Semibold 600 Headings
Bold 700 Hero, emphasis

Spacing

Base unit: 4px

Name Value Usage
0 0 No spacing
1 4px Tight spacing
2 8px Default spacing
3 12px Section spacing
4 16px Large gaps
6 24px Section breaks
8 32px Major sections
12 48px Page margins

Border Radius

Name Value Usage
none 0 No radius
sm 4px Inputs, small buttons
md 8px Cards, containers
lg 16px Modals, large elements
full 9999px Pills, avatars

Shadows

Name Value Usage
sm 0 1px 2px rgba(0,0,0,0.05) Subtle elevation
md 0 4px 6px rgba(0,0,0,0.1) Cards
lg 0 10px 15px rgba(0,0,0,0.1) Modals, dropdowns
xl 0 20px 25px rgba(0,0,0,0.15) Overlays

Components

Buttons

Primary:   background: #0066CC, color: white, border-radius: 4px
Secondary: background: transparent, color: #0066CC, border: 1px solid #0066CC
Ghost:     background: transparent, color: #0066CC

Inputs

Background: #FFFFFF
Border: 1px solid #E5E7EB
Focus: border-color: #0066CC, box-shadow: 0 0 0 3px #0066CC20

Cards

Background: #FFFFFF
Border: 1px solid #E5E7EB
Border-radius: 8px
Shadow: md
Padding: 24px

Responsive Breakpoints

Name Width Target
sm 640px Mobile landscape
md 768px Tablets
lg 1024px Laptops
xl 1280px Desktops
2xl 1536px Large screens

Generated by Helix Design Skill - AI Era Software Engineering