skills.rest
aifactory-team
aifactory-teamOFFICIAL
Explore all skills by this author →
GitHub

kist-brand-guidelines

Consolidate KIST brand colors, typography, and spacing into CSS variables.

3|2|Updated May 11, 2026
Search Tags:#brand guidelines#design tokens#logo usage#ui components#css variables#web layout#korean typography
One-click install
npx skills add https://github.com/aifactory-team/discover --skill kist-brand-guidelines
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: kist-brand-guidelines
Source: https://github.com/aifactory-team/discover/tree/main/kist/kist-brand-guidelines
Command: npx skills add https://github.com/aifactory-team/discover --skill kist-brand-guidelines

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes assets (resource) and references (resource) components.

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.

Frequently Asked Questions about kist-brand-guidelines

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply KIST brand design tokens to my web layout?▼

Apply KIST brand design tokens by importing the `reference/tokens.css` file into your project, then reference the provided CSS variables for colors, spacing, typography, radius, and shadows across your web layout components.

What is the correct way to handle logo usage and brand red in a KIST UI?▼

Correct KIST logo usage requires implementing logo variants as real images, maintaining a strict separation between canonical brand red and UI accent red, and adhering to sharp radius defaults and flat design principles throughout the interface.

Does this provide CSS variables for Korean typography and interactive blue?▼

Yes, it provides ready-to-import CSS variables specifically defining Korean typography roles, interactive blue, neutrals, gradients, and spacing to ensure visual consistency for institutional pages.

Can I use these UI components to rebuild a hero slider with search and hashtags?▼

Yes, you can copy and reuse practical component patterns for a hero slider layout with search and hashtags, alongside cards, tabs, pagination, tables, forms, modals, and footers for institutional page rebuilding.

What's the best way to ensure flat design consistency across KIST-like institutional pages?▼

The best way to ensure flat design consistency is to import the consolidated KIST design system tokens and apply its strict styling rules, utilizing predefined component patterns rather than hardcoding styles.

Related Skills

Explore More Design & Creative Skills→
musher-devmusher-dev

writing-visual-identity

Define color tokens, typography systems, and spatial rules for marketing pages.

Official
Advanced
LrmdomLrmdom

frontend-design

Generate production-grade frontend interfaces with cohesive design systems.

Community
Advanced
Higashi-KotaHigashi-Kota

styling

Standardize CSS styling with design tokens and grid-first layouts.

Community
Basic
ACHVMRACHVMR

oracle-design

Codify reusable design tokens and CSS variables for SmelterOS frontend UI.

Official
Advanced