skills.rest
ECFN15
ECFN15COMMUNITY
Explore all skills by this author →
GitHub

geometric-modern

Create geometry-led brand systems with grid, shape grammar, and modular components.

Updated May 15, 2026
Search Tags:#typography#geometry#tokens#design-system#grid#modular
One-click install
npx skills add https://github.com/ECFN15/design-skills-db --skill geometric-modern
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: geometric-modern
Source: https://github.com/ECFN15/design-skills-db/tree/main/.agents/skills/geometric-modern
Command: npx skills add https://github.com/ECFN15/design-skills-db --skill geometric-modern

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Geometric Modern provides a disciplined approach to building brand pages and digital products where geometry structures content, rhythm, and interaction, eliminating generic layouts and enabling repeatable systems.

Core Features & Use Cases

  • Enforces a single geometry grammar across heroes, cards, sections, and footers.
  • Supplies token-driven color, radius, type, spacing, and motion systems to ensure consistent identity.
  • Suitable for architecture studios, modern portfolios, shape-led SaaS, and editorial/products that require a rational yet memorable grid.

Quick Start

Draft a compact design plan and implement four signature components to initialize a Geometric Modern page.

Frequently Asked Questions about geometric-modern

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

FAQPage Schema
How do I create a grid-led brand identity system for a digital portfolio?▼

To create a grid-led brand identity, you define a repeatable modular grid and shape grammar to govern layout, typography, and interactions. This enforces a single geometry rule across heroes, cards, and footers, ensuring consistent identity.

What are design tokens and why do I need them for a modular design system?▼

Design tokens are explicit variables for color, spacing, radius, depth, and motion. You need them in a modular design system to supply token-driven consistency, ensuring that geometry-led layouts remain uniform across different brand campaigns.

Can I use a geometric layout system for shape-led SaaS products?▼

Yes, you can apply a geometric layout system to shape-led SaaS products. The system enforces a rational grid and modular components, ensuring that user interface elements maintain consistent structure and identity.

What's the best way to start building a modular design system for an architecture studio?▼

The best way to start is to draft a compact design plan and implement four signature components. This initializes the geometric modern page, applying a structured grid and shape grammar to the architecture studio's layout.

Does a geometry-driven design system work for editorial pages?▼

Yes, a geometry-driven design system works for editorial pages. It eliminates generic layouts by enforcing a disciplined grid and modular components, providing a rational yet memorable structure for content rhythm.

Related Skills

Explore More Design & Creative Skills→
ihlamuryihlamury
73

jasper-ui-skills

Enforce Jasper UI design constraints for light-mode interfaces with Inter font and 4px grid.

Community
Intermediate
PixoraftPixoraft

canvas

Create, modify, and query visual shapes on an infinite canvas.

Community
Intermediate
kevintsai1202kevintsai1202
47

teaching-site-design-system

Define token-driven design systems for teaching site themes.

Community
Advanced
stacksjsstacksjs
2

stacks-design-taste-codex

Enforce deterministic design rules for Stacks.js frontend layouts.

Official
Advanced