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.

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.

Code

Never use TypeScript

Other

Do not ever run the server, I will do that manually
Never edit environment variables
Whenever I type "mnc" anywhere in the message, that means "make no changes". Do not edit any of the code, just respond to my message

AGENTS.md 4.7 KB Előzmények Nyers