leemorgan_dev/AGENTS.md

Style

Professional, minimalistic, and high-contrast. Emphasize clarity, generous whitespace, and restrained use of color. The design should feel precise and technical. Black is the dominant base; light blue is the single accent for interactive and highlighted elements.

Follow this style guide for all visual decisions. When in doubt, prioritize minimalism, high contrast, and the single light-blue accent.

Colors

Role	Color	Hex	Usage
Background	Near-black	#0A0A0A	Page and section backgrounds
Surface / Card	Dark charcoal	#141414	Cards, panels, elevated areas
Primary text	Off-white	#F5F5F5	Headings and body text
Secondary text	Medium gray	#A0A0A0	Captions, metadata, supporting text
Accent	Light blue	#4FC3F7	Links, buttons, focus states, highlights
Accent hover	Lighter blue	#81D4FA	Hover on accent elements
Border / Divider	Subtle gray	#2A2A2A	Card borders, separators
Error / Destructive	Soft red	#EF5350	Only when needed (rare)

k## Color Rules

• Use the light blue accent sparingly — primarily for interactive elements and key highlights.
• Prefer solid fills over gradients or shadows. When elevation is needed, use a 1px border in #2A2A2A instead of drop shadows.
• Maintain strong contrast. Body text should always be #F5F5F5 or close to it on dark backgrounds.
• Avoid pure black (#000000) for large areas; use #0A0A0A.

Typography

• Font stack: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
• Headings: Weight 500–600. Optional slight letter-spacing (0.02–0.04em) on large headings.
• Body: Weight 400, line-height 1.6–1.7.
• Scale: Keep hierarchy simple (e.g. 2.5rem / 1.75rem / 1.25rem / 1rem). Avoid many intermediate sizes.
• Monospace (for code or technical details): ui-monospace, SFMono-Regular, Menlo, Consolas, monospace

Layout

• Maximum content width: 720–900px for text-heavy pages; wider for project grids if needed.
• Vertical rhythm: 1.5–2rem between related elements, 3–4rem between major sections.
• Left-aligned text by default. Center only short hero statements.
• Numbered section labels (e.g. “01 Projects”) are optional but acceptable for a structured feel.

Components

Buttons

• Primary: Light blue background (#4FC3F7), dark text (#0A0A0A), 8–10px border-radius, ~0.75rem horizontal / 0.5rem vertical padding.
• Secondary / Ghost: Transparent background, 1px light blue border, light blue text.
• Hover: Slightly lighten the blue or reduce opacity to ~90%. No heavy scale transforms.
• Disabled: Reduced opacity (0.4–0.5), no pointer cursor.
• Prefer rectangular or lightly rounded shapes. Avoid pill shapes unless used consistently for tags.

Links

• Default: Light blue (#4FC3F7), no underline by default.
• Hover: Underline or shift to #81D4FA.
• Visited: Same as default (or a slightly muted blue if distinction is desired).
• Inline links in body text must remain light blue for visibility.

Cards

• Background #141414, 1px border #2A2A2A, 8–12px border-radius.
• Padding 1.25–1.5rem.
• Optional hover: border color shifts toward a muted blue or slight background lighten.
• Title in primary text, description in secondary text. Keep internal spacing tight but readable.
• Use for projects, skills, contact items, etc. Avoid heavy imagery unless it is the focus.

Forms & Inputs

• Background slightly lighter than card (#1A1A1A), 1px border #2A2A2A.
• Focus: Border changes to light blue.
• Placeholder text in #666.
• Labels above inputs in secondary text color.

Navigation

• Simple horizontal or vertical list.
• Active state indicated by light blue text or a thin underline.
• Minimal height. No large logo treatments required.

Other Guidelines

• Icons: Simple, line-style, monochrome (white or light blue). Avoid filled multi-color icons.
• Images: Prefer subtle borders or none. Use dark overlays if text must sit on photos.
• Motion: Short, subtle transitions (150–200ms) on hover/focus. Avoid large animated elements.
• Accessibility: Ensure accent blue meets contrast on dark surfaces. Provide visible focus outlines.