Clarity
Establish information hierarchy first; visual elements serve solely to aid comprehension.
SILENCE / EXPERIENCE
Clarity in
every detail.
A design system defining the unique visual language of SILENCE. Built to deliver a clear, consistent experience across all products. Feel free to explore and reference these resources.
Independent design system · Light & dark · Responsive
01 / PHILOSOPHY
Design standards must be clear.
Keep decorations restrained so software functionality takes center stage, highlighting crucial information and actions.
Consistency
Even across different screens, colors, spacing, and states must adhere to identical rules.
Restraint
Use violet accents and motion intentionally only to guide attention to key focus areas.
02 / IDENTITY
Quiet yet distinct presence.
The visual personality of SILENCE embodies composure, precision, and confidence. Below is the official SILENCE logo. Preserve original proportions and colors with transparent backgrounds.
SILENCEBrand expression
Rely on generous white space, subtle violet accents, and articulate typography. Avoid aggressive neon hues, excessive gradients, and heavy drop shadows.
Never arbitrarily alter, re-color, or distort the proportions of the official logo.
03 / TOKENS
Color system.
Define the semantic role of colors before hex values. Click any swatch below to copy its HEX code.
Usage principles
Primary is reserved for main CTAs and active items. Soft serves as highlight backgrounds. Provide explicit text alongside error and success colors.
04 / TYPOGRAPHY
Typography.
Pretendard for Korean and Inter for Latin are preferred. Uninstalled devices fall back seamlessly to clean system fonts.
Make it
feel effortless.
feel effortless.
DISPLAY / 56PX · 700 · LINE HEIGHT 1.12
Disciplined design transforms experiences.
HEADING / 30PX · 700 · LINE HEIGHT 1.3
Communicate product utility and user goals clearly. Body typography defaults to 16px with ample line-height.
BODY / 16PX · 400 · LINE HEIGHT 1.65
Never shrink body font simply to cram more text. Secondary captions should remain at least 14px.
05 / STRUCTURE
Spacing & layout.
Utilize a 4px base increment spacing system and disciplined corner radii. Standard content width is 1200px; article body defaults to 820px.
Spacing scale
4px
8px
12px
16px
24px
32px
48px
64px
96px
128px
Corner radius
8px · Small
12px · Control
16px · Card
24px · Feature
06 / COMPONENTS
Crafted in small, consistent units.
Interactions with matching intent must retain the same anatomy. Primary buttons belong strictly to the single highest-priority action per view.
Buttons
Primary · Secondary · Outline
Input
Interactive UI sample; entered text is not saved.Component standards
Buttons/inputs min-height 44px, default radius 12px, cards 16px with 24px padding. All interactive elements must explicitly distinguish active, disabled, and focus states.
07 / INTERACTION
Fast, restrained feedback.
Design motion to clarify state changes rather than to display animation for its own sake.
01
Hover · 150ms
Focus on subtle background and border transitions.
02
Transition · 220ms
State and panel transitions remain calm and measured.
03
Motion · 320ms
Reserved strictly for essential content entrance.
Keyboard focus indicators must always remain visible; respect user reduced-motion preferences by dampening animations.
08 / ADAPTIVE
Restructure before scaling down.
On small viewports, collapse sidebars into drawers and collapse multi-column layouts into single flows. Preserve touch targets at 44×44px minimum.
Mobile≤ 767px
Single-column layout · Collapsible navigation drawer · Full-width cards
Tablet768–1023px
Two-column flexibility · Content-first hierarchy · Streamlined navigation
Desktop≥ 1024px
Sticky table of contents · Constrained reading widths · Generous margins
09 / ASSETS
Graphics purposeful by design.
All assets are crafted exclusively for SILENCE with explicit rights. The official logo utilizes the verified transparent PNG, and interface illustrations are bespoke vector SVGs.
Official logo/uiux-guide/silence-logo.pngInterface artwork/uiux-guide/hero-interface.svgComponent illustration/uiux-guide/component-sheet.svgLabel concept visuals clearly to avoid confusion with live production software. Employ purposeful filenames and reference assets via valid relative paths.
10 / ACCESSIBILITY
Universal accessibility for everyone.
Designed targeting WCAG 2.2 AA conformance. Beyond contrast ratios, validate through actual keyboard traversal and screen reader audits.
Contrast
Aim for at least 4.5:1 for body copy; 3:1 for large display titles and primary non-text graphical boundaries.
Navigation
Ensure complete keyboard navigability; distinctively differentiate active view position from cursor focus.
Feedback
Never rely solely on color to convey status; accompany success and error indicators with plain semantic text.
Motion
Strictly honor operating system reduced-motion preferences.
11 / HANDOFF
Final pre-flight handoff checklist.
Design guidelines hold no value if code diverges from intent. Review every item below during design audits and staging QA.
CHECKLIST0 / 7 completed
SILENCE / DESIGN SYSTEM
Back to top ↑