AnxForever/stylekitPublic

1,247 stars

89 forks

42 issues

12 branches4 tags

feat: add RevealBlock animation component2 hours ago

src

components

Button.tsx2h ago

Card.tsx4h ago

Input.tsxyesterday

styles

tokens.ts3d ago

global.css1w ago

lib

utils.ts5d ago

README.md2h ago

package.json5d ago

tsconfig.json2w ago

README.md

StyleKit

120+ curated design style presets with design tokens, component code, and AI rules for consistent UI generation.

TypeScriptNext.jsTailwind CSSDesign Tokens

$ npm install stylekit-tokens

About

120+ curated design style presets with tokens, component code, and AI rules.

stylekit@stylekit.dev

stylekit.dev

design-systemtokensnext-jstypescripttailwind

Releases

v2.1.0

Community runtime + showcase

Feb 2026

v2.0.0

Batch L-N showcase rebuild

Jan 2026

v1.9.0

120 styles milestone

Dec 2025

Contributors

Commit Activity

Recent commits with CI check status

feat: add RevealBlock animation component

AnxForever committed 2 hours ago

a3f8d21success

fix: correct focus ring opacity in Safari 16

contributor committed 5 hours ago

b1c2e90success

refactor: extract useInView hook to shared module

AnxForever committed 1 day ago

c4d5f12warning

docs: update contributing guidelines for style additions

contributor committed 2 days ago

e7f8a34error

chore: bump vitest to v2.1, update lockfile

dependabot committed 3 days ago

f9a0b56success

Animation & Interaction Rules

Four named rules from the GitHub Style aiRules — hover or click each demo to observe the pattern.

aiRulesGitHub Style interaction constraints

Extreme Utilityduration-75 to 150

Interactions express state, not drama. No position shift or scale enlarge. Hover = color change only.

Live demo — hover the button

idle: bg #1f883d, border #1b7f37, shadow 1px under

rule.ts

// Extreme Utility
hover:bg-[#1a7f37]      // color only
active:scale-[0.98]     // micro confirm
transition-all          // duration-100
// NO: hover:scale-105 hover:-translate-y-1

Micro-Tactilityactive:scale-[0.98]

Press confirmation via subtle scale + bg deepen. Not skeuomorphic — just enough tactile signal.

Live demo — click and hold

idle: shadow-[0_1px_0] bottom underline illusion

rule.ts

// Micro-Tactility
shadow-[0_1px_0_rgba(27,31,36,0.04)]
hover:bg-[#0860ca]    // slightly darker
active:scale-[0.98]   // subtle squish
active:bg-[#0757ba]   // darkest state
// NO: active:scale-[0.85] active:rotate

A11y Focus Ringsfocus:ring-4

Keyboard focus must be unambiguous. Always use focus:ring-4 with brand color at 30% opacity — never only border-color.

Live demo — click button or Tab to the input

idle: no ring — ring appears only on keyboard focus

rule.ts

// A11y Focus Rings
focus:outline-none         // remove browser default
focus:ring-4               // 4px ring spread
focus:ring-[#0969da]/30    // brand blue 30%
// For inputs:
focus:shadow-[0_0_0_3px_rgba(9,105,218,0.3)]

Subtle Bordershover:bg + hover:border

Card hover adjusts only background and border shade. No shadow jump, no translate — pure tonal shift.

Live demo — hover the cards

AnxForever/stylekitPublic

120+ design style presets with tokens and AI rules.

TypeScript1.2k stars

AnxForever/claude-kitPublic

Custom agents and skills for Claude Code productivity.

TypeScript487 stars

idle: bg #ffffff, border #d0d7de — minimal visual weight

rule.ts

// Subtle Borders
hover:bg-[#f6f8fa]      // canvas inset
hover:border-[#8c959f]  // border deepens
transition-all duration-150
// NO: hover:shadow-md hover:-translate-y-1

Transition Duration — Why 75–150ms

Animate each to feel the constraint. Fast = utility. Slow = distraction.

Too slow (400ms)

duration-[400ms]

GitHub range (100ms)

duration-[100ms]

Zero (jarring)

duration-[0ms]

Component Gallery

Canonical GitHub-style UI components — all interaction rules applied

Button Variants

Semantic — each color has a function

Outline variant — secondary actions

Tactile rule: active:scale-[0.98] — micro confirm, never full transform. Focus rule: focus:ring-4 + brand color 30% — always visible for keyboard users.

Color System

Precise gray-scale hierarchy + semantic functional colors. No color is decorative.

Gray Scale

Every level has a semantic role — never pick randomly

Text Primary

Headings, body text

#1f2328

Text Muted

Secondary text, captions

#656d76

Text Subtle

Placeholder, disabled

#8b949e

Border Default

Dividers, card outlines

#d0d7de

Canvas Inset

Code blocks, subtle bg

#f6f8fa

Canvas Default

Page & card backgrounds

#ffffff

Nav Dark

Top navigation bar

#24292f

Semantic Colors

Functional color roles — no decoration

Interactive Blue

Links, primary CTA

#0969da

Success Green

Merge, success states

#1f883d

Warning Amber

Pending, review needed

#9a6700

Danger Red

Close, delete, errors

#cf222e

Repository Settings

Toggle uses blue as the only interactive color

Branch protection

Require PR reviews before merging

Auto-merge

Merge when all requirements are met

Delete head branch

Auto-delete after merge

Design Rules

GitHub style is defined as much by what it never does

Use #0969da as the sole primary interactive color

Build visual hierarchy with gray levels, not color variety

Apply rounded-md (6px) corners consistently across all components

Use font-mono with bg-[#f6f8fa] for all code and hash elements

Semantic colors only: green=success, amber=warning, red=danger

Keep transitions 75–150ms — no easing theatrics

Focus rings: focus:ring-4 + brand color at 30% opacity

Card hover: subtle background + border darkening only

Don't

No gradient backgrounds on any UI surfaces

No rounded-2xl or larger (avatars are the only exception)

No shadow-lg or shadow-xl on cards or panels

No serif fonts — system sans-serif stack only

No purely decorative animations or particle effects

No off-brand accent colors used for decoration

No font-size above text-3xl in content areas

No padding above p-6 — maintain information density

Typography

System font stack — no web font overhead, consistent across all OS

Display / Heading — 24px · Semibold

Design System v2.1

Section Title — 20px · Semibold

Repository Overview

Body / Description — 14px · Regular

A comprehensive token library for building consistent developer tooling across platforms and teams.

Caption / Meta — 12px · Regular

Updated 2 hours ago by AnxForever

Label / Badge — 12px · Medium

good first issue

Monospace Stack

Code blocks, commit hashes, token values

Inline code

Use rounded-md for all corners.

Code block

const color = {
  primary: "#0969da",
  border:  "#d0d7de",
};

Commit hash:

a3f8d21

Font stack

-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif

AnxForever/stylekitPublic

1,247 stars

89 forks

42 issues

12 branches4 tags

feat: add RevealBlock animation component2 hours ago

src

components

Button.tsx2h ago

Card.tsx4h ago

Input.tsxyesterday

styles

tokens.ts3d ago

global.css1w ago

lib

utils.ts5d ago

README.md2h ago

package.json5d ago

tsconfig.json2w ago

README.md

StyleKit

120+ curated design style presets with design tokens, component code, and AI rules for consistent UI generation.

TypeScriptNext.jsTailwind CSSDesign Tokens

$ npm install stylekit-tokens

About

120+ curated design style presets with tokens, component code, and AI rules.

stylekit@stylekit.dev

stylekit.dev

design-systemtokensnext-jstypescripttailwind

Releases

v2.1.0

Community runtime + showcase

Feb 2026

v2.0.0

Batch L-N showcase rebuild

Jan 2026

v1.9.0

120 styles milestone

Dec 2025

Contributors

Commit Activity

Recent commits with CI check status

feat: add RevealBlock animation component

AnxForever committed 2 hours ago

a3f8d21success

fix: correct focus ring opacity in Safari 16

contributor committed 5 hours ago

b1c2e90success

refactor: extract useInView hook to shared module

AnxForever committed 1 day ago

c4d5f12warning

docs: update contributing guidelines for style additions

contributor committed 2 days ago

e7f8a34error

chore: bump vitest to v2.1, update lockfile

dependabot committed 3 days ago

f9a0b56success

Animation & Interaction Rules

Four named rules from the GitHub Style aiRules — hover or click each demo to observe the pattern.

aiRulesGitHub Style interaction constraints

Extreme Utilityduration-75 to 150

Interactions express state, not drama. No position shift or scale enlarge. Hover = color change only.

Live demo — hover the button

idle: bg #1f883d, border #1b7f37, shadow 1px under

rule.ts

// Extreme Utility
hover:bg-[#1a7f37]      // color only
active:scale-[0.98]     // micro confirm
transition-all          // duration-100
// NO: hover:scale-105 hover:-translate-y-1

Micro-Tactilityactive:scale-[0.98]

Press confirmation via subtle scale + bg deepen. Not skeuomorphic — just enough tactile signal.

Live demo — click and hold

idle: shadow-[0_1px_0] bottom underline illusion

rule.ts

// Micro-Tactility
shadow-[0_1px_0_rgba(27,31,36,0.04)]
hover:bg-[#0860ca]    // slightly darker
active:scale-[0.98]   // subtle squish
active:bg-[#0757ba]   // darkest state
// NO: active:scale-[0.85] active:rotate

A11y Focus Ringsfocus:ring-4

Keyboard focus must be unambiguous. Always use focus:ring-4 with brand color at 30% opacity — never only border-color.

Live demo — click button or Tab to the input

idle: no ring — ring appears only on keyboard focus

rule.ts

// A11y Focus Rings
focus:outline-none         // remove browser default
focus:ring-4               // 4px ring spread
focus:ring-[#0969da]/30    // brand blue 30%
// For inputs:
focus:shadow-[0_0_0_3px_rgba(9,105,218,0.3)]

Subtle Bordershover:bg + hover:border

Card hover adjusts only background and border shade. No shadow jump, no translate — pure tonal shift.

Live demo — hover the cards

AnxForever/stylekitPublic

120+ design style presets with tokens and AI rules.

TypeScript1.2k stars

AnxForever/claude-kitPublic

Custom agents and skills for Claude Code productivity.

TypeScript487 stars

idle: bg #ffffff, border #d0d7de — minimal visual weight

rule.ts

// Subtle Borders
hover:bg-[#f6f8fa]      // canvas inset
hover:border-[#8c959f]  // border deepens
transition-all duration-150
// NO: hover:shadow-md hover:-translate-y-1

Transition Duration — Why 75–150ms

Animate each to feel the constraint. Fast = utility. Slow = distraction.

Too slow (400ms)

duration-[400ms]

GitHub range (100ms)

duration-[100ms]

Zero (jarring)

duration-[0ms]

Component Gallery

Canonical GitHub-style UI components — all interaction rules applied

Button Variants

Semantic — each color has a function

Outline variant — secondary actions

Tactile rule: active:scale-[0.98] — micro confirm, never full transform. Focus rule: focus:ring-4 + brand color 30% — always visible for keyboard users.

Color System

Precise gray-scale hierarchy + semantic functional colors. No color is decorative.

Gray Scale

Every level has a semantic role — never pick randomly

Text Primary

Headings, body text

#1f2328

Text Muted

Secondary text, captions

#656d76

Text Subtle

Placeholder, disabled

#8b949e

Border Default

Dividers, card outlines

#d0d7de

Canvas Inset

Code blocks, subtle bg

#f6f8fa

Canvas Default

Page & card backgrounds

#ffffff

Nav Dark

Top navigation bar

#24292f

Semantic Colors

Functional color roles — no decoration

Interactive Blue

Links, primary CTA

#0969da

Success Green

Merge, success states

#1f883d

Warning Amber

Pending, review needed

#9a6700

Danger Red

Close, delete, errors

#cf222e

Repository Settings

Toggle uses blue as the only interactive color

Branch protection

Require PR reviews before merging

Auto-merge

Merge when all requirements are met

Delete head branch

Auto-delete after merge

Design Rules

GitHub style is defined as much by what it never does

Use #0969da as the sole primary interactive color

Build visual hierarchy with gray levels, not color variety

Apply rounded-md (6px) corners consistently across all components

Use font-mono with bg-[#f6f8fa] for all code and hash elements

Semantic colors only: green=success, amber=warning, red=danger

Keep transitions 75–150ms — no easing theatrics

Focus rings: focus:ring-4 + brand color at 30% opacity

Card hover: subtle background + border darkening only

Don't

No gradient backgrounds on any UI surfaces

No rounded-2xl or larger (avatars are the only exception)

No shadow-lg or shadow-xl on cards or panels

No serif fonts — system sans-serif stack only

No purely decorative animations or particle effects

No off-brand accent colors used for decoration

No font-size above text-3xl in content areas

No padding above p-6 — maintain information density

Typography

System font stack — no web font overhead, consistent across all OS

Display / Heading — 24px · Semibold

Design System v2.1

Section Title — 20px · Semibold

Repository Overview

Body / Description — 14px · Regular

A comprehensive token library for building consistent developer tooling across platforms and teams.

Caption / Meta — 12px · Regular

Updated 2 hours ago by AnxForever

Label / Badge — 12px · Medium

good first issue

Monospace Stack

Code blocks, commit hashes, token values

Inline code

Use rounded-md for all corners.

Code block

const color = {
  primary: "#0969da",
  border:  "#d0d7de",
};

Commit hash:

a3f8d21

Font stack

-apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif