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

design-kraken

Apply Kraken's design system tokens, typography, and component styles to UI generation.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Kraken's visual identity requires exact design tokens, but manually extracting colors, typography scales, and component specs from the Kraken website is slow and error-prone. ## Core Features & Use Cases - Complete Design Tokens: Provides Kraken's exact color palette (Kraken Purple #7132f5, neutral grays, semantic greens), typography hierarchy (Kraken-Brand and Kraken-Product), spacing, radius, and shadow values. - Component Specifications: Defines button variants (primary purple, outlined, subtle, white), badges, cards, and form states with precise CSS values. - Visual Reference Previews: Includes light and dark theme HTML previews showing the full design system implemented across colors, typography, buttons, cards, forms, spacing, radius, and elevation. - Use Case: When asked to build a crypto exchange landing page styled like Kraken, apply the 48px bold display heading with -1px tracking, purple CTA buttons with 12px radius, and whisper-level shadows directly from the documented tokens. ## Quick Start Create a landing page for a crypto trading app using the Kraken design system with its purple brand color and typography.

Frequently Asked Questions about design-kraken

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

FAQPage Schema
How do I style a UI to look like Kraken's website?▼

Use Kraken Purple (#7132f5) for primary CTAs and links, Kraken-Brand font at 700 weight with negative letter-spacing for headings, and Kraken-Product for body text. Apply 12px border radius on buttons and subtle shadows like rgba(0,0,0,0.03) 0px 4px 24px.

What colors does the Kraken design system use?▼

The primary brand color is Kraken Purple (#7132f5) with darker variants #5741d8 and #5b1ecf. Neutrals include near-black #101114 for text, cool gray #686b82, and silver blue #9497a9, plus green #149e61 for success states.

Does the Kraken design system support dark mode?▼

Yes, the skill includes a dark theme HTML preview (preview-dark.html) alongside the light theme preview. The dark variant inverts surface and text colors while keeping the purple brand accents consistent.

What fonts does Kraken use and what are the fallbacks?▼

Kraken uses Kraken-Brand for display headings with IBM Plex Sans, Helvetica, and Arial as fallbacks, and Kraken-Product for UI text with Helvetica Neue fallbacks. Since the proprietary fonts are not publicly available, IBM Plex Sans is the closest fallback.

What border radius should Kraken-style buttons use?▼

Kraken buttons use a 12px border radius, which is the maximum allowed for buttons in this design system. Pill-shaped buttons (9999px radius) should not be used for buttons, though the radius scale includes 9999px for other elements.

Related Skills

Explore More Design & Creative Skills→
deadhearth01deadhearth01

frontend-design

Generate production-grade frontend interfaces with structured frontmatter-driven design processes.

Community
Advanced
JNZader-VaultJNZader-Vault

frontend-design

Generate production-grade frontend interfaces with unique aesthetics in React, Vue, or Svelte.

Official
Advanced
AI-Staffing-Solution-Consultants-LLCAI-Staffing-Solution-Consultants-LLC

agency-ui-designer

Creates design systems, component libraries, and accessible interface specifications with CSS design tokens.

Official
Intermediate
ECFN15ECFN15

expressive-brand

Create token-based brand identity systems with typography, color, and motion rules.

Community
Advanced