Design

Clarity for Security Operations.

복잡한 보안을, 선명한 경험으로.

v0.2.0-preview

Logpresso Design System은 보안 데이터와 운영 경험을 일관되고 신뢰할 수 있는 인터페이스로 연결합니다.

현재 카탈로그 0 component docs
foundation 기준 12 shared primitives
패턴 기준 18 screen + UX baselines
governance 5 status groups

색상

열기

Figma UI-5.1의 color/primitive와 color/semantic 컬렉션을 함께 확인합니다.

primitive190Dark / Light
semantic86alias
sourceUI-5.1Figma

타이포그래피

열기

Logpresso CSS Styles의 text style scale과 family, weight, line-height를 확인합니다.

116 styles 19 groups Pretendard D2Coding

상태

열기

interaction, runtime, selection 의미를 나눠 상태 vocabulary와 ownership boundary를 확인합니다.

default focus-visible loading selected

Figma foundation

Color

UI-5.1 파일의 color/primitive와 color/semantic 컬렉션을 문서 화면에서 직접 확인합니다.

json

color/primitive

Primitive colors

0

color/semantic

Semantic colors

0

Figma foundation

Icon

Material Icons를 source로 두고, UI-5.1 컴포넌트에서 확인되는 icon footprint와 정렬 기준만 문서화합니다.

md

Figma-derived baseline

Spacing

UI-5.1 컴포넌트의 auto-layout gap과 padding 빈도에서 반복되는 compact spacing 기준을 확인합니다.

md

Figma foundation

Typography

Logpresso CSS Styles Figma 파일의 text style scale과 current spec typography foundation을 함께 확인합니다.

md

Figma-derived baseline

Radius

UI-5.1 컴포넌트에서 반복되는 corner radius를 기준으로 surface, control, pill의 경계를 정리합니다.

md

Figma-derived baseline

Border

stroke, divider, container boundary는 UI-5.1의 1px stroke 반복값을 기본으로 삼습니다.

md

Figma-derived baseline

Shadow

hover/base elevation과 pressed inner shadow처럼 Figma effect 사용이 반복되는 경우만 baseline으로 기록합니다.

md

Figma foundation

State

공통 상태 vocabulary와 ownership boundary를 interaction, runtime, selection 의미로 나눠 확인합니다.

md

Implementation boundary

Accessibility

접근성은 Figma 시각값이 아니라 keyboard, focus-visible, ARIA, contrast, reduced motion 계약으로 관리합니다.

md

Implementation boundary

Motion

Figma에 motion token이 없으므로, 컴포넌트 상태 전환에서 반복되는 짧은 transition만 구현 기준으로 둡니다.

md

Implementation boundary

Layer

overlay, popover, modal, drawer는 Figma depth보다 portal/focus-return/z-index role을 우선합니다.

md

Implementation boundary

Content

label, helper, error, empty, i18n 문구는 component state와 제품 copy를 섞지 않는 규칙으로 관리합니다.

md

AI Agent Entry

Read This System Safely

01 Choose screen intent

새 SONAR 화면의 목적을 먼저 정하고, 가장 가까운 pattern을 고릅니다.

02 Read safe sources

manifest, AI guide, pattern 문서, component 문서를 reading order대로 읽습니다.

03 Compose with boundaries

parent shell과 child family를 분리하고 token, state, ownership 경계를 유지합니다.

04 Output mockup or code

preview, code example, output template을 따라 mockup 또는 프론트엔드 구조를 바로 만듭니다.

Mockup starter

md 
목표: Logpresso SONAR의 새 비즈니스 로직 화면 mockup을 만든다.
패턴: 가장 가까운 screen pattern을 먼저 고른다.
읽기 순서: manifest → AI guide → pattern → parent composition → child family → required foundation.
유지할 규칙: semantic token first, parent owns structure, child owns recipe, exact state naming.
반드시 포함: default, loading, empty, error, permission, selected/current state.
추정 금지: 제품 copy, 고객 데이터, undocumented business logic.

Frontend starter

json 
목표: Logpresso SONAR 화면을 프론트엔드로 바로 구현한다.
참조: component preview, code example, agent handoff, pattern constraint, manifest hints.
구현 규칙: light-first, Pretendard first, radius 8, compact spacing, border/divider hierarchy.
조합 규칙: shell은 parent composition으로, control recipe는 child family 문서로 결정한다.
추정 금지: undocumented state, token value, permission policy, API behavior.

Required outputs

md
  • source documents used
  • screen intent
  • layout composition
  • state coverage
  • component usage table
  • accessibility contract
  • content contract
  • deferred assumptions

Do not infer

md
  • missing product copy
  • missing token values
  • customer-like data
  • undocumented component states
  • business logic
  • permission policy

Validation gates

schema
  • node tools/sync-publication-bundle.mjs --check
  • node tools/generate-design-system-manifest.mjs --check
  • node tools/extract-design-tokens.mjs --check
  • node tools/generate-accessibility-coverage.mjs --check
  • node tools/validate-public-design-system.mjs
  • node tools/generate-agent-starters.mjs --check
  • node tools/sync-component-index.mjs --check
  • node tools/validate-self-contained-publication.mjs
  • node tools/audit-public-references.mjs --check --json
  • node --check app.js
Supporting machine-readable assets 8 references
05 Starter pack

Machine-readable starters for mockup, frontend, pattern, and component handoff.

 06 Token registry

Semantic roles, theme values, motion, and layers.

 07 Accessibility matrix

Role, keyboard, state, and focus baselines.

 08 Accessibility coverage

Coverage ledger for all 67 components.

 09 Reference screens

Screen composition starters.

 10 Output template

Required AI design output format.

 11 Readiness report

Current readiness and residual limits.

 12 Publication policy

Public source and distribution boundary.

Core Guardrails

01

Semantic token first

raw hex보다 semantic role을 먼저 읽고, fallback은 token과 함께 기록된 경우에만 사용합니다.

02

Parent owns structure

shell, placement, cluster, order는 parent composition 문서가 소유합니다.

03

Child owns recipe

슬롯, 크기, 간격, 타이포그래피, 토큰, 상태는 child family 문서가 소유합니다.

04

State names stay exact

focused, focus-visible, pressed, selected, active를 서로 바꿔 쓰지 않습니다.

System model

Source Order & Ownership

Reading order

    Ownership split

    State model

    비슷한 단어를 섞지 않고, runtime state와 interaction preview state를 분리합니다.

    Governance

    Component Taxonomy

    Focus ring rule

    컴포넌트 상태를 보기 전에 바깥 포커스 규칙을 먼저 고정합니다

    포커스 링은 hover, active, selected, current, open state가 아닙니다. 키보드로 접근 가능한 인터랙티브 객체 전반에 공통으로 붙는 keyboard-focus treatment이며, 객체 shape를 유지한 채 객체 바깥에 머물러야 합니다.

    • 인터랙티브 객체 바깥 2px gap을 남기고, 그 바깥에 2px ring을 그립니다.
    • 유한 radius 객체는 기본 outer radius에 radius + 4px 값을 focus-ring radius로 씁니다.
    • pill이나 circle처럼 full radius를 쓰는 객체는 바깥 링도 full radius를 유지합니다.

    Button / sm

    기본 radius 8px → 포커스 링 radius 12px

    Button / pill

    full radius 객체는 바깥 링도 full radius를 유지합니다.

    Documentation template

    컴포넌트 문서 템플릿은 개요 기준으로만 유지합니다

    템플릿은 active component truth가 아니므로 별도 컴포넌트 페이지로 노출하지 않습니다. 신규 컴포넌트 문서를 만들 때 목적, 구조, 상태, 사용 기준, AI handoff 항목을 확인하는 개요 자료로만 사용합니다.

    source

    Component registry

    Components

    Patterns

    SONAR Screen Patterns

    Foundation

    Shared System