Style Guide

Brand identity

TCRN mother-brand mark, product suffix lockups, and local draft boundaries.

TCRN mother brand

TCRN mark draft

The current mark is a local Storybook draft for visual review. It does not claim final brand acceptance, product adoption, package publication, or downstream product UI acceptance.

local brand draftmother brand onlyno red connector pointsproduct suffix color owned downstream

Logo construction rules

ElementRuleBoundary

Outer tilesFour large rounded diamond tiles use iris blue, violet-blue, aqua, and slate with tight even gaps.No asymmetric extra pieces.

Center tileThe center tile uses a fifth color outside the four outer tile colors.Do not reuse an outer color for the center.

Connector pointsEach point uses a white ring with a same-family inner color that differs from the tile fill.No red, pink, coral, or orange connector points.

Connector pathsPaths are white channels that create the multipolar connection motif.Do not make the paths look like state evidence.

WordmarkTCRN is the mother-brand text. Product-type suffixes follow TCRN, and long suffixes stack below it before truncation.Suffix color belongs to the product surface.

Product lockups

TCRNAOS

TCRNTMS

TCRNDesign System

Product suffix typography follows the mother-brand wordmark rhythm. Long product suffixes stack below TCRN; suffix color is product-owned and must not change the TCRN symbol colors.

Color palette

Semantic color roles for canvas, panel, focus, border, and state surfaces.

Brand palette

Primary brand--tcrn-color-brand-primary

Use for TCRN identity, selected navigation, and creator-channel emphasis.

Primary brand background--tcrn-color-brand-primary-bg

Use for quiet selected surfaces and iris-blue brand callouts.

Secondary brand--tcrn-color-brand-secondary

Use for system connection, informational support, charts, and secondary emphasis.

Secondary brand background--tcrn-color-brand-secondary-bg

Use for quiet aqua informational surfaces.

Accent brand--tcrn-color-brand-accent

Use rose-coral sparingly for creator warmth; never use as state truth.

Neutral brand--tcrn-color-brand-neutral

Use for dense structure, muted metadata, and low-emphasis support.

FamilyRoleGuardrail

PrimaryIris-blue identity, selected navigation, creator-channel emphasisDo not use as proof state.

SecondaryAqua system connection, informational support, and chartsDo not compete with primary actions.

AccentRose-coral highlights and onboarding warmthNever use as readiness or error truth.

NeutralDense operational structure and muted metadataDo not replace disabled text color.

StateReady, warning, blocked, unavailable, and unknown statusState colors are not brand colors.

brand primarysecondary supportaccent sparinglystate colors are not brand

Color role matrix

Canvas--tcrn-color-surface-canvas

Use for page background and quiet space.

Panel--tcrn-color-surface-panel

Use for cards, drawers, dialogs, and doc surfaces.

Muted surface--tcrn-color-surface-muted

Use for secondary chips, nav states, and low-emphasis fills.

Focus ring--tcrn-color-focus-ring

Use only for visible keyboard focus and selected navigation.

Ready state--tcrn-color-state-ready-bg

Pair state color with a readable status label.

Blocked state--tcrn-color-state-blocked-bg

Use for blocked or destructive states with explanatory copy.

RoleUsageGuardrail

CanvasPage background and non-interactive spaceMust not carry state meaning.

PanelCards, drawers, dialogs, and doc surfacesAvoid card-in-card nesting.

BorderStructure, separation, and neighboring controlsDo not use color alone for state.

FocusKeyboard focus and selected navigationNever suppress visible focus.

StateReady, warning, blocked, and unknown statusAlways pair color with text.

Neutral calibration candidates

Owner review admitted a narrow neutral-gray calibration token set as package-backed evidence only. These tokens do not replace the current canvas, panel, state, progress, or focus defaults without a separate component adoption route.

Neutral canvas--tcrn-color-neutral-calibration-canvas

Measured neutral gray canvas candidate; no blue/purple surface tint.

Neutral panel--tcrn-color-neutral-calibration-panel

Measured neutral panel candidate for future proofed surfaces.

Neutral muted--tcrn-color-neutral-calibration-muted

Muted neutral fill and progress track candidate.

Calibrated focus--tcrn-color-focus-ring-calibrated

Solid focus-ring candidate; records contrast without suppressing focus.

Warning calibrated--tcrn-color-state-warning-calibrated-bg

Measured warning pair; always use with warning text and copy.

Danger calibrated--tcrn-color-state-danger-calibrated-bg

Measured danger pair; always use with danger text and copy.

RoleTokenGuardrail

Neutral surfaces--tcrn-color-neutral-calibration-*Keeps page/card/sidebar/header backgrounds gray; not an automatic theme replacement.

Focus--tcrn-color-focus-ring-calibratedSolid contrast candidate only; never hide focus or rely on glow alone.

Progress--tcrn-color-progress-*-calibratedVisual evidence token only; pair progress with accessible status copy.

Warning--tcrn-color-state-warning-calibrated-*Use only with warning semantics and readable text.

Danger--tcrn-color-state-danger-calibrated-*Use only with destructive or blocking semantics and readable text.

Theme parity

Light and dark themes must keep the same semantic token names. A dark override changes values only; it must not fork component behavior or readiness copy.

semantic tokensdark overridestate-safe colorcontrast proof

Text styles

Type scale, paragraph rhythm, heading hierarchy, and localized copy density.

Type hierarchy and rhythm

LevelUsageConstraint

Page titleOne per documentation page24px before first section; no nested card hero treatment

Story titleSection-level contract heading8px to description; keep close to description

Panel headingCompact workbench panels10px to panel content; avoid oversized display text

Body copyRules, examples, and proof notes12px between paragraphs; localize before display

MicrocopyHints, disabled reasons, and proof notes4px to owning control; never concatenate into labels

Font family contract

ScriptRedistributable font assetLicense boundary

LatinInterOFL; may be packaged, self-hosted, or bundled with license notice.

Simplified ChineseNoto Sans CJK SC / Source Han Sans SCOFL; use these for product-owned CJK font assets.

JapaneseNoto Sans CJK JP / Source Han Sans JPOFL; use these for product-owned Japanese font assets.

KoreanNoto Sans CJK KR / Source Han Sans KROFL; use these for product-owned Korean font assets.

MonoLiberation MonoOFL; use this for product-owned monospace assets.

LocalePlatform fallback namesRule

en, frAvenir Next, Helvetica Neue, ArialPlatform font names are CSS fallback references only.

zh-CNPingFang SC, Microsoft YaHei, Heiti SCDo not copy, convert, host, bundle, or redistribute platform fonts.

jaHiragino Sans, Yu Gothic, MeiryoDo not claim platform fallbacks as TCRN font assets.

koApple SD Gothic Neo, Malgun GothicFallbacks render only when already available on the user's licensed device.

monoSFMono-Regular, Consolas, MenloSystem monospace names are fallback references only.

TCRN-owned packages may distribute only fonts with explicit redistribution rights. Platform font names may remain in CSS fallback stacks, but TCRN must not copy, convert, self-host, bundle, or publish those font files.

Type scale tokens

TokenSize and lineUsage

Page title28px / 1.3 / 700One page title per route or documentation page.

Section title18px / 1.25 / 700Story titles, major panels, and route sections.

Dense UI body13px / 1.35 / 400Tables, navigation, controls, and operational scanning remain dense.

Reading body14px / 1.45 / 400Proof-gated explanatory copy and prose only; not auto-applied to dense UI.

Body copy13px / 1.45 / 400Rules, descriptions, table cells, and proof notes.

Control text13px / 1.2 / 600Buttons, tabs, labels, and compact control text.

Caption11px / 1.35 / 600Metadata, helper text, and evidence strip context.

Code text12px / 1.4 / monoToken names, ids, commands, and technical readback.

Page title / 28px

Section title / 18px

Dense UI body / 13px remains the default for operational scanning.

Reading body / 14px is reserved for proof-gated explanatory copy.

Body copy / 13px keeps dense product surfaces readable without becoming tiny.

Caption / 11px is reserved for metadata and helper context.

--tcrn-type-family-mono

Localized text must wrap without changing scale.

Use fixed type roles and let containers wrap. Do not scale text by viewport width; long translated strings must remain readable without overlapping controls.

paragraph rhythmlocalized wrappingfont licensing tiersno viewport font scaling

Grid system

Responsive layout rules for readable docs, dense work surfaces, and wrapped actions.

Layout density matrix

SurfaceDesktop ruleMobile rule

Documentation pageReadable content column with sticky side navigation.Single column; navigation appears before content.

WorkbenchDense scanning is allowed when rows remain legible.Stack rows into cards with labels.

Action rowActions wrap with visible gaps.Primary and secondary actions remain separated.

Detail panelDrawer or side panel must not compress the table to unreadable width.Use full-width panel or route-level page.

Readable column

Evidence is local to this design-system scaffold.

Adaptive grid

Example content is synthetic and cannot be treated as product evidence.

Overflow proof

External, product, or release evidence is still required.

Spacing floor

Cards, panels, tables, and action rows must preserve visible gaps across desktop, tablet, and mobile viewports. Zero-spacing joins are regressions, even when borders remain visible.

Icons and motion

Icon-only controls, motion boundaries, tooltip naming, and reduced-motion expectations.

Icon library contract

AspectStandardBoundary

Source libraryLucide React is consumed inside @tcrn/ui-react and exposed through Icon.Downstream UI imports TCRN icon primitives instead of importing lucide-react directly.

License readbackLucide is recorded with an ISC license readback for local commercial-use review.This is a license receipt, not legal advice or package publication.

Brand boundaryIcons support commands, navigation, status, and functional affordances.Do not use general-purpose icons as TCRN logos, product marks, or proof-state truth.

alert-triangle
arrow-left
arrow-right
book-open
check
chevron-down
chevron-left
chevron-right
database
external-link
globe-2
home
info
loader-circle
menu
moon
package
panel-left-close
panel-left-open
search
settings
sun
x

Interaction affordance matrix

TopicRuleBlocked

Icon-only actionRequires accessible name, visible focus, and tooltip for unfamiliar icons.Unnamed icon action

TooltipNames unfamiliar icons without replacing visible labels.Tooltip as the only label

Loading motionMay signal progress but must not hide status or proof copy.Motion-only state

Reduced motionMust preserve comprehension with animation disabled.Blocking animation gate

Overlay transitionMust not delay focus entry, Escape close, or focus return proof.Focus hidden by animation

Motion examples

Instant feedback

80ms ease-out for press, focus, and tiny affordance feedback.

Standard transition

160ms ease for hover, selected state, and lightweight surface changes.

Emphasis transition

220ms emphasized easing for drawers, dialogs, and high-attention changes.

Reduced motion fallback

Reduced motion preserves layout and copy when animation is unavailable.

Motion tokenDurationAllowed use

--tcrn-motion-instant80ms ease-outPress and focus feedback only.

--tcrn-motion-standard160ms easeHover, selected navigation, and lightweight state changes.

--tcrn-motion-emphasis220ms emphasized easingDrawer and dialog entry when focus remains immediate.

--tcrn-motion-loading-loop900ms linearVisible loading indicators paired with status copy.

--tcrn-motion-skeleton-loop1400ms ease-in-outSkeleton placeholders that reserve layout without implying readiness.

--tcrn-motion-progress-loop1200ms ease-in-outIndeterminate progress for ongoing local checks.

--tcrn-motion-reduced-duration0.01msReduced-motion override for every animated example.

Loading and progress examples

Loading state

Spinner motion is paired with visible copy and never replaces status text.

Skeleton preview

Skeletons reserve layout while content is unavailable; they do not imply readiness.

Progress feedback

Indeterminate progress names the work being checked and keeps owner proof separate.

State transition

Copy changes first; motion only softens the surface update.

Proof requiredBlocked

Motion may decorate state changes, but it cannot be the only evidence that a state changed.

Global states

State surfaces for ready, blocked, unknown, unavailable, and external proof-needed UI.

Ready for local use

Local component contract is available for fixture proof.

Blocked

Action is held until the owning review or route clears it.

Unknown

State is unknown or unsupported and is displayed fail-closed.

Unavailable

The action or evidence path is unavailable in this route.

External proof needed

A route outside this package must provide external proof before reliance.

State authority matrix

StateAllowed displayBlocked display

ReadyOnly after owning route proof exists.Ready from local fixture

Local proof onlyPackage-local component proof.Product-ready wording

Proof requiredExplain the missing proof.Silent disabled state

BlockedName the owning route or review.Hidden owner action

UnknownFail closed and ask for proof.Implied readiness

Copy creation rules

Human-readable, localizable, and no-overclaim copy rules for shared UI.

Copy workflow

StepRuleBlocked

Source stateMap raw state to copy-state vocabulary before display.Raw enum label

Human labelUse a short localized label plus a clear description.Status code as copy

Evidence scopeName whether proof is local, external, product, or release-owned.Product acceptance claim

Disabled reasonExpose reasons through assistive text without appending to button labels.Concatenated label

TranslationEvery non-variable UI string needs zh-CN, en, ja, ko, and fr coverage.English leak in localized route

Forbidden copy patterns

raw enum labelsrelease proof claimsproduct acceptance claimsexternal readiness claims