hermes-agent/skills/creative/design-md/templates/starter.md

version, name, description, colors, typography, rounded, spacing, components

version	name	description	colors	typography	rounded	spacing	components
alpha	MyBrand	One-sentence description of the visual identity.	primary secondary tertiary neutral on-primary on-tertiary #0F172A #64748B #2563EB #F8FAFC #FFFFFF #FFFFFF	h1 h2 body-md label-caps fontFamily fontSize fontWeight lineHeight letterSpacing Inter 3rem 700 1.1 -0.02em fontFamily fontSize fontWeight lineHeight Inter 2rem 600 1.2 fontFamily fontSize lineHeight Inter 1rem 1.5 fontFamily fontSize fontWeight letterSpacing Inter 0.75rem 600 0.08em	sm md lg full 4px 8px 16px 9999px	xs sm md lg xl 4px 8px 16px 24px 48px	button-primary button-primary-hover card backgroundColor textColor rounded padding {colors.tertiary} {colors.on-tertiary} {rounded.sm} 12px backgroundColor textColor {colors.primary} {colors.on-primary} backgroundColor textColor rounded padding {colors.neutral} {colors.primary} {rounded.md} 24px

Overview

Describe the voice and feel of the brand in one or two paragraphs. What mood does it evoke? What emotional response should a user have on first impression?

Colors

• Primary ({colors.primary}): Core text, headlines, high-emphasis surfaces.
• Secondary ({colors.secondary}): Supporting text, borders, metadata.
• Tertiary ({colors.tertiary}): Interaction driver — buttons, links, selected states. Use sparingly to preserve its signal.
• Neutral ({colors.neutral}): Page background and surface fills.

Typography

Inter for everything. Weight and size carry hierarchy, not font family. Tight letter-spacing on display sizes; default tracking on body.

Layout

Spacing scale is a 4px baseline. Use md (16px) for intra-component gaps, lg (24px) for inter-component gaps, xl (48px) for section breaks.

Shapes

Rounded corners are modest — sm on interactive elements, md on cards. full is reserved for avatars and pill badges.

Components

• button-primary is the only high-emphasis action per screen.
• card is the default surface for grouped content. No shadow by default.

Do's and Don'ts

• Do use token references ({colors.primary}) instead of literal hex in component definitions.
• Don't introduce colors outside the palette — extend the palette first.
• Don't nest component variants. button-primary-hover is a sibling, not a child.