Positive Theme Design System

"당신이 잠든 사이" 프로젝트를 위한 긍정적이고 활력 넘치는 디자인 시스템입니다.

디자인 철학

핵심 가치

신뢰 (Trust): 전문적이고 안정적인 정보 제공
희망 (Hope): 밝은 미래와 성장 가능성
활력 (Energy): 생동감 있고 역동적인 경험
친근함 (Approachability): 누구나 쉽게 이해하고 사용

감성 키워드

아침, 일출, 새로운 시작, 성장, 기회, 성공, 긍정, 희망, 전문성, 신뢰

컬러 시스템

Primary Colors (주색상)

Sky Blue - 신뢰와 전문성

--primary-50: #f0f9ff    /* 하늘빛 배경 */
--primary-100: #e0f2fe   /* 부드러운 강조 */
--primary-200: #bae6fd   /* 밝은 요소 */
--primary-300: #7dd3fc   /* 호버 효과 */
--primary-400: #38bdf8   /* 메인 액션 */
--primary-500: #0ea5e9   /* 주요 버튼, 링크 */
--primary-600: #0284c7   /* 진한 액센트 */
--primary-700: #0369a1   /* 강조 텍스트 */
--primary-800: #075985   /* 다크 모드 주색 */
--primary-900: #0c4a6e   /* 최고 강조 */

사용 예시:

메인 버튼, CTA
링크, 활성 네비게이션
강조 아이콘
로딩 인디케이터

Golden Sunrise - 성장과 기회

--secondary-50: #fffbeb   /* 따뜻한 배경 */
--secondary-100: #fef3c7  /* 부드러운 하이라이트 */
--secondary-200: #fde68a  /* 밝은 강조 */
--secondary-300: #fcd34d  /* 황금빛 */
--secondary-400: #fbbf24  /* 메인 골드 */
--secondary-500: #f59e0b  /* 주요 액센트 */
--secondary-600: #d97706  /* 진한 골드 */
--secondary-700: #b45309  /* 강조 요소 */
--secondary-800: #92400e  /* 다크 모드 골드 */
--secondary-900: #78350f  /* 최고 강조 */

사용 예시:

중요 알림, 배지
프리미엄 기능 강조
성공 메시지
화제 종목 하이라이트

Mint Fresh - 신선함과 긍정

--accent-50: #f0fdfa    /* 민트 배경 */
--accent-100: #ccfbf1   /* 부드러운 민트 */
--accent-200: #99f6e4   /* 밝은 민트 */
--accent-300: #5eead4   /* 터콰이즈 */
--accent-400: #2dd4bf   /* 메인 민트 */
--accent-500: #14b8a6   /* 주요 액센트 */
--accent-600: #0d9488   /* 진한 민트 */
--accent-700: #0f766e   /* 강조 요소 */
--accent-800: #115e59   /* 다크 모드 민트 */
--accent-900: #134e4a   /* 최고 강조 */

사용 예시:

뉴스 카드 강조
새로운 기능 표시
부가 정보 하이라이트
통계 그래프 보조 색상

Background Colors (배경색)

Light Mode - 따뜻한 아침 햇살

/* 기본 배경 */
--bg-primary: #ffffff           /* 순백색 */
--bg-secondary: #fefefe         /* 아이보리 화이트 */
--bg-tertiary: #f8fafc          /* 연한 회색 */

/* 카드 배경 - 미묘한 그라데이션 */
--card-bg: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%)
--card-hover-bg: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%)

/* 섹션 배경 */
--section-bg-warm: #fffbeb      /* 따뜻한 배경 */
--section-bg-cool: #f0f9ff      /* 시원한 배경 */
--section-bg-fresh: #f0fdfa     /* 신선한 배경 */

Dark Mode - 고요한 밤하늘

/* 기본 배경 - slate 대신 네이비/보라 계열 */
--bg-primary: #0f0e1e           /* 깊은 네이비 */
--bg-secondary: #1a1828         /* 부드러운 보라 */
--bg-tertiary: #252238          /* 밝은 네이비 */

/* 카드 배경 */
--card-bg: linear-gradient(135deg, #1a1828 0%, #1e2747 100%)
--card-hover-bg: linear-gradient(135deg, #1e2747 0%, #2d3561 100%)

/* 섹션 배경 */
--section-bg-warm: #2a1f1a      /* 따뜻한 밤 */
--section-bg-cool: #1a2332      /* 시원한 밤 */
--section-bg-fresh: #1a2b2a     /* 신선한 밤 */

Semantic Colors (의미 색상)

Stock Price Colors - 명확한 시각적 피드백

/* 상승 - 생기 있는 초록 */
--stock-up: #10b981           /* Emerald 500 */
--stock-up-bg: #d1fae5        /* Emerald 100 */
--stock-up-dark: #047857      /* Emerald 700 */

/* 하락 - 명확한 빨강 (과하지 않게) */
--stock-down: #f43f5e         /* Rose 500 */
--stock-down-bg: #ffe4e6      /* Rose 100 */
--stock-down-dark: #be123c    /* Rose 700 */

/* 보합 - 중립적인 회색 */
--stock-neutral: #64748b      /* Slate 500 */
--stock-neutral-bg: #f1f5f9   /* Slate 100 */

Status Colors - 명확한 피드백

/* 성공 */
--success: #10b981            /* Green */
--success-bg: #d1fae5
--success-border: #6ee7b7

/* 경고 */
--warning: #f59e0b            /* Amber */
--warning-bg: #fef3c7
--warning-border: #fcd34d

/* 위험 */
--danger: #ef4444             /* Red */
--danger-bg: #fee2e2
--danger-border: #fca5a5

/* 정보 */
--info: #3b82f6               /* Blue */
--info-bg: #dbeafe
--info-border: #93c5fd

Text Colors (텍스트 색상)

Light Mode

--text-primary: #1e293b       /* Slate 800 - 주요 텍스트 */
--text-secondary: #475569     /* Slate 600 - 보조 텍스트 */
--text-tertiary: #94a3b8      /* Slate 400 - 부가 정보 */
--text-accent: #0ea5e9        /* Primary 500 - 강조 텍스트 */

Dark Mode

--text-primary: #f1f5f9       /* Slate 100 - 주요 텍스트 */
--text-secondary: #cbd5e1     /* Slate 300 - 보조 텍스트 */
--text-tertiary: #64748b      /* Slate 500 - 부가 정보 */
--text-accent: #38bdf8        /* Primary 400 - 강조 텍스트 */

Border & Shadow

Borders

/* Light Mode */
--border-light: #e2e8f0       /* Slate 200 */
--border-medium: #cbd5e1      /* Slate 300 */
--border-heavy: #94a3b8       /* Slate 400 */

/* Dark Mode */
--border-dark-light: #334155  /* Slate 700 */
--border-dark-medium: #475569 /* Slate 600 */
--border-dark-heavy: #64748b  /* Slate 500 */

Shadows - 깊이감과 부드러움

/* Light Mode */
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05)
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)
--shadow-glow: 0 0 20px rgba(14, 165, 233, 0.3) /* 주색상 글로우 */

/* Dark Mode */
--shadow-dark-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3)
--shadow-dark-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)
--shadow-dark-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4)
--shadow-dark-glow: 0 0 20px rgba(56, 189, 248, 0.2)

타이포그래피

폰트 패밀리

한글 폰트

/* Primary - 본문용 */
--font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif

/* Display - 제목용 */
--font-display: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif

/* Mono - 숫자/코드 */
--font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace

영문 폰트

--font-en-primary: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif
--font-en-display: 'Poppins', sans-serif

폰트 크기 & 행간

/* Display - 큰 제목 */
--text-display-xl: 3.75rem    /* 60px - h1 */
--text-display-lg: 3rem       /* 48px - h1 */
--text-display-md: 2.25rem    /* 36px - h2 */

/* Heading - 제목 */
--text-heading-lg: 1.875rem   /* 30px - h2 */
--text-heading-md: 1.5rem     /* 24px - h3 */
--text-heading-sm: 1.25rem    /* 20px - h4 */

/* Body - 본문 */
--text-body-lg: 1.125rem      /* 18px */
--text-body-md: 1rem          /* 16px - 기본 */
--text-body-sm: 0.875rem      /* 14px */
--text-body-xs: 0.75rem       /* 12px */

/* Line Height */
--leading-tight: 1.25
--leading-normal: 1.5
--leading-relaxed: 1.75
--leading-loose: 2

폰트 굵기

--font-light: 300
--font-normal: 400
--font-medium: 500
--font-semibold: 600
--font-bold: 700
--font-extrabold: 800

제목 스타일 - 그라데이션 효과

/* 그라데이션 텍스트 - 메인 제목 */
.heading-gradient {
  background: linear-gradient(135deg, #0ea5e9 0%, #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 그라데이션 텍스트 - 골드 강조 */
.heading-gradient-gold {
  background: linear-gradient(135deg, #f59e0b 0%, #ef4444 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

레이아웃 & 스페이싱

Container Widths

--container-sm: 640px
--container-md: 768px
--container-lg: 1024px
--container-xl: 1280px
--container-2xl: 1536px

Spacing Scale

--space-1: 0.25rem    /* 4px */
--space-2: 0.5rem     /* 8px */
--space-3: 0.75rem    /* 12px */
--space-4: 1rem       /* 16px */
--space-5: 1.25rem    /* 20px */
--space-6: 1.5rem     /* 24px */
--space-8: 2rem       /* 32px */
--space-10: 2.5rem    /* 40px */
--space-12: 3rem      /* 48px */
--space-16: 4rem      /* 64px */
--space-20: 5rem      /* 80px */
--space-24: 6rem      /* 96px */

Border Radius

--radius-sm: 0.375rem   /* 6px */
--radius-md: 0.5rem     /* 8px */
--radius-lg: 0.75rem    /* 12px */
--radius-xl: 1rem       /* 16px */
--radius-2xl: 1.5rem    /* 24px */
--radius-full: 9999px   /* 원형 */

Grid System

/* 12-column grid */
.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.5rem;
}

/* Responsive columns */
.col-1 { grid-column: span 1; }
.col-2 { grid-column: span 2; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-12 { grid-column: span 12; }

컴포넌트 스타일

Card - 입체감과 생동감

/* Light Mode Card */
.card {
  background: linear-gradient(135deg, #ffffff 0%, #f0f9ff 100%);
  border: 1px solid rgba(226, 232, 240, 0.8);
  border-radius: 1rem;
  padding: 1.5rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card:hover {
  background: linear-gradient(135deg, #ffffff 0%, #e0f2fe 100%);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
              0 0 20px rgba(14, 165, 233, 0.2);
  transform: translateY(-4px);
}

/* Dark Mode Card */
.dark .card {
  background: linear-gradient(135deg, #1a1828 0%, #1e2747 100%);
  border: 1px solid rgba(71, 85, 105, 0.5);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
}

.dark .card:hover {
  background: linear-gradient(135deg, #1e2747 0%, #2d3561 100%);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5),
              0 0 20px rgba(56, 189, 248, 0.15);
}

Button - 명확하고 매력적인

/* Primary Button */
.btn-primary {
  background: linear-gradient(135deg, #0ea5e9 0%, #0284c7 100%);
  color: white;
  font-weight: 600;
  padding: 0.75rem 1.5rem;
  border-radius: 0.75rem;
  border: none;
  box-shadow: 0 4px 6px -1px rgba(14, 165, 233, 0.3);
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
  box-shadow: 0 10px 15px -3px rgba(14, 165, 233, 0.4);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Secondary Button */
.btn-secondary {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  /* ... 나머지 동일 */
}

/* Ghost Button */
.btn-ghost {
  background: transparent;
  color: var(--primary-600);
  border: 2px solid var(--primary-400);
  /* ... */
}

Input Fields - 친근하고 명확한

.input {
  background: var(--bg-primary);
  border: 2px solid var(--border-light);
  border-radius: 0.75rem;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  transition: all 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
}

.dark .input {
  background: var(--bg-secondary);
  border-color: var(--border-dark-light);
  color: var(--text-primary);
}

Badge & Pills - 눈에 띄는 정보

/* Primary Badge */
.badge-primary {
  background: linear-gradient(135deg, #bae6fd 0%, #7dd3fc 100%);
  color: var(--primary-700);
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.875rem;
  font-weight: 600;
}

/* Gold Badge - 중요 정보 */
.badge-gold {
  background: linear-gradient(135deg, #fde68a 0%, #fbbf24 100%);
  color: var(--secondary-800);
}

/* Success Badge */
.badge-success {
  background: #d1fae5;
  color: #065f46;
}

애니메이션 & 인터랙션

Transition Timing

--transition-fast: 150ms
--transition-normal: 200ms
--transition-slow: 300ms
--transition-slower: 500ms

--easing-smooth: cubic-bezier(0.4, 0, 0.2, 1)
--easing-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55)
--easing-elastic: cubic-bezier(0.175, 0.885, 0.32, 1.275)

Hover Effects

/* Card Lift */
.hover-lift {
  transition: transform 0.3s var(--easing-smooth),
              box-shadow 0.3s var(--easing-smooth);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* Glow Effect */
.hover-glow {
  transition: box-shadow 0.3s ease;
}

.hover-glow:hover {
  box-shadow: 0 0 20px rgba(14, 165, 233, 0.4);
}

/* Scale */
.hover-scale {
  transition: transform 0.2s var(--easing-smooth);
}

.hover-scale:hover {
  transform: scale(1.05);
}

Loading States

/* Spinner */
.spinner {
  border: 3px solid rgba(14, 165, 233, 0.2);
  border-top-color: var(--primary-500);
  border-radius: 50%;
  width: 2rem;
  height: 2rem;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Skeleton */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--bg-tertiary) 0%,
    var(--border-light) 50%,
    var(--bg-tertiary) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

Fade & Slide Animations

/* Fade In */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 0.5s var(--easing-smooth);
}

/* Slide Up */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.slide-up {
  animation: slideUp 0.5s var(--easing-smooth);
}

Chart Styling (Recharts)

Line Chart - 명확하고 아름다운

// 컬러 팔레트
const chartColors = {
  primary: '#0ea5e9',     // Sky Blue
  secondary: '#f59e0b',   // Golden
  accent: '#14b8a6',      // Mint
  up: '#10b981',          // Green
  down: '#f43f5e',        // Rose
};

// 그라데이션 정의
<defs>
  <linearGradient id="colorPrice" x1="0" y1="0" x2="0" y2="1">
    <stop offset="5%" stopColor={chartColors.primary} stopOpacity={0.3} />
    <stop offset="95%" stopColor={chartColors.primary} stopOpacity={0} />
  </linearGradient>
</defs>

// Line 스타일
<Line
  type="monotone"
  dataKey="price"
  stroke={chartColors.primary}
  strokeWidth={3}
  fill="url(#colorPrice)"
  dot={false}
  activeDot={{ r: 6, fill: chartColors.primary }}
/>

Dark Mode Chart Styling

const { theme } = useTheme();

const axisColor = theme === 'dark' ? '#cbd5e1' : '#64748b';
const gridColor = theme === 'dark' ? '#334155' : '#e2e8f0';

<XAxis
  stroke={axisColor}
  tick={{ fill: axisColor }}
  style={{ fontSize: '0.875rem' }}
/>

<YAxis
  stroke={axisColor}
  tick={{ fill: axisColor }}
/>

<CartesianGrid
  strokeDasharray="3 3"
  stroke={gridColor}
  opacity={0.3}
/>

<Tooltip
  contentStyle={{
    backgroundColor: theme === 'dark' ? '#1a1828' : '#ffffff',
    border: 'none',
    borderRadius: '0.75rem',
    boxShadow: theme === 'dark'
      ? '0 10px 15px -3px rgba(0, 0, 0, 0.5)'
      : '0 10px 15px -3px rgba(0, 0, 0, 0.1)',
  }}
  labelStyle={{
    color: theme === 'dark' ? '#f1f5f9' : '#1e293b',
    fontWeight: 600,
  }}
/>

사용 예시

메인 대시보드 헤더

<div className="relative overflow-hidden bg-gradient-to-br from-primary-50 via-white to-secondary-50 dark:from-[#0f0e1e] dark:via-[#1a1828] dark:to-[#1e2747] rounded-2xl p-8 mb-8">
  {/* 배경 장식 요소 */}
  <div className="absolute top-0 right-0 w-64 h-64 bg-primary-200/20 dark:bg-primary-800/10 rounded-full blur-3xl" />
  <div className="absolute bottom-0 left-0 w-48 h-48 bg-secondary-200/20 dark:bg-secondary-800/10 rounded-full blur-3xl" />

  {/* 내용 */}
  <div className="relative z-10">
    <h1 className="text-4xl md:text-5xl font-bold mb-3">
      <span className="bg-gradient-to-r from-primary-600 to-purple-600 bg-clip-text text-transparent">
        좋은 아침입니다!
      </span>
    </h1>
    <p className="text-lg text-slate-600 dark:text-slate-300">
      오늘도 새로운 기회가 기다리고 있습니다
    </p>
  </div>
</div>

주가 카드 - 긍정적 강조

<div className="group card hover:shadow-2xl hover:scale-[1.02] transition-all duration-300">
  {/* 상단 헤더 */}
  <div className="flex items-start justify-between mb-4">
    <div>
      <h3 className="text-2xl font-bold bg-gradient-to-r from-slate-900 to-primary-700 dark:from-slate-100 dark:to-primary-400 bg-clip-text text-transparent">
        {stock.name}
      </h3>
      <p className="text-slate-500 dark:text-slate-400">{stock.symbol}</p>
    </div>

    {/* 변동률 배지 - 동적 색상 */}
    <div className={`
      px-4 py-2 rounded-full font-semibold
      ${isPositive
        ? 'bg-gradient-to-r from-emerald-50 to-emerald-100 dark:from-emerald-900/30 dark:to-emerald-800/30 text-emerald-700 dark:text-emerald-400'
        : 'bg-gradient-to-r from-rose-50 to-rose-100 dark:from-rose-900/30 dark:to-rose-800/30 text-rose-700 dark:text-rose-400'
      }
    `}>
      {isPositive ? '↗' : '↘'} {Math.abs(stock.changePercent).toFixed(2)}%
    </div>
  </div>

  {/* 차트 */}
  <div className="my-6">
    <MiniStockChart data={chartData} isPositive={isPositive} />
  </div>

  {/* 가격 정보 */}
  <div className="flex items-baseline gap-2">
    <span className="text-3xl font-bold text-slate-900 dark:text-white">
      ${stock.price.toFixed(2)}
    </span>
    <span className={`text-lg font-semibold ${isPositive ? 'text-emerald-600 dark:text-emerald-400' : 'text-rose-600 dark:text-rose-400'}`}>
      {isPositive ? '+' : ''}{stock.change.toFixed(2)}
    </span>
  </div>
</div>

버튼 그룹

<div className="flex gap-3">
  {/* Primary Action */}
  <button className="
    px-6 py-3 rounded-xl font-semibold text-white
    bg-gradient-to-r from-primary-500 to-primary-600
    hover:from-primary-600 hover:to-primary-700
    shadow-lg shadow-primary-500/30
    hover:shadow-xl hover:shadow-primary-500/40
    hover:-translate-y-0.5
    active:translate-y-0
    transition-all duration-200
  ">
    브리핑 생성하기
  </button>

  {/* Secondary Action */}
  <button className="
    px-6 py-3 rounded-xl font-semibold
    bg-white dark:bg-slate-800
    text-primary-600 dark:text-primary-400
    border-2 border-primary-300 dark:border-primary-700
    hover:bg-primary-50 dark:hover:bg-primary-900/20
    hover:-translate-y-0.5
    active:translate-y-0
    transition-all duration-200
  ">
    히스토리 보기
  </button>
</div>

Tailwind Config 적용

tailwind.config.js

module.exports = {
  content: [
    './pages/**/*.{js,ts,jsx,tsx,mdx}',
    './components/**/*.{js,ts,jsx,tsx,mdx}',
  ],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        // Primary - Sky Blue
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          200: '#bae6fd',
          300: '#7dd3fc',
          400: '#38bdf8',
          500: '#0ea5e9',
          600: '#0284c7',
          700: '#0369a1',
          800: '#075985',
          900: '#0c4a6e',
        },
        // Secondary - Golden
        secondary: {
          50: '#fffbeb',
          100: '#fef3c7',
          200: '#fde68a',
          300: '#fcd34d',
          400: '#fbbf24',
          500: '#f59e0b',
          600: '#d97706',
          700: '#b45309',
          800: '#92400e',
          900: '#78350f',
        },
        // Accent - Mint
        accent: {
          50: '#f0fdfa',
          100: '#ccfbf1',
          200: '#99f6e4',
          300: '#5eead4',
          400: '#2dd4bf',
          500: '#14b8a6',
          600: '#0d9488',
          700: '#0f766e',
          800: '#115e59',
          900: '#134e4a',
        },
        // Stock Colors
        'stock-up': '#10b981',
        'stock-down': '#f43f5e',
        // Background Colors
        'light-bg': '#ffffff',
        'light-card': '#fefefe',
        'light-border': '#e2e8f0',
        'dark-bg': '#0f0e1e',
        'dark-card': '#1a1828',
        'dark-border': '#334155',
      },
      fontFamily: {
        sans: ['Pretendard', 'Inter', '-apple-system', 'BlinkMacSystemFont', 'sans-serif'],
        display: ['Pretendard', 'Poppins', 'sans-serif'],
        mono: ['JetBrains Mono', 'Fira Code', 'monospace'],
      },
      boxShadow: {
        'glow-sm': '0 0 10px rgba(14, 165, 233, 0.3)',
        'glow': '0 0 20px rgba(14, 165, 233, 0.3)',
        'glow-lg': '0 0 30px rgba(14, 165, 233, 0.4)',
      },
      animation: {
        'fade-in': 'fadeIn 0.5s ease-in-out',
        'slide-up': 'slideUp 0.5s ease-in-out',
        'shimmer': 'shimmer 1.5s ease-in-out infinite',
      },
      keyframes: {
        fadeIn: {
          '0%': { opacity: '0' },
          '100%': { opacity: '1' },
        },
        slideUp: {
          '0%': { opacity: '0', transform: 'translateY(20px)' },
          '100%': { opacity: '1', transform: 'translateY(0)' },
        },
        shimmer: {
          '0%': { backgroundPosition: '200% 0' },
          '100%': { backgroundPosition: '-200% 0' },
        },
      },
    },
  },
  plugins: [],
}

접근성 고려사항

색상 대비

WCAG AA 기준 최소 4.5:1 대비율 유지
중요한 정보는 색상만으로 전달하지 않음
Dark mode에서도 충분한 대비 확보

키보드 네비게이션

모든 인터랙티브 요소에 포커스 스타일 제공
Tab 순서가 논리적 흐름을 따름
Skip navigation 링크 제공

스크린 리더

의미 있는 alt 텍스트
ARIA 레이블 적절히 사용
시맨틱 HTML 사용

마무리

이 디자인 시스템은 "당신이 잠든 사이" 프로젝트에 신뢰, 희망, 활력을 불어넣습니다.

핵심 원칙

긍정적인 첫인상: 밝고 따뜻한 색상으로 사용자를 환영
명확한 정보 전달: 색상과 타이포그래피로 시각적 계층 구축
부드러운 인터랙션: 애니메이션과 전환 효과로 즐거운 경험
일관된 경험: Light/Dark 모드 모두에서 동일한 품질

매일 아침 사용자에게 새로운 기회와 희망을 전달하는 서비스답게, 디자인도 그 메시지를 담아야 합니다. 🌅✨

positive-theme-design

Installation

Similar popular skills

Agent compatibility

Package contents

History

SKILL.md

Positive Theme Design System

디자인 철학

핵심 가치

감성 키워드

컬러 시스템

Primary Colors (주색상)

Sky Blue - 신뢰와 전문성

Golden Sunrise - 성장과 기회

Mint Fresh - 신선함과 긍정

Background Colors (배경색)

Light Mode - 따뜻한 아침 햇살

Dark Mode - 고요한 밤하늘

Semantic Colors (의미 색상)

Stock Price Colors - 명확한 시각적 피드백

Status Colors - 명확한 피드백

Text Colors (텍스트 색상)

Light Mode

Dark Mode

Border & Shadow

Borders

Shadows - 깊이감과 부드러움

타이포그래피

폰트 패밀리

한글 폰트

영문 폰트

폰트 크기 & 행간

폰트 굵기

제목 스타일 - 그라데이션 효과

레이아웃 & 스페이싱

Container Widths

Spacing Scale

Border Radius

Grid System

컴포넌트 스타일

Card - 입체감과 생동감

Button - 명확하고 매력적인

Input Fields - 친근하고 명확한

Badge & Pills - 눈에 띄는 정보

애니메이션 & 인터랙션

Transition Timing

Hover Effects

Loading States

Fade & Slide Animations

Chart Styling (Recharts)

Line Chart - 명확하고 아름다운

Dark Mode Chart Styling

사용 예시

메인 대시보드 헤더

주가 카드 - 긍정적 강조

버튼 그룹

Tailwind Config 적용

tailwind.config.js

접근성 고려사항

색상 대비

키보드 네비게이션

스크린 리더

마무리

핵심 원칙