diff --git a/apps/frontend/public/favicon.svg b/apps/frontend/public/favicon.svg index 988cd35b..7a4918fb 100644 --- a/apps/frontend/public/favicon.svg +++ b/apps/frontend/public/favicon.svg @@ -1,5 +1,6 @@ - + + diff --git a/apps/frontend/src/components/AppShell.tsx b/apps/frontend/src/components/AppShell.tsx index 62eea958..558aaff7 100644 --- a/apps/frontend/src/components/AppShell.tsx +++ b/apps/frontend/src/components/AppShell.tsx @@ -27,6 +27,7 @@ import { useCommandMenuShortcut, } from "@/components/CommandMenu"; import { BrandMark } from "@/components/BrandMark"; +import { BrandWordmark } from "@/components/BrandWordmark"; import { DemoBanner } from "@/components/DemoBanner"; import { HeaderBell } from "@/components/HeaderBell"; import { LanguageToggle } from "@/components/LanguageToggle"; @@ -214,7 +215,7 @@ function SidebarNav({ ) : ( - {t("app.name")} + )} diff --git a/apps/frontend/src/components/BrandLockup.tsx b/apps/frontend/src/components/BrandLockup.tsx new file mode 100644 index 00000000..5904ed4b --- /dev/null +++ b/apps/frontend/src/components/BrandLockup.tsx @@ -0,0 +1,31 @@ +/** + * BrandLockup — the full TRUSCA logo: mark + "TRUSCA" wordmark + the + * "TrustedOSS SCA" tagline (the SCA tool of the TrustedOSS initiative). + * + * Used where there is vertical room (the auth gateway, brand showcase). + * Tight surfaces — the 48 px sidebar / header — use the reduced lockup + * (BrandMark + BrandWordmark, no tagline). See docs/brand-trusca.md. + * + * The tagline is a brand string (not translated) and is NOT uppercased — + * the umbrella name "TrustedOSS" keeps its camel casing. Its colour uses the + * theme's muted-foreground token (passes WCAG AA), while the mark gradient + * and the teal wordmark are fixed brand colours. + */ +import { BrandMark } from "@/components/BrandMark"; +import { BrandWordmark } from "@/components/BrandWordmark"; + +export function BrandLockup() { + return ( +
+ +
+ + + + + TrustedOSS SCA + +
+
+ ); +} diff --git a/apps/frontend/src/components/BrandMark.tsx b/apps/frontend/src/components/BrandMark.tsx index d29d84c8..182928ab 100644 --- a/apps/frontend/src/components/BrandMark.tsx +++ b/apps/frontend/src/components/BrandMark.tsx @@ -3,15 +3,19 @@ * check), picked in the W1 rebrand (see docs/brand-trusca.md). * * Canonical in-app rendering of the mark (the same geometry ships as - * public/favicon.svg and the docs-site logo). Used by the AppShell collapsed - * rail; reuse this component anywhere the symbol is needed instead of - * re-inlining the paths. + * public/favicon.svg and the docs-site logo). Reuse this component anywhere + * the symbol is needed instead of re-inlining the paths. * - * Palette is fixed brand ink/paper (not theme tokens) so the tile reads - * identically on any surface, matching the favicon. + * Palette is fixed brand colour (not theme tokens) so the tile reads + * identically on any surface: a teal gradient tile (#2dd4bf → #0f766e) with + * the hexagon + check in paper (#fafafa). Teal is the TRUSCA brand colour; + * the wordmark (BrandWordmark) uses the same teal. The gradient id is + * per-instance (useId) so multiple marks on one page never collide. */ +import { useId } from "react"; export function BrandMark({ size = 24 }: { size?: number }) { + const gradId = useId(); return ( - + + + + + + + TRUSCA; +} diff --git a/apps/frontend/src/pages/auth/AuthLayout.tsx b/apps/frontend/src/pages/auth/AuthLayout.tsx index 8b4b066a..65ec773f 100644 --- a/apps/frontend/src/pages/auth/AuthLayout.tsx +++ b/apps/frontend/src/pages/auth/AuthLayout.tsx @@ -1,6 +1,6 @@ import type { ReactNode } from "react"; -import { useTranslation } from "react-i18next"; +import { BrandLockup } from "@/components/BrandLockup"; import { DemoBanner } from "@/components/DemoBanner"; import { LanguageToggle } from "@/components/LanguageToggle"; import { @@ -32,7 +32,6 @@ export function AuthLayout({ footer, testId, }: AuthLayoutProps) { - const { t } = useTranslation(); return (
{/* B5 — surface read-only demo mode to unauthenticated visitors too, not @@ -40,19 +39,20 @@ export function AuthLayout({ normal deploy. */}
- - {t("app.name")} -
- + {/* Full brand logo (mark + wordmark + tagline) — the gateway is the + one surface with room for the tagline; the post-login sidebar uses + the compact mark + wordmark. */} + + {title} {subtitle ? {subtitle} : null} diff --git a/docs-site/static/img/favicon.svg b/docs-site/static/img/favicon.svg index 988cd35b..7a4918fb 100644 --- a/docs-site/static/img/favicon.svg +++ b/docs-site/static/img/favicon.svg @@ -1,5 +1,6 @@ - + + diff --git a/docs-site/static/img/logo.svg b/docs-site/static/img/logo.svg index 988cd35b..7a4918fb 100644 --- a/docs-site/static/img/logo.svg +++ b/docs-site/static/img/logo.svg @@ -1,5 +1,6 @@ - + + diff --git a/docs/brand-trusca.md b/docs/brand-trusca.md index a64f65a0..7d80f496 100644 --- a/docs/brand-trusca.md +++ b/docs/brand-trusca.md @@ -50,12 +50,24 @@ - **C Stacked SBOM** — 구성요소 목록 막대 + 최상단 검증 - **선정안**: **A Hex Check** (2026-06-12 확정) — 패키지 육각 + 검증 체크. 16px 가독성이 가장 좋고 보안 도구 관례에 부합. -- **팔레트**: 기존 토큰만 — ink `#18181b`(warm near-black), paper `#fafafa`, - accent `#2563eb`(README 배지에 이미 쓰는 블루). 새 브랜드 컬러를 만들지 않는다. -- **워드마크**: Inter semibold tracking-tight, `TRU`(ink) + `SCA`(accent). -- **적용 자산**(선정 후 교체): `docs-site/static/img/{logo,favicon}.svg`, - `apps/frontend/public/favicon.svg`(+ `index.html` link), AppShell 접힘 레일 - 모노그램. +- **팔레트**(2026-06-13 갱신): 브랜드 컬러 = **틸**, paper `#fafafa`, ink `#18181b`. + 단색 near-black 타일이 "너무 검다"는 피드백 + BomLens 레퍼런스(그라데이션 타일· + 단색 굵은 워드마크·태그라인) 검토를 거쳐, **마크 타일은 틸 그라데이션 + `#2dd4bf → #0f766e`**(대각, top-left→bottom-right)로, 육각+체크는 paper로 칠한다. + (기존 계획의 블루 `#2563eb`에서 틸로 변경, 리스크 Low의 블루와도 분리.) + 틸 `#0f766e`는 흰 배경 5.47:1로 WCAG AA 통과. +- **워드마크**: Inter, 굵게(extrabold), tracking-tight, **"TRUSCA" 단색 틸 `#0f766e`**. + 단어 중간 색 분리(구 `TRU`+`SCA`)는 폐기 — 싸구려로 읽혀 BomLens식 단색으로 통일. +- **태그라인**: "TrustedOSS SCA"(= TrustedOSS 이니셔티브의 SCA 도구). muted gray, + 대문자 변환 안 함(우산명 "TrustedOSS" 카멜표기 보존). 단어 색 분리 대신 이 + 태그라인이 SCA·우산 관계를 담당. +- **락업**: 풀 락업(마크+워드마크+태그라인)은 여유 있는 곳(로그인 게이트웨이·브랜드 + 쇼케이스)에 — `apps/frontend/src/components/BrandLockup.tsx`. 좁은 48px + 사이드바/헤더는 축약 락업(마크+워드마크, 태그라인 생략). + 구현: `BrandMark.tsx`(그라데이션 타일)·`BrandWordmark.tsx`(틸 워드마크). + 로그인 카드 타이틀 등 문장 속 "TRUSCA"는 평문 유지(로케일별 어순 상이). +- **적용 자산**: 타일 틸 = `apps/frontend/src/components/BrandMark.tsx`, + `apps/frontend/public/favicon.svg`, `docs-site/static/img/{logo,favicon}.svg`. ## 5. 보존 식별자 (의도적 비변경)