- name
- ultra-premium-saas-ui
- description
- Design engineering skill enforcing Concentric Radius geometry, dynamic tracking scales, hairline elevation, and a ZERO TOLERANCE blacklist against generic AI templates, italic fonts, random colors, mismatched icons, and improper proportions.
- metadata
- {"category":"ui-ux-design-engineering","triggers":"ultra premium ui, concentric radius, anti ai design, awwwards aesthetics, proportion rules, geometry math"}
# Ultra-Premium SaaS & Architectural UI Skill (Anti-AI & Strict Geometry Laws)
This skill governs **Awwwards Site of the Year visual quality** with absolute ZERO TOLERANCE for generic AI aesthetic artifacts:
---
## 🛑 NON-NEGOTIABLE ANTI-AI BLACKLIST (KESİNLİKLE YASAKLAR)
1. 🚫 **No Generic AI Template Feel:** Banned default 3-column Bootstrap/Tailwind cards, floating neon purple gradients, and generic AI component layouts.
2. 🚫 **No Random / Italic Fonts:** Banned italic/slanted font styles, mismatched font families, or default browser fonts. Only curated pairings allowed (*Plus Jakarta Sans* display + *Geist Mono* code, or *SF Pro Display* + *SF Pro Text*).
3. 🚫 **No Mismatched Icons or Colors:** Banned inconsistent icon stroke weights (mixing 1px, 2px, filled, outlined). Icons MUST share exact `stroke-width="1.5"` or `2` SVG geometry. Banned saturated primary reds, blues, or greens.
4. 🚫 **No Broken Spatial Proportions:** Banned arbitrary padding offsets (`p-3` container with `p-5` child). Every padding, margin, and gap MUST strictly adhere to the 8px grid scale.
---
## 📐 STRICT SPATIAL PROPORTION & GEOMETRY LAWS
### 1. Concentric Corner Radius Formula
$$\text{Inner Radius} = \text{Outer Radius} - \text{Padding}$$
- Example: Outer container `rounded-[24px]` (`1.5rem`) with `p-4` (`16px`) $\rightarrow$ Inner element MUST be `rounded-[8px]` (`0.5rem`).
### 2. Dynamic Typography Tracking Scale
$$\text{Tracking} = -0.0008 \times \text{Font Size (px)} - 0.01$$
- Display Headings ($36\text{px}+$): `-0.035em` to `-0.045em` tight tracking.
- Sub-labels ($< 12\text{px}$): `+0.12em` to `+0.20em` wide tracking uppercase.
### 3. Hairline Elevation & Micro-Depth
- Hairline borders: `border border-white/10 dark:border-white/5`.
- Soft ambient depth: `shadow-[0_8px_32px_rgba(0,0,0,0.25)]`.
GitHub에서 보기