|
|
@@ -0,0 +1,80 @@
|
|
|
+# 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.
|
|
|
+
|
