제안서를 보낸 뒤, 고객이 읽었는지 확인하는 운영 표면
긴 한국어 문장과 조사, 숫자 2026, 괄호(피드백), 버튼 문구가 같은 행 안에서 안정적으로 줄바꿈되는지 확인합니다.
PR2 internal preview
Design system and shared layout
이 페이지는 최종 고객용 IA가 아니라, 이후 PR들이 재사용할 토큰과 primitive를 한곳에서 확인하기 위한 내부 preview입니다.
Scope guard
Compact SaaS foundation, not a finished Home page.
Claude reference의 밀도, 카드 리듬, Roadmap board 감각을 primitive 수준에만 반영했습니다. 실제 콘텐츠, schema, Tally, analytics SDK는 후속 PR 범위입니다.
Color tokens
Required PR2 tokens plus supporting semantic colors. Accent is used deliberately, not as a full-page purple theme.
38 color custom properties are read from src/styles/tokens.css at build time.
Changing that token file updates the shared shell, components, and this preview table together.
| Swatch | Token | Current value | Role | Used for |
|---|---|---|---|---|
--color-brand | #102033 | Primary identity | Logo, headings, dark footer, code surfaces | |
--color-brand-hover | #1B314D | Brand interaction | Secondary button hover | |
--color-accent | #1F4E79 | Primary action | Primary buttons, active states, key links | |
--color-accent-hover | #183D5F | Action interaction | Primary button hover | |
--color-accent-light | #E8F1F8 | Soft accent | Selected nav, subtle button, light labels | |
--color-accent-border | #B7CBE0 | Soft accent edge | Use Case tags and subtle hover borders | |
--color-gray-100 | #F8F9FA | Neutral surface | Muted cards, code chips, roadmap later | |
--color-gray-700 | #495057 | Secondary text | Body support text and neutral badges | |
--color-white | #FFFFFF | Base surface | Cards, header surface, inverted text | |
--color-page | #F6F7F9 | Page background | Base page shell | |
--color-surface | #FFFFFF | Content surface | Cards and preview panels | |
--color-surface-muted | #F8F9FA | Section surface | Muted bands | |
--color-surface-raised | #FFFFFF | Raised surface | Elevated panel surface | |
--color-border | #E0E3EA | Default border | Cards, tables, section edges | |
--color-border-strong | #C8CDD8 | Emphasis border | Ghost buttons and neutral badges | |
--color-text | #102033 | Primary text | Default readable foreground | |
--color-text-muted | #5F6368 | Muted text | Descriptions and secondary copy | |
--color-text-soft | #7A7F89 | Soft text | Low-emphasis copy and later roadmap dot | |
--color-focus-ring | rgba(31, 78, 121, 0.26) | Focus state | Keyboard focus outline shadow | |
--color-success | #15803D | Positive state | Now badges and success text | |
--color-success-soft | #DCFCE7 | Positive surface | Plugin/guide badge backgrounds | |
--color-success-border | #BBF7D0 | Positive edge | Plugin/guide badge borders | |
--color-info | #1D4ED8 | Info state | Next and product labels | |
--color-info-soft | #DBEAFE | Info surface | Product badge backgrounds | |
--color-info-border | #BFDBFE | Info edge | Product badge borders | |
--color-warning | #92400E | Update state | Update badge text | |
--color-warning-soft | #FEF3C7 | Update surface | Update badge backgrounds | |
--color-warning-border | #FDE68A | Update edge | Update badge borders | |
--color-danger | #B42318 | Critical state | Reserved for error or risk states | |
--color-danger-soft | #FEE4E2 | Critical surface | Reserved for error or risk backgrounds | |
--color-page-wash | rgba(232, 241, 248, 0.56) | Page treatment | Top shell gradient wash | |
--color-page-wash-end | rgba(246, 247, 249, 0) | Page treatment | Top shell gradient fade | |
--color-header-border | rgba(224, 227, 234, 0.82) | Chrome border | Sticky header divider | |
--color-header-bg | rgba(255, 255, 255, 0.92) | Chrome surface | Sticky header translucent surface | |
--color-footer-text | rgba(255, 255, 255, 0.78) | Inverted text | Footer default copy | |
--color-footer-copy | rgba(255, 255, 255, 0.68) | Inverted muted text | Footer brand paragraph | |
--color-footer-link | rgba(255, 255, 255, 0.72) | Inverted link | Footer links and locale controls | |
--color-footer-divider | rgba(255, 255, 255, 0.12) | Inverted border | Footer bottom divider |
Typography scale
제안서를 보낸 뒤, 읽었는지 확인하는 운영 표면
Content, product, roadmap, and feedback can share one shell.
본문은 Inter, Pretendard, Noto Sans JP 순서의 system-friendly stack을 사용합니다. 긴 한국어, 영어, 일본어 문구가 버튼과 카드에서 넘치지 않도록 line-height와 wrapping을 우선합니다.
Language samples
KO / EN / JA samples are kept inside this preview so typography and wrapping can be checked without leaving the design system page.
A compact operating surface for proposals, feedback, and roadmap updates
Long English labels, product terms, and mixed punctuation should stay readable inside dense cards and navigation controls.
提案書を送った後の閲覧状況とフィードバックを確認する画面
日本語の長い文、英数字、UI ラベルがカードやボタンの中で自然に折り返されるかを確認します。
Card rhythm
Dense cards follow the mockup rhythm, but contain reusable contracts instead of finished page content.
Use Case
Use Case card primitive
Problem-first content cards can connect to related features, plugins, and CTAs in PR4.
PluginPlugin card primitive
Plugin pages can describe where users create, how they share, and what they analyze in PR5.
NextRoadmap card primitive
Now / Next / Later board styling is available for PR7 without Tally embeds.
Roadmap board expression
Now
Viewer flow polish
A reusable card shape for current work.
Next
Plugin surface
A reusable card shape for upcoming work.
Later
Operations loop
A reusable card shape for later evaluation.
Tracking attributes
The helper returns DOM attributes only. No SDK, listener, or network event is added in PR2.
Helper output
Undefined values are omitted and position is stringified.
{
"data-track-event": "content_card_click",
"data-content-id": "design-system-card-example",
"data-category": "preview",
"data-locale": "ko",
"data-position": "1"
}