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

design-wise

Apply Wise's design system tokens, typography, and components when generating UI.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Building interfaces that match Wise's visual identity requires exact design tokens — colors, typography scales, spacing, and component styles — that are tedious to reverse-engineer from the live site. This Skill provides the complete Wise design system specification so generated UI matches the brand accurately. ## Core Features & Use Cases - Complete Design Tokens: Exact color palette (Wise Green #9fe870, Near Black #0e0f0c, Dark Green #163300), typography scale (Wise Sans 900 at 0.85 line-height, Inter body), spacing, radius, and shadow values. - Component Specifications: Pill buttons with scale(1.05) hover animations, 30px–40px radius cards, form inputs with green focus rings, and navigation patterns. - Light & Dark Previews: Bundled HTML preview files (preview.html, preview-dark.html) showing the full system implemented for visual verification. - Use Case: When asked to build a fintech landing page styled like Wise, the Skill supplies the exact headline sizing, green CTA styling, and card treatments so the output matches Wise's brand without manual research. ## Quick Start Build a landing page hero section styled like Wise with a bold headline and green pill call-to-action button.

Frequently Asked Questions about design-wise

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

FAQPage Schema
How do I make a website look like Wise?▼

Use Wise's core tokens: Wise Sans at weight 900 with 0.85 line-height for headlines, Wise Green #9fe870 pill buttons with Dark Green #163300 text, Inter at weight 600 for body copy, and scale(1.05) hover animations on buttons.

What colors does the Wise design system use?▼

The primary palette is Near Black #0e0f0c for text, Wise Green #9fe870 for CTAs, Dark Green #163300 for button text, and Light Mint #e2f6d5 for soft surfaces. Semantic colors include Positive Green #054d28, Danger Red #d03238, and Warning Yellow #ffd11a.

What fonts does Wise use on its website?▼

Wise uses Wise Sans, a proprietary font, at weight 900 for display headings with OpenType contextual alternates enabled. Inter serves as the body and UI font, with weight 600 as the default reading weight.

Does this design system support dark mode?▼

Yes, the Skill includes a dark theme preview (preview-dark.html) that inverts the palette to a near-black background with light text while keeping the Wise Green accent. Both light and dark HTML previews are bundled for reference.

What button styles does Wise use?▼

Wise uses pill-shaped buttons with 9999px border-radius. The primary button has a #9fe870 green background with #163300 dark green text, and buttons physically grow with scale(1.05) on hover and compress with scale(0.95) on click.

Related Skills

Explore More Design & Creative Skills→
matteotittamatteotitta
29

landing-page-wireframe

Generate landing page wireframes from positioning and messaging into visual layouts.

Community
Advanced
ingbyringbyr
2

frontend-design

Convert high-level frontend requirements into production-grade React, Vue, or HTML/CSS interfaces.

Community
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
Adham7843Adham7843

ckm:design

Design brand identities, UI elements, and AI-generated mockups.

Community
Advanced