kist-brand-guidelines
OfficialInstantly apply KIST brand design tokens and UI components.
Design & Creative#brand guidelines#design tokens#logo usage#ui components#css variables#web layout#korean typography
Authoraifactory-team
Version1.0.0
Installs0
System Documentation
What problem does it solve?
KIST brand assets are hard to translate into consistent, production-ready UI because colors, typography, spacing, and component patterns are scattered across the website; this Skill consolidates them into a usable design system.
Core Features & Use Cases
- Brand-ready design tokens: Provides CSS variables for KIST’s signature red, interactive blue, UI accent red, neutrals, gradients, spacing, radius, shadows, transitions, and typography roles.
- Component patterns you can reuse: Includes practical, copyable reference patterns such as header/GNB, hero slider layout with search + hashtags, cards (news/publication/interview), tabs, breadcrumb, sub-navigation, pagination, table styles, forms/search, popup/modal, quick menu, and footer.
- Brand compliance guidance: Embeds strict rules like using the correct logo variants as real images, sharp radius defaults, flat design principles, and clear separation between wordmark red and UI accent red.
Quick Start
Apply the KIST tokens by importing reference/tokens.css from the skill, then design your page components using the provided token names for colors, spacing, typography, radius, and shadows.
Dependency Matrix
Required Modules
None requiredComponents
assetsreferences
đŸ’» Claude Code Installation
Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.
Please help me install this Skill: Name: kist-brand-guidelines Download link: https://github.com/aifactory-team/discover/archive/main.zip#kist-brand-guidelines Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
Agent Skills Search Helper
Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.