skills.rest
deepparser
deepparserOFFICIAL
Explore all skills by this author →
WebsiteGitHub

design-clickhouse

Apply ClickHouse's design system tokens and component styles when generating UI.

Updated Feb 23, 2026
Search Tags:#typography#design system#design tokens#clickhouse#dark theme#ui generation#brand styling
One-click install
npx skills add https://github.com/deepparser/skills --skill design-clickhouse-deepparser
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: design-clickhouse
Source: https://github.com/deepparser/skills/tree/main/design-clickhouse
Command: npx skills add https://github.com/deepparser/skills --skill design-clickhouse-deepparser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match ClickHouse's brand identity requires knowing its exact colors, typography, spacing, and component rules, which are otherwise scattered and hard to reproduce consistently. ## Core Features & Use Cases - Complete Design Token Catalog: Provides exact hex values (Neon Volt #faff69, Pure Black #000000, Forest Green #166534), typography scales (Inter 400-900, Inconsolata code), spacing, radius, and elevation levels. - Component Specifications: Defines button variants (neon, dark, forest green, ghost, pill), card styles with charcoal borders and inset shadows, navigation, code blocks, and performance stat layouts. - Light and Dark HTML Previews: Bundled preview.html and preview-dark.html files let you verify exact CSS values and component structure visually. - Use Case: When asked to build a landing page or dashboard styled like ClickHouse, invoke this skill to generate UI with the correct black canvas, neon yellow-green accents, and heavy display typography. ## Quick Start Use the design-clickhouse skill to create a hero section styled like the ClickHouse website with a neon CTA button.

Frequently Asked Questions about design-clickhouse

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

FAQPage Schema
How do I build a UI that looks like ClickHouse's website?▼

Use this skill to apply ClickHouse's design system: pure black backgrounds, Neon Volt (#faff69) accents, Inter typography at weight 900 for headlines, and charcoal-bordered cards. It provides exact tokens and component specs for buttons, cards, and navigation.

What colors does the ClickHouse design system use?▼

The palette centers on Neon Volt (#faff69) as the sole chromatic accent on Pure Black (#000000), with Forest Green (#166534) for secondary CTAs, Pale Yellow (#f4f692) for active states, and neutral grays like Charcoal (#414141) for borders.

Does this skill include light and dark theme previews?▼

Yes, it bundles preview.html for light theme and preview-dark.html for dark theme. These HTML files show the full token catalog including color swatches, typography samples, buttons, cards, spacing, and elevation levels.

What fonts does the ClickHouse design system use?▼

Inter is the primary font across weights 400-900, with weight 900 reserved for 96px display headlines. Basier handles feature section headings, and Inconsolata is used for code blocks at weight 600.

When should I not use the ClickHouse design style?▼

Avoid it when the project needs light-mode-first design, soft rounded aesthetics, or multi-color palettes. ClickHouse's system is strictly dark, uses sharp 4-8px radii, and limits color to neon yellow-green and forest green accents.

Related Skills

Explore More Design & Creative Skills→
SpaceZephyrSpaceZephyr
127

space-brand-ui-design

Fetch design specifications and generate UI components in specified brand styles.

Community
Advanced
handsomelong922handsomelong922

frontend-patterns

Provide reusable React and Next.js patterns for component composition, state management, and data fetching.

Community
Advanced
SwimmingLiuSwimmingLiu
1

audit

Audit UI quality across accessibility, performance, theming, and responsive design.

Community
Advanced
figmafigma
1.9k

implement-design

Translate Figma designs into UI code using design tokens and existing components.

Official
Advanced