Light vs Dark

Dark

네온 글로우 + inset ring

Light

글로우 없음, 보더 강조

라임 글로우는 어두운 배경에서 선명하게 보이지만, 흰 배경에서는 탁해집니다. 라이트 모드에서는 글로우 토큰을 투명하게 유지하고, 보더와 텍스트 컬러로 브랜드를 표현합니다.

Token ruletsx

dark : 0 0 12px rgba(198, 255, 61, 0.4)
light: 0 0 0 transparent

Dark

hover 8, selected 16, focus 12, active 24

Light

hover 6, selected 10, focus 14, active 20

다크는 조율된 8/16/12/24 상태 사다리를 유지하고, 라이트는 6/10/14/20을 사용합니다. 흰 배경에서도 인접 상태를 명확히 구분할 수 있도록 설계하였습니다.

Token ruletsx

dark  hover / selected / focus / active : 0.08 / 0.16 / 0.12 / 0.24
light hover / selected / focus / active : 0.06 / 0.10 / 0.14 / 0.20

Dark

네온 라임 포커스 링

Light

딥 올리브 포커스 링

포커스 CSS는 고정 구조입니다. 보더와 inset shadow를 조합해 레이아웃 이동 없이 2px 링을 만들고, 모드에 따라 focus-ring 토큰만 달라집니다.

Token ruletsx

.input:focus {
  outline: none;
  border-color: var(--focus-ring);
  box-shadow: 0 0 0 1px var(--focus-ring);
}

Dark

글로우 + elevation + inset ring

Light

elevation + inset ring

동일한 hover shadow stack이 모드에 따라 다르게 적용됩니다. 글로우 토큰이 모드별로 flip되기 때문입니다. 다크에서는 글로우와 깊이감이 더해지고, 라이트에서는 inset ring과 shadow 분리로 표현합니다.

Token ruletsx

.card:hover {
  border-color: var(--accent);
  box-shadow: var(--elevation-4), var(--glow-accent-sm), inset 0 0 0 1px var(--accent);
}

Dark

error #F2545B, warning #F59E0B, info #93C5FD, success #22C55E

Light

error #DC2626, warning #B45309, info #2563EB, success #15803D

같은 상태 의미도 라이트 배경에서는 더 진한 색이, 다크 배경에서는 더 밝은 색이 필요합니다. 컨슈머 코드는 raw hex 대신 시맨틱 토큰을 사용해야 합니다.

Token ruletsx

color: var(--error);
color: var(--warning);
color: var(--info);
color: var(--success);

글로우는 다크 모드 전용입니다