Skip to content

design_guidelines.md

Latest commit

 

History

History
149 lines (119 loc) · 5.13 KB

design_guidelines.md

File metadata and controls

149 lines (119 loc) · 5.13 KB

Design Guidelines: 거짓말 연구소, 상상 클럽 (Lie Lab, Dream Club)

Design Approach

Conceptual Direction: Dark Academic Archive meets Sacred Text Library

  • Blend scholarly research institution aesthetics with mystical scripture presentation
  • Create reverent yet slightly unsettling atmosphere that questions truth and fiction
  • Reference inspiration: Archive.org's institutional feel + Medium's reading experience + religious manuscript interfaces

Core Design Principles

  1. Archival Authority - Present content with scholarly gravitas and institutional weight
  2. Sacred Typography - Treat lies as precious texts worthy of careful study
  3. Mysterious Depth - Layers of information revealed progressively
  4. Bilingual Harmony - Seamless Korean/English integration throughout

Typography System

Primary Font: Crimson Pro (Google Fonts) - Serif for body text, evokes classical manuscripts Secondary Font: Inter (Google Fonts) - Sans-serif for UI elements, labels, metadata

Hierarchy:

  • Hero/Page Titles: text-5xl to text-7xl, font-bold, Crimson Pro
  • Section Headers: text-3xl to text-4xl, font-semibold, Crimson Pro
  • Story Titles: text-2xl, font-semibold, Crimson Pro
  • Body Text: text-base to text-lg, leading-relaxed, Crimson Pro
  • UI Labels/Meta: text-sm to text-base, Inter
  • Captions/Stats: text-xs to text-sm, Inter, opacity-70

Layout System

Spacing Units: Tailwind classes 4, 6, 8, 12, 16, 24

  • Section padding: py-16 md:py-24 lg:py-32
  • Card spacing: p-6 md:p-8
  • Component gaps: gap-4, gap-6, gap-8

Grid Structure:

  • Desktop: max-w-7xl container with 12-column grid
  • Story cards: grid-cols-1 md:grid-cols-2 lg:grid-cols-3
  • Dashboard stats: grid-cols-2 md:grid-cols-4
  • Single column reading: max-w-3xl for story content

Component Library

Navigation

  • Sticky header with blur backdrop (backdrop-blur-md)
  • Logo + title in Crimson Pro
  • Minimal navigation: Archive | Create | Game | Stats
  • Language toggle (한/EN) in top-right

Hero Section

No large hero image - Instead, typographic statement:

  • Full viewport height opening with centered quote
  • Main theme in Korean (large serif)
  • English subtitle below
  • Subtle animated particles/dots background (CSS only, minimal)
  • Downward scroll indicator

Story Cards (Archive Gallery)

  • Card design with subtle border, elevated on hover
  • Story title (Crimson Pro, bold)
  • Excerpt (2-3 lines, line-clamp)
  • Metadata row: Category badge | Date | Credibility score (★★★★☆)
  • "그럴듯함" (Plausibility) meter as progress bar
  • Read time estimate

Story Detail Page

  • Wide reading column (max-w-4xl)
  • Title with decorative divider
  • Metadata grid: Generated date | Category | AI model | Language
  • Full story text with generous line-height (leading-loose)
  • Sidebar (desktop): Credibility metrics, rating breakdown, related stories
  • Bottom: Community rating interface with three dimensions (그럴듯함, 창의성, 설득력)

AI Generation Interface

  • Center-aligned form on dedicated page
  • Large textarea for prompt
  • Category selector (dropdown with icons)
  • "Generate" button with loading state
  • Generated story appears below with save/share options

Truth vs Lie Game

  • Card-flip interface
  • Statement presented as card
  • Two buttons: "Truth" | "Lie"
  • Immediate feedback with explanation
  • Score counter and streak tracker
  • Leaderboard link

Statistics Dashboard

  • Grid of stat cards (2x2 on mobile, 4 columns desktop)
  • Large numbers with labels
  • Category distribution pie chart
  • "Most Believed Lies" top 10 list
  • Timeline graph showing archive growth

Footer

  • Multi-column (desktop): About | Contact | Credits | Terms
  • Newsletter signup: "거짓말 경전 구독하기"
  • Social links if applicable
  • Copyright with philosophical tagline

Images

No large hero image needed - Relying on typography and subtle atmospheric effects

Supporting Images:

  • Category icons: Simple line icons for each category (신화, 과학, 역사, 종교, 사회)
  • Placeholder for user avatars in community features
  • Subtle texture overlays for cards (parchment-like, very subtle)
  • Dashboard graphs/charts generated via libraries

Interaction Patterns

  • Smooth page transitions
  • Cards elevate slightly on hover (transform: translateY(-4px))
  • Loading states use skeleton screens
  • Success/error toasts for actions
  • Modal overlays for rating submissions
  • Progressive disclosure for long content

Accessibility

  • High contrast ratios for all text
  • Focus states with visible outlines
  • Keyboard navigation throughout
  • ARIA labels for all interactive elements
  • Semantic HTML structure
  • Screen reader friendly metrics

Special Considerations

Bilingual Content:

  • Auto-detect or user preference
  • Toggle switches language site-wide
  • Both Korean and English equally prominent
  • Korean primary in titles, English in metadata

Archive Feel:

  • Timestamp everything
  • Show total collection size prominently
  • Archive number for each entry (#00001, #00002...)
  • Permanent links to each story

Scholarly Tone:

  • Formal language in UI
  • Academic-style citations
  • Reference-style metadata presentation
  • Restrained, thoughtful interactions