# Design & Styling Skills (Steve Schoger Style)

When designing or refactoring UI components, adhere to these specific aesthetic and structural rules.

## 1. Typography & Impact
- **Font:** Always use 'Inter Variable'. Use the 'Display' version for large headings.
- **Heading Styling:** Set `font-weight` to approximately `550` (between medium and semibold). 
- **Tracking:** For headings over 24px, apply `tracking-tighter`.
- **In-line Feature Headings:** Experiment with making the title and supporting text the same size (e.g., `text-4xl`), but color the supporting text `gray-600` so it reads like a single, continuous block.
- **Eyebrows:** Use a monospace font (e.g., `font-mono`), `uppercase`, `text-xs`, and `tracking-wider`.

## 2. Borders and Elevation
- **Crisp Borders:** Never use solid gray hex codes for borders on cards or buttons. Use `ring-1 ring-gray-950/10` (or 5% for subtler UI).
- **Secondary Buttons:** To match the height of solid primary buttons, wrap them in:
  `<span class="inline-flex p-px rounded-full bg-gray-950/10"><button class="bg-white ...">Content</button></span>`
- **Shadows:** Use small, crisp shadows. Avoid large, blurry "muddy" shadows.

## 3. Layout and Containers
- **Hero Alignment:** Prefer a 3/5 headline to 2/5 subtext split over centered layouts.
- **The "Well" Effect:** For screenshots or featured content, use a background of `gray-950/[0.025]` with a thin inset ring and a tight gap (e.g., 8px padding).
- **Canvas Grids:** Apply `border-b border-gray-950/5` to sections, making the horizontal lines `w-screen` (full width) while keeping content within a `max-w-7xl` container.
- **Content Width:** Use character-based widths for typography (e.g., `max-w-[45ch]`) instead of fixed pixel widths to ensure better readability.

## 4. Polishing Utilities
- **Text Wrap:** Use `text-pretty` for body copy and `text-balance` for short, multi-line headlines to prevent orphans.
- **Icons:** Keep social icons and utility icons small and high-contrast (`gray-950`).
- **Logos:** Ensure logo clouds are monochromatic (usually `gray-950`) with no opacity for a cleaner, premium look.