minimalist-portfolio-design

Create a typography-driven portfolio design with a 12-column grid and monochrome palette.

Updated Nov 15, 2023
One-click install
npx skills add https://github.com/Dramekanji/kanji --skill minimalist-portfolio-design
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: minimalist-portfolio-design
Source: https://github.com/Dramekanji/kanji/tree/main/.claude
Command: npx skills add https://github.com/Dramekanji/kanji --skill minimalist-portfolio-design

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a complete blueprint for creating a clean, typography-driven portfolio site that communicates identity with minimal chrome.

Core Features & Use Cases

  • Typography as the hero: typography, grid, and generous whitespace form the core of the design system.
  • Monochrome palette guidance: black, white, and grays for timeless elegance.
  • Responsive grid system: a 12-column grid with generous gutters for hero, about, work, and contact sections.
  • Layout patterns: hero with left text and right image, grid-based portfolio, and modular project cards.
  • Accessibility considerations: color contrast, readable typography, keyboard navigation.

Quick Start

Create a minimalist portfolio scaffold by applying the typography, spacing, and grid rules described above. Start by defining a global type scale, color tokens, and a 12-column grid, then build hero, about, and work sections following the recommended patterns.

Frequently Asked Questions about minimalist-portfolio-design

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

FAQPage Schema
How do I design a minimalist portfolio with bold typography?

A minimalist portfolio uses bold typography, a monochrome palette, and a 12-column grid with generous gutters to communicate identity. You establish a global type scale and color tokens, then build hero, about, work, and contact sections using these patterns.

What is the best way to structure a typography-driven personal branding site?

The best way to structure a typography-driven personal branding site is through layout patterns like a hero with left text and right image, a grid-based portfolio, and modular project cards. This approach relies on generous whitespace to let the typography stand out.

How does a 12-column grid work for portfolio design?

A 12-column grid works for portfolio design by providing a responsive system with generous gutters that organizes hero, about, work, and contact sections. It enforces a cohesive design system ensuring consistent alignment across modular project cards.

Can I build an accessible portfolio using only a monochrome palette?

Yes, you can build an accessible portfolio using a monochrome palette of black, white, and grays. The design system enforces accessible color contrast, readable typography, and keyboard navigation to ensure the site is usable.

Does minimalist portfolio design require specific components or frameworks?

Minimalist portfolio design does not require specific components or frameworks. It acts as a blueprint guiding the creation of a clean scaffold by defining a global type scale, color tokens, and grid rules rather than relying on external dependencies.

When should I not use a minimalist design system for my portfolio?

You should not use a minimalist design system when your portfolio requires complex visual chrome or vibrant color schemes beyond a monochrome palette. This approach strictly enforces typography and grid rules, limiting highly decorative or illustration-heavy layouts.