Status Indicators
상태 표시기
ステータスインジケーター
Small, rectangular badges with subtle outlines and high-contrast text for critical feedback.
중요한 피드백을 위한 미묘한 외곽선과 높은 대비의 텍스트를 가진 작은 직사각형 뱃지.
重要なフィードバックのための、微妙な輪郭と高コントラストのテキストを備えた小さな長方形のバッジ。
A calm, functional aesthetic designed for operational clarity. It utilizes a pure white canvas, slate-tinted surfaces, and high-precision spacing to minimize cognitive load.
업무적 명확성을 위해 설계된 차분하고 기능적인 미학입니다. 순백의 캔버스, 슬레이트 톤의 표면, 정교한 간격을 활용하여 사용자의 인지 부하를 최소화합니다.
運用の明快さのために設計された、穏やかで機能的な美学です。純白のキャンバス、スレートの色合いの表面、そして高精度な間隔を利用して認知負荷を最小限に抑えます。
Design Specifications
디자인 사양
デザイン仕様
Canvas & Surface
캔버스 및 표면
キャンバスとサーフェス
#FFFFFF / #EDF2F4
Base white for content clarity and slate-tinted panels for structural hierarchy.
콘텐츠 명확성을 위한 기본 흰색과 구조적 위계를 위한 슬레이트 톤 패널의 조화.
コンテンツの明快さのためのベースホワイトと、構造的な階層のためのスレート色パネル。
Typography Density
타이포그래피 밀도
タイポグラフィ密度
Inter 400 / 600
Restrained sans-serif type with strict hierarchy and optimized line height for readability.
엄격한 계층 구조와 가독성을 위해 최적화된 줄 간격을 가진 절제된 산세리프 타입.
厳格な階層と可読性のために最適化された行の高さを備えた、抑制されたサンセリフ書体。
Layout Precision
레이아웃 정밀도
レイアウトの精度
1px Borders / Fine Spacing
Separation through subtle 1px lines (#CCD6DD) instead of shadows or gradients.
그림자나 그라데이션 대신 미묘한 1px 선(#CCD6DD)을 통한 공간 분리.
シャドウやグラデーションの代わりに、微妙な1pxの線(#CCD6DD)による分離。
Visual Showcases
시각적 쇼케이스
ビジュアルショーケース
Small, rectangular badges with subtle outlines and high-contrast text for critical feedback.
중요한 피드백을 위한 미묘한 외곽선과 높은 대비의 텍스트를 가진 작은 직사각형 뱃지.
重要なフィードバックのための、微妙な輪郭と高コントラストのテキストを備えた小さな長方形のバッジ。
Quiet moments are useful. Select a filter to see more data or start a new task.
비어있는 상태도 중요합니다. 필터를 선택하여 더 많은 데이터를 보거나 새 작업을 시작하세요.
静かな瞬間は有用です。フィルタを選択して詳細を表示するか、新しいタスクを開始してください。
Design a professional SaaS dashboard in 'Quiet Utility' style. CORE AESTHETIC: - Canvas: Pure white (#FFFFFF) background. - Surfaces: Light slate-tinted panels (#EDF2F4) for sidebar and secondary containers. - Borders: Subtle 1px lines (#CCD6DD). Strictly no shadows or gradients. - Typography: Inter (Sans-Serif). Headings at 600 weight, body at 400. Letter-spacing: -0.02em for titles. - Accents: Restrained use of Slate-Blue (#526371) for primary actions and highlights. UI PRINCIPLES: - High information density with precise 4px or 8px grid spacing. - Rectangular components with small 4px or 6px border-radius. - Functional iconography using thin line weights. - Badge system: Rectangular, muted colors, high-impact readability. LAYOUT: - Left sidebar with 240px width, slate-tinted. - Content header with clear breadcrumbs and search input. - Multi-card dashboard with flat structural separation. FORBIDDEN: - Rounded buttons over 8px. - Background gradients or blur effects (glassmorphism). - Saturated primary colors (keep them muted and gray-tinted). - Large decorative illustrations.
'Quiet Utility' 스타일의 전문 SaaS 대시보드를 디자인해줘. 핵심 미학: - 캔버스: 순백색(#FFFFFF) 배경. - 표면: 사이드바와 보조 컨테이너를 위한 옅은 슬레이트 톤 패널(#EDF2F4). - 보더: 미묘한 1px 선(#CCD6DD). 그림자나 그라데이션 절대 금지. - 타이포그래피: Inter (Sans-Serif). 헤딩은 600, 본문은 400 두께. 타이틀의 자간은 -0.02em. - 액센트: 주요 동작 및 하이라이트를 위한 절제된 슬레이트 블루(#526371) 사용. UI 원칙: - 정밀한 4px 또는 8px 그리드 간격을 가진 높은 정보 밀도. - 작은 4px 또는 6px 보더 반경을 가진 직사각형 컴포넌트. - 얇은 선 두께를 사용한 기능적 아이콘. - 뱃지 시스템: 직사각형, 뮤트 톤 컬러, 높은 가독성. 레이아웃: - 240px 너비의 슬레이트 톤 왼쪽 사이드바. - 명확한 경로(Breadcrumbs)와 검색 입력이 있는 콘텐츠 헤더. - 플랫한 구조적 분리를 가진 멀티 카드 대시보드. 금지사항: - 8px 이상의 둥근 버튼. - 배경 그라데이션 또는 블러 효과(글래스모피즘). - 채도가 높은 원색(뮤트 톤 및 그레이 톤 유지). - 큰 장식용 일러스트레이션.
'Quiet Utility' スタイルのプロフェッショナルなSaaSダッシュボードをデザインしてください。 コア・エステティック: - キャンバス:純白(#FFFFFF)の背景。 - サーフェス:サイドバーとセカンダリコンテナ用のライトスレート調パネル(#EDF2F4)。 - ボーダー:微妙な1pxの線(#CCD6DD)。シャドウやグラデーションは厳禁。 - タイポグラフィ:Inter(Sans-Serif)。見出しは600、本文は400のウェイト。タイトルの文字間隔は-0.02em。 - アクセント:プライマリアクションとハイライトに控えめにスレートブルー(#526371)を使用。 UIの原則: - 精密な4pxまたは8pxのグリッド間隔による高い情報密度。 - 4pxまたは6pxの小さな境界半径を持つ長方形のコンポーネント。 - 細い線のウェイトを使用した機能的なアイコン。 - バッジシステム:長方形、ミュートカラー、インパクトのある読みやすさ。 LAYOUT: - 左サイドバー(幅240px、スレート調)。 - 明確なパンくずリストと検索入力を備えたコンテンツヘッダー。 - フラットな構造的分離を備えたマルチカードダッシュボード。 禁止事項: - 8pxを超える丸いボタン。 - 背景のグラデーションまたはブラー効果(グラスモーフィズム)。 - 彩度の高い原色(ミュートでグレーがかった色に抑える)。 - 大きな装飾的なイラスト。