세상파일 (Sesang File)

Overview

세상파일 is a Korean social impact organization dedicated to solving societal problems through collaborative, data-driven solutions. The design system embodies 'Purposeful Minimalism'—a philosophy that strips away visual noise to reveal clarity and human intent. The aesthetic is clean, accessible, and warm: a white canvas (rgb(255, 255, 255)) anchors the interface, while a deep purple primary accent (#4d1c86) signals action and trust, complemented by an earthy orange secondary (#db6429) that conveys energy and partnership. The UI evokes a sense of calm competence: users feel they are engaging with a thoughtful, organized institution capable of tackling complex social challenges.

The brand voice is direct, empathetic, and solution-oriented. Vocabulary favors concrete nouns (문제 해결, 프로젝트, 투명성) over abstract adjectives. Tone is never breathless or hyperbolic; instead, it speaks with the precision of a researcher and the warmth of a community organizer. Example sentence in brand voice: "우리는 사회문제의 원인을 분석하고, 효과적인 솔루션을 함께 만듭니다." (We analyze the root causes of social problems and build effective solutions together.)

Colors

The color system is built on a foundation of trust and clarity. Primary (#4d1c86, a deep purple) is reserved for interactive elements—buttons, links, focus states, and brand-critical CTAs—because it commands attention without aggression. It appears on the 'More' link and primary action buttons throughout the site. Secondary (#db6429, a warm burnt orange) supports the primary and is used for badges, highlights, and secondary CTAs, creating visual rhythm and drawing users through the information hierarchy. Tertiary (#007aff, a bright blue) is used sparingly for system feedback, links, and status indicators. The surface stack is deliberately minimal: surface (#ffffff) is the default canvas, surface-container-low (#f0f0f0) provides subtle separation for cards and sections, and surface-containe

Typography

The typography system centers on Noto Sans KR, a humanist sans-serif optimized for Korean text, paired with Roboto for Latin characters. This pairing communicates accessibility and global reach while maintaining cultural specificity. Display (56px, 700 weight, -0.03em letter-spacing) is reserved for hero headlines and major section titles, commanding attention through scale and weight rather than color. Headline-lg (36px, 600 weight) anchors section introductions; headline-md (28px, 600 weight) is used for subsection titles. Title-lg (22px, 600 weight) labels cards and feature blocks. Body-lg (18px, 400 weight, 28px line-height) is used for introductory paragraphs and call-out text; body-md (16px, 400 weight, 24px line-height) is the default body text, ensuring comfortable reading at any v

Layout

The layout system uses a 12-column grid with a fixed max-width of 1440px (inner-1440 container), ensuring content remains readable on ultra-wide displays while maintaining focus on desktop. On mobile (≤768px), the grid collapses to a single column with 24px horizontal gutters (gutter token). Vertical rhythm is established through lg spacing (40px) between major sections, md spacing (24px) between subsections, and sm spacing (12px) between related elements. The hero section spans full-width with a background image overlay, using white text (rgb(255, 255, 255)) at 56px display weight for maximum impact. Cards and content blocks use md padding (24px) internally, with lg spacing (40px) separating card groups. The 'More' link and CTAs are consistently positioned at the end of content blocks, us

Elevation & Depth

Depth is conveyed through subtle shadows and layering, not through color darkening. Level 1 (Base): The white surface (#ffffff) with no shadow, establishing the default plane. Level 2 (Cards & Containers): 0 3px 8px rgba(0, 0, 0, 0.15)—a soft, diffuse shadow that lifts elements 4-8px above the base, used on all card components and dropdown panels. Level 3 (Modals & Overlays): 0 8px 24px rgba(0, 0, 0, 0.12)—a larger, softer shadow indicating significant elevation, used on modals and floating panels. Hover states on cards add a 2px upward transform (translateY(-2px)) and upgrade the shadow from

Shapes

The shape philosophy is 'Soft-Technical': rounded corners are used strategically to soften the interface without sacrificing clarity or professionalism. Buttons and inputs use rounded.DEFAULT (5px), a subtle curve that feels modern and approachable without being playful. Cards and containers use rounded.md (10px), creating a gentle frame around content. Larger containers and modals use rounded.lg (20px), signaling importance and creating visual hierarchy. The custom select dropdown uses rounded.DEFAULT (4px) to match input fields, ensuring visual consistency. Badges use rounded.full (9999px) t

Components

Action Elements Buttons are the primary call-to-action mechanism. Button-primary uses {colors.primary} (#4d1c86) background with {colors.on-primary} (white) text, 44px height, 12px 24px padding, and rounded.DEFAULT (5px). On hover, the background shifts to #5c2e9a (a slightly lighter purple), and the entire button transitions over 0.4s using cubic-bezier(0.165, 0.84, 0.44, 1). On active/pressed, the background darkens to #3a1463. Button-secondary uses a transparent background with a 2px solid border in {colors.primary}, matching the text color. On hover, the background fills with {colors.primary-container} (#e8d5f2), creating a subtle fill effect. Button-ghost is used for tertiary actions and navigation links; it has no background or border, with text in {colors.on-surface} (#222222).

Do's and Don'ts

**Do**

• Do use {colors.primary} (#4d1c86) exclusively for primary CTAs, focus states, and brand-critical interactive elements—never for backgrounds or decorative purposes.
• Do apply the 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) transition to all interactive elements (buttons, links, cards) to create a consistent, intentional motion language.
• Do maintain 44px minimum height for all clickable elements (buttons, inputs, list items) to ensure accessibility and comfortable touch targets on mobile.
• Do use body-md (16px, 400 weight, 24px line-height) as the default body text and ensure line-length does not exceed 80 characters on desktop for optimal readability.
• Do layer cards and containers using the three-level elevation system: Level 1 (no shadow), Level 2 (0 3px 8px rgba(0, 0, 0, 0.15)), Level 3 (0 8px 24px rgba(0, 0, 0, 0.12)).
• Do use lg spacing (40px) between major sections and md spacing (24px) between subsections to create visual rhythm and guide the eye through content.

**Don't**

• Don't use pure black (#000000) or pure white (#ffffff) for text on colored backgrounds; instead, use {colors.on-primary} or {colors.on-secondary} for sufficient contrast and warmth.
• Don't apply rounded corners larger than rounded.lg (20px) to buttons or inputs—this violates the Soft-Technical philosophy and appears unprofessional.
• Don't use {colors.secondary} (#db6429) for primary CTAs; reserve it for badges, secondary buttons, and accent highlights only.
• Don't animate or transition background colors on hover without also transitioning the shadow or transform—motion should feel coordinated and intentional, not isolated.
• Don't use text-shadow on body text or small labels; reserve it only for text overlaid on busy backgrounds (e.g., hero images) at 0 2px 4px rgba(0, 0, 0, 0.25).
• Don't exceed 1440px container max-width on desktop, even on ultra-wide displays—this maintains focus and readability.