Methodical design skill for AI agents

Overview

Methodical is an analytical, editorial, and tactile design system that feels like a carefully organized instrument panel laid out on a lab notebook. Warm paper surfaces, subtle film grain, plum-black ink, burnt-orange actions, precise hairlines, and compact product chrome create a rigorous but calm interface.

It balances editorial warmth with application-level clarity. Public pages have visible paper texture and measured section cadence, while cards, controls, dashboards, and overlays stay clean and opaque for dependable interaction.

Design language

• Warm paper foundation: The main surface uses #F9F4E7, deeper cadence sections use #EFE9D5, and cards use opaque #FBF9F1.
• One burnt-orange accent: #CD3C12 is reserved for actions, selected data, and focused emphasis, with semantic colors appearing only when they communicate real state.
• Subtle film grain: Public-page sections and the footer carry a low-contrast paper texture, while controls, cards, panels, and product chrome remain clean.
• Precise geometry: Controls use 3px corners, panels use 6px, menus use 4px, and larger feature surfaces stop at 12px. Only functionally circular controls use full rounding.
• Hairline construction: A consistent 1px neutral rule defines sections, cards, inputs, panels, widgets, and internal dividers without creating visual weight.

Typography

Inter is the only type family across Methodical. Strong headings use a confident weight, reading copy maintains a 16px floor, and interface labels, tables, metrics, annotations, and controls share the same clear sans-serif voice.

Best suited for

Methodical works well for analytics products, research tools, financial dashboards, knowledge systems, data-heavy SaaS applications, editorial platforms, and brands that want technical credibility with a tactile human quality.

Included guidance

The downloadable skill includes tokens for color, type, spacing, radius, elevation, motion, and responsiveness, plus detailed specifications for actions, cards, forms, navigation, overlays, feedback, tables, charts, application layouts, marketing pages, and ecommerce experiences.