@engrate/components 0.1.11 → 0.1.12

package/dist/skills/engrate-designer.md

@@ -0,0 +1,789 @@
+---
+name: engrate-designer
+description: Comprehensive brand identity system for Engrate, covering visual design, typography, color usage, and UI standards. Use this skill when creating any visual materials, web interfaces, presentations, or marketing content for Engrate to ensure brand consistency. Essential for designers, developers, and content creators working on Engrate-related projects. Use for any design work involving Engrate branding, including websites, apps, presentations, marketing materials, social media graphics, or UI components.
+---
+
+# Engrate Designer
+
+## 1. Manifesto & Brand Strategy
+
+### Core Message
+
+- We solve problems — preferably the biggest ones we can find
+- Everything starts and ends with energy
+- We're building a platform that makes the transition to sustainability faster, more democratic, and more profitable
+- Our overarching goal: to become the global standard for energy data
+
+### Tone of Voice
+
+- Problem-solving and action-oriented
+- Forward-looking without dismissing existing systems
+- AI as an enabler for handling complexity
+- Balance between technical capability and human connections
+
+---
+
+## 2. Logo
+
+### Structure
+
+- **Wordmark:** Typeface Granjon (100+ years old)
+  - Represents the old energy world
+- **Symbol:** Three overlapping diamonds
+  - Symbolizes interacting technology
+  - Creates something greater than the sum of its parts
+
+### Usage
+
+- Primary logo should be used as the standard version
+- The combination of old (Granjon) and new (diamonds) must always be maintained
+
+---
+
+## 3. Colors
+
+### 3.1 Primary Color: Sunflower (Hero Color)
+
+**#FFBE26**
+
+- CMYK: C:0, M:27, Y:94, K:0
+- HEX: #FFBE26
+
+**Usage:**
+
+- Should be used when only one color can be chosen
+- Inspired by the eternal power of the sun
+- Represents balance in energy perspective (between green and red spectrum)
+- The most powerful color in the identity
+- **NEVER use Sunflower for text** — reserve for UI elements, accents, and highlights only
+
+**Philosophy:**
+
+- The sun is the prerequisite for all energy
+- Yellow represents balance in the energy spectrum (between green and red)
+- Balances elegantly in the middle
+
+---
+
+### 3.2 Secondary Colors (Yellow Spectrum)
+
+**CRITICAL RULE:** All colors work as individual, strong, and complementary colors — **NEVER** as tints or fades.
+
+| Color              | HEX     | Usage                          |
+| ------------------ | ------- | ------------------------------ |
+| **Sunflower**      | #FFBE26 | Primary, always starting point |
+| **Lemon Meringue** | #FFF8A2 | Supporting, background fields  |
+| **Vanilla**        | #FFFCD0 | Supporting, background fields  |
+| **Eggshell**       | #FFFDE8 | Supporting, background fields  |
+
+**Important:** Creates a world of nuances in the same emotional space
+
+---
+
+### 3.3 Grayscale
+
+**Primary Function:**
+
+- Should be the **most used** "color" in the identity
+- Creates clear hierarchies, navigation, and logic **without using color**
+- Makes the colors look their absolute best
+
+**CRITICAL PROPORTION RULE:**
+
+- **10% color vs 90% grayscale**
+- This is when colors look their absolute best
+- Deviations from this rule weaken the visual identity
+
+**Function:**
+
+- Variations created to allow clear hierarchies
+- Grayscale makes the small, intense color splashes maximally impactful
+
+**Defined Grayscale Colors:**
+
+| Usage                      | HEX     | Description                    |
+| -------------------------- | ------- | ------------------------------ |
+| **Text Primary**           | #1A1A1A | All main text, headings        |
+| **Text Secondary**         | #4A4A4A | Body text, descriptions        |
+| **Text Tertiary**          | #6A6A6A | Labels, meta information       |
+| **Main Background**        | #FAFAFA | Primary page background        |
+| **Alternative Background** | #F5F5F5 | Sections, alternative surfaces |
+| **Cards/Modules**          | #F9F9F9 | Cards, containers              |
+| **Contrast Background**    | #EFEFEF | When extra contrast is needed  |
+| **Line Color**             | #E5E5E5 | Borders, dividers              |
+
+**IMPORTANT - Background Colors:**
+
+- **NEVER** use pure white background (#FFFFFF)
+- **ALWAYS** use very light gray background
+- Recommended background colors: #FAFAFA, #F5F5F5, #F9F9F9
+- This subtle gray tone creates warmth and softness
+- Provides better contrast for color accents
+
+**IMPORTANT - Background Fields:**
+
+- Use light gray (#FAFAFA, #F5F5F5, #F9F9F9) OR light yellow (#FFFCD0, #FFFDE8) shades for background fields
+- These create subtle separations without dominating
+- Choose based on desired feeling: gray for neutrality, yellow for energy
+
+---
+
+### 3.4 Complementary Colors
+
+**CRITICAL USAGE RULES:**
+
+- Should be used with **GREAT CAUTION**
+- Can **NEVER** have greater presence than the Hero color spectrum (yellow)
+- Secondary function only
+
+| Color         | HEX     | Name          |
+| ------------- | ------- | ------------- |
+| Warm Purple   | #721B5D | Warm purple   |
+| Cool Purple   | #9B4ED8 | Cool purple   |
+| Electric Blue | #0080FF | Electric blue |
+| Deep Blue     | #002FA7 | Deep blue     |
+
+---
+
+## 4. Typography
+
+### 4.1 Universal Typography Rules
+
+**CRITICAL RULE - Letter Spacing (Tracking):**
+
+- **All typography above 10pt must use -5% letter spacing**
+- This applies universally: headings, body text, labels, buttons, links, breadcrumbs — everything
+- Only exception: very small labels (≤10pt) may use neutral or slightly positive tracking
+
+**CRITICAL RULE - Text Colors:**
+
+- **NEVER use colored text** (no Sunflower, no yellow spectrum, no complementary colors)
+- **All text must be grayscale only**
+- **Prioritize black (#1A1A1A)** for most text
+- Use gray (#4A4A4A, #6A6A6A) only when helpful for hierarchy
+- **Avoid white text** — use only when absolutely necessary on dark images
+
+**CRITICAL RULE - Work Sans Weight:**
+
+- Work Sans must **ALWAYS** be Regular
+- **NO other weights are allowed** — no Bold, no Medium, no Light
+- Hierarchy is created through size and color, NEVER through weight
+
+### 4.2 Type Hierarchy
+
+**CRITICAL RULE - When to use Libre Baskerville:**
+
+- **Libre Baskerville** should ONLY be used for **really large headings** (60pt and up)
+- This is typically large hero headings, landing page headings, main headings in print materials
+- Creates distinct visual identity for the most important headings
+- Represents combination of tradition and modernity
+- Gives weight and authority to main messages
+
+**Work Sans:**
+
+- Used for all headings under 60pt (H2, H3, H4, H5)
+- Used for all body text
+- Used for labels and meta information
+- This is the default choice for typography
+
+**Summary:**
+
+- **Libre Baskerville**: Only large hero headings (≥60pt)
+- **Work Sans Regular**: Everything else (headings <60pt, body text, labels, links, buttons)
+
+---
+
+### 4.3 Primary Typeface: Libre Baskerville (Only Large Hero Headings)
+
+**Usage Area:** ONLY really large hero headings (60pt and up)
+
+#### Large Hero Headings
+
+| Level   | Size  | Line Height | Letter Spacing | Weight  |
+| ------- | ----- | ----------- | -------------- | ------- |
+| Hero H1 | 60pt+ | 110%        | -5%            | Regular |
+
+**Hero Heading Specifications:**
+
+- Line height: **110%** (tight, impactful)
+- Letter spacing: **-5%** (consistent with all typography >10pt)
+
+**ABSOLUTE RULE:**
+
+- Libre Baskerville may ONLY be used for headings that are 60pt or larger
+- Libre Baskerville may NEVER be used for body text, labels, or smaller headings
+
+---
+
+### 4.4 Secondary Typeface: Work Sans (Standard for Everything Else)
+
+**Usage Area:** All headings under 60pt, body text, labels, links, buttons
+
+#### Headings
+
+| Level         | Size | Line Height | Letter Spacing | Weight  |
+| ------------- | ---- | ----------- | -------------- | ------- |
+| H1 (Standard) | 40pt | 41pt        | -5%            | Regular |
+| H2            | 30pt | 32pt        | -5%            | Regular |
+| H3            | 25pt | 27pt        | -5%            | Regular |
+| H4            | 20pt | 22pt        | -5%            | Regular |
+
+#### Body Text
+
+| Type                 | Size | Line Height | Letter Spacing | Weight  | Color              |
+| -------------------- | ---- | ----------- | -------------- | ------- | ------------------ |
+| **Lead**             | 20pt | 22pt        | -5%            | Regular | #1A1A1A or #4A4A4A |
+| **Semi-Lead**        | 15pt | 24pt        | -5%            | Regular | #4A4A4A            |
+| **Large Body**       | 12pt | 15pt        | -5%            | Regular | #4A4A4A            |
+| **Body**             | 10pt | 13pt        | -5%            | Regular | #4A4A4A            |
+| **Descriptive Text** | 8pt  | 14pt        | +4%            | Regular | #4A4A4A or #6A6A6A |
+
+#### Labels & Meta Information
+
+| Type            | Size | Line Height | Letter Spacing | Weight  | Color   |
+| --------------- | ---- | ----------- | -------------- | ------- | ------- |
+| **Large Label** | 8pt  | 16pt        | +8%            | Regular | #6A6A6A |
+| **Small Label** | 5pt  | 12pt        | +14%           | Regular | #6A6A6A |
+
+---
+
+## 5. UI Elements
+
+### 5.1 Buttons
+
+**CRITICAL RULE - Button Corners:**
+
+- Buttons should **ALWAYS** have fully rounded corners
+- Border-radius should be 50% of button height or 9999px
+- This creates pill-form (capsule form)
+- NEVER square or slightly rounded corners
+
+**Button Styles:**
+
+| Element            | Specification                  |
+| ------------------ | ------------------------------ |
+| **Background**     | #FFBE26 (Sunflower)            |
+| **Text**           | Work Sans Regular, 15pt        |
+| **Text Color**     | #1A1A1A (Text Primary)         |
+| **Padding**        | 12px vertical, 32px horizontal |
+| **Border-radius**  | 9999px (fully rounded)         |
+| **Letter-spacing** | -5%                            |
+
+**IMPORTANT - Button Size:**
+
+- Buttons should be compact and slim
+- Vertical padding: 12px (not 16px)
+- Horizontal padding: 32px (not 40px)
+- This creates a more refined, elegant button appearance
+
+**Button Hover States:**
+
+| Button Type        | Default Background | Hover Background | Notes                    |
+| ------------------ | ------------------ | ---------------- | ------------------------ |
+| **Primary**        | #FFBE26            | #FFD966          | Brighter yellow on hover |
+| **Secondary/Gray** | #E5E5E5            | #FFFFFF          | Bright white on hover    |
+
+**Examples:**
+
+```
+Primary button: Yellow background (#FFBE26), hover: brighter yellow (#FFD966)
+Gray button: Gray background (#E5E5E5), hover: white (#FFFFFF)
+```
+
+---
+
+### 5.2 Badges
+
+**CRITICAL RULE - Badges on Light Gray Surfaces:**
+
+When using **Lemon Meringue (#FFF8A2)**, **Vanilla (#FFFCD0)**, or **Eggshell (#FFFDE8)** as badge background color placed on a light gray surface:
+
+- **Always add a 1px border** in dark gray (#6A6A6A or #4A4A4A) to the outer shape
+- This ensures the badge is clearly visible and defined against the background
+
+**Badge Specifications:**
+
+| Element       | Specification                                  |
+| ------------- | ---------------------------------------------- |
+| Background    | Lemon Meringue, Vanilla, or Eggshell           |
+| Border        | 1px solid #6A6A6A (when on light gray surface) |
+| Text          | Work Sans Regular, -5% tracking                |
+| Text Color    | #1A1A1A or #4A4A4A                             |
+| Border-radius | 4px or fully rounded depending on context      |
+
+---
+
+### 5.3 Breadcrumbs
+
+**Breadcrumb Specifications:**
+
+| Element            | Specification                                    |
+| ------------------ | ------------------------------------------------ |
+| **Font**           | Work Sans Regular only (NO Bold or other styles) |
+| **Letter Spacing** | -5%                                              |
+| **Inactive Pages** | Lighter gray (#6A6A6A or #9A9A9A)                |
+| **Current Page**   | Full black (#1A1A1A)                             |
+| **Separator**      | Gray, subtle                                     |
+
+**Example:**
+
+```
+Home / Products / Category / Current Page
+(gray)  (gray)    (gray)     (black)
+```
+
+---
+
+### 5.4 Cards
+
+**CRITICAL RULE - Card Spacing:**
+
+- Space between headline and body text below: **100% of the body text's line height**
+- This creates breathing room and visual clarity
+
+**Card Specifications:**
+
+| Element                  | Specification                   |
+| ------------------------ | ------------------------------- |
+| **Background**           | #F9F9F9 (light gray)            |
+| **Headline**             | Work Sans Regular, -5% tracking |
+| **Body Text**            | Work Sans Regular, -5% tracking |
+| **Headline-to-Body Gap** | 100% of body text line height   |
+| **Padding**              | Generous, consistent            |
+| **Border-radius**        | 8px–16px                        |
+
+---
+
+### 5.5 Date Picker
+
+**Date Picker Specifications:**
+
+| Element           | Specification                                   |
+| ----------------- | ----------------------------------------------- |
+| **Selected Date** | Solid fill of Lemon Meringue (#FFF8A2)          |
+| **"Today" Label** | Sunflower (#FFBE26)                             |
+| **Calendar Text** | Work Sans Regular, -5% tracking, grayscale only |
+
+**IMPORTANT:**
+
+- Selected date should have a **solid fill** (NOT an outline)
+- Use Lemon Meringue (#FFF8A2) for the selected date background
+- The word "Today" remains in Sunflower (#FFBE26)
+
+---
+
+### 5.6 Links
+
+**CRITICAL RULE - Link Typography:**
+
+- **NEVER** use any weight other than Regular for Work Sans
+- **Always** use -5% letter spacing
+
+**Link Specifications:**
+
+| Element            | Specification              |
+| ------------------ | -------------------------- |
+| **Font**           | Work Sans Regular          |
+| **Letter Spacing** | -5%                        |
+| **Color**          | #1A1A1A or #4A4A4A         |
+| **Hover**          | Underline or subtle change |
+
+---
+
+### 5.7 Progress Indicator Bars
+
+**Progress Bar Specifications:**
+
+| Element        | Specification                         |
+| -------------- | ------------------------------------- |
+| **Height**     | Slim (4px–6px recommended)            |
+| **Background** | Light gray (#E5E5E5)                  |
+| **Fill**       | Sunflower (#FFBE26)                   |
+| **Corners**    | Fully rounded (border-radius: 9999px) |
+
+**IMPORTANT:** Keep progress bars quite slim — thinner than typical defaults.
+
+---
+
+### 5.8 Tables
+
+**CRITICAL RULES for Tables:**
+
+1. **Row separators:** Use very light gray underline (#E5E5E5) on baseline only
+2. **Header row:** Use full black underline (#1A1A1A)
+3. **Cell backgrounds:** NEVER use differing background colors for individual cells
+4. **Typography:** Work Sans Regular, -5% tracking, grayscale text only
+
+**Table Specifications:**
+
+| Element              | Specification                              |
+| -------------------- | ------------------------------------------ |
+| **Header underline** | 1px solid #1A1A1A (full black)             |
+| **Row underline**    | 1px solid #E5E5E5 (very light gray)        |
+| **Cell background**  | None (transparent, inherit from container) |
+| **Text**             | Work Sans Regular, -5% tracking            |
+| **Header text**      | #1A1A1A                                    |
+| **Body text**        | #4A4A4A                                    |
+
+---
+
+## 6. Layout Principles
+
+### 6.1 Basic Layout Philosophy
+
+**Engrate = Clarity built on precision**
+
+### 6.2 Text Alignment
+
+**RULE:** Always left-aligned text
+
+- Prioritize left alignment in all typography
+- Creates clarity and readability
+
+### 6.3 Text Width
+
+**CRITICAL RULE - Maximum Line Length:**
+
+- **Body text and paragraphs must never exceed 65 characters** (including spaces)
+- This ensures optimal readability and reduces eye strain
+- Approximate max-width values:
+  - 15px body text: ~500px
+  - 18px lead text: ~550px
+  - 20px lead text: ~580px
+- Use CSS `max-width` or `ch` units (e.g., `max-width: 65ch`)
+
+### 6.4 Slide & Presentation Layout
+
+**CRITICAL RULE - Content Width in Slides:**
+
+- Content (text, tables, charts, diagrams) should **never span the full width** of the slide
+- Keep content blocks relatively **square in proportion** — avoid ultra-wide, thin layouts
+- This creates visual balance and breathing room
+- **Exception:** Photographs may span full width when used as backgrounds or hero images
+
+**Examples:**
+
+```
+Good: Table that is 60-70% of slide width, centered or left-aligned
+Bad: Table stretching edge-to-edge across the entire slide
+
+Good: Text block with comfortable margins on both sides
+Bad: Text spanning from left edge to right edge
+```
+
+### 6.5 Hierarchies
+
+**CRITICAL SIZE RULE:**
+
+- Really large headings (≥60pt) should be in **Libre Baskerville**
+- All other headings should be in **Work Sans Regular**
+- Heading should be **at least twice as large** as body text
+- Clear, unambiguous hierarchies
+- Use labels for meta information
+
+### 6.6 Margins and Grid System
+
+**Basic Principle: Even margins**
+
+- Equal margins to **top** and **left side**
+- Creates natural squares in the layout
+
+### 6.7 Grid Spacing
+
+**CRITICAL RULE - Grid Item Spacing:**
+
+- Space between grid items should be **50% less** than typical defaults
+- Creates tighter, more cohesive layouts
+- Reduces excessive whitespace between cards, thumbnails, and grid elements
+
+**Examples:**
+
+```
+If default gap is 32px → use 16px
+If default gap is 24px → use 12px
+If default gap is 16px → use 8px
+```
+
+### 6.8 Heading Layout
+
+**Two approved positions:**
+
+1. **Vertical centering:** Heading centered vertically
+2. **Top alignment:** Heading aligned to top (with correct margin)
+
+### 6.9 Body Text Positioning
+
+**Allowed variation:**
+
+- Body text can have large gap from heading
+- Creates breathing room and visual balance
+
+### 6.10 Meta Text Positioning
+
+**Placement:**
+
+- Near bottom
+- At the sides
+- Functions as anchor points
+
+### 6.11 Corner Alignment
+
+**Principle:**
+
+- Prioritize alignment to different corners
+- Creates structure and order in layout
+
+---
+
+## 7. Backgrounds & Color Fields
+
+### 7.1 Background Colors
+
+**CRITICAL RULE:**
+
+- **NEVER** use pure white background (#FFFFFF)
+- **ALWAYS** use very light gray or light yellow shades
+
+**Recommended Backgrounds:**
+
+| Usage                      | HEX     | Description                                 |
+| -------------------------- | ------- | ------------------------------------------- |
+| **Main Background**        | #FAFAFA | Primary page background (light gray)        |
+| **Alternative Background** | #F5F5F5 | Sections, alternative surfaces (light gray) |
+| **Cards/Modules**          | #F9F9F9 | Cards, containers (light gray)              |
+| **Contrast Background**    | #EFEFEF | When extra contrast is needed (light gray)  |
+
+**Advantages of Light Gray:**
+
+- Creates warmth and softness
+- Reduces eye strain
+- Provides better contrast for color accents
+- Feels more premium than pure white
+
+### 7.2 Color Fields for Separation
+
+**CRITICAL RULE - Background Fields:**
+
+- Use **light gray** (#FAFAFA, #F5F5F5, #F9F9F9, #EFEFEF) OR **light yellow** (#FFFCD0, #FFFDE8) shades
+- These colors are used to create subtle separations between sections
+- Choose color based on desired feeling:
+  - **Light gray**: Neutrality, professionalism, standard
+  - **Light yellow**: Energy, optimism, highlighting
+
+**Recommended Color Fields:**
+
+| Color                | HEX             | Usage                                  |
+| -------------------- | --------------- | -------------------------------------- |
+| **Vanilla**          | #FFFCD0         | Highlighting sections, accents         |
+| **Eggshell**         | #FFFDE8         | Subtle color fields, soft highlighting |
+| **Light Gray Field** | #FAFAFA-#F5F5F5 | Neutral separation                     |
+
+---
+
+## 8. Design Principles - Summary
+
+### 8.1 Color Usage
+
+1. **Sunflower (#FFBE26) is always the starting point**
+   - The most powerful color
+   - Used when only one color can be chosen
+   - **NEVER for text**
+
+2. **Follow the 10/90 rule STRICTLY**
+   - 10% color
+   - 90% grayscale
+   - Deviations weaken the identity
+
+3. **NEVER pure white backgrounds**
+   - Always use light gray (#FAFAFA, #F5F5F5, #F9F9F9)
+   - Or light yellow (#FFFCD0, #FFFDE8) for color fields
+   - Creates warmth and premium feel
+
+4. **All text in grayscale only**
+   - **NEVER colored text** (no yellow, no blue, no purple)
+   - Prioritize black (#1A1A1A) for most text
+   - Gray (#4A4A4A, #6A6A6A) only for hierarchy
+   - Avoid white text unless on dark images
+
+5. **Complementary colors (purple/blue) may NEVER dominate**
+   - Secondary role only
+   - Less presence than yellow spectrum
+   - Never for text
+
+6. **Secondary yellow colors used as individual colors**
+   - NOT as tints
+   - NOT as fades
+   - Each color has its own character
+
+### 8.2 Typography
+
+1. **Universal -5% letter spacing for all text above 10pt**
+   - Headings, body, links, buttons, breadcrumbs — everything
+   - No exceptions
+
+2. **Libre Baskerville ONLY for really large headings (≥60pt)**
+   - Hero headings, landing pages
+   - Line height: 110%
+   - Letter spacing: -5%
+   - NEVER for body text or smaller headings
+
+3. **Work Sans Regular for everything else**
+   - All headings under 60pt
+   - All body text
+   - All labels, links, buttons, breadcrumbs
+   - **NO other weights allowed** — no Bold, no Medium, no Light
+
+4. **Text color rules:**
+   - NEVER colored text
+   - Prioritize black (#1A1A1A)
+   - Gray for hierarchy only
+   - Avoid white text
+
+5. **Follow EXACT specifications**
+   - Size according to table
+   - Line height according to table
+   - Letter spacing: -5% for text >10pt
+   - No improvisation
+
+### 8.3 UI Elements
+
+1. **Buttons have ALWAYS fully rounded corners**
+   - Border-radius: 9999px (pill-form)
+   - NEVER square or slightly rounded
+   - Yellow button hover: brighter yellow (#FFD966)
+   - Gray button hover: white (#FFFFFF)
+
+2. **Badges on light gray need 1px dark gray border**
+   - When using Lemon Meringue, Vanilla, or Eggshell on light gray surfaces
+
+3. **Progress bars should be slim**
+   - 4px–6px height
+
+4. **Tables use baseline underlines only**
+   - Header: black underline
+   - Rows: light gray underline
+   - No colored cell backgrounds
+
+5. **Links always Work Sans Regular, -5% tracking**
+
+### 8.4 Layout
+
+1. **Left alignment is standard**
+   - Clarity and precision
+
+2. **Heading at least 2x larger than body text**
+   - Clear hierarchy
+
+3. **Body text max 65 characters wide**
+   - Use `max-width: 65ch` or equivalent pixel value
+   - Ensures optimal readability
+
+4. **Slide content: never full width**
+   - Tables, charts, text blocks should be ~60-70% of slide width
+   - Keep content relatively square in proportion
+   - Exception: photographs may span full width
+
+5. **Even margins top/left**
+   - Creates natural squares
+
+6. **Corner alignment prioritized**
+   - Structure and order
+
+7. **Grid spacing: 50% tighter than default**
+   - Reduces whitespace between grid items
+
+8. **Card headline-to-body gap: 100% of body line height**
+
+### 8.5 Logo
+
+1. **Always use primary logo as standard**
+2. **Preserve combination of Granjon wordmark and diamond symbol**
+3. **Respect clear space around logo**
+
+### 8.6 Overall Balance
+
+**Core Principles:**
+
+- Let grayscale dominate to give colors maximum effect
+- Use light gray or light yellow backgrounds, never pure white
+- Combine old (Granjon, Libre Baskerville, tradition) with new (diamonds, AI, future)
+- Technical precision with human warmth
+- Clarity built on precision
+- Rounded buttons for softer feel
+- All text in grayscale — never colored
+
+---
+
+## 9. Checklist for Each Design
+
+**Before publishing, check:**
+
+- [ ] Am I following the 10/90 rule for color vs grayscale?
+- [ ] Is Sunflower (#FFBE26) the dominant color if color is used?
+- [ ] Is all text grayscale only (no colored text)?
+- [ ] Am I using -5% letter spacing for all text above 10pt?
+- [ ] Am I using Libre Baskerville ONLY for really large headings (≥60pt)?
+- [ ] Am I using Work Sans Regular (NO Bold, NO Medium) for everything else?
+- [ ] Is the heading at least twice as large as body text?
+- [ ] Is the text left-aligned?
+- [ ] Are body text paragraphs max 65 characters wide?
+- [ ] In slides: is content (tables, charts, text) limited to ~60-70% width (not full width)?
+- [ ] Do I have even margins top/left?
+- [ ] Am I using light gray or light yellow backgrounds instead of white?
+- [ ] Do all buttons have fully rounded corners (border-radius: 9999px)?
+- [ ] Do yellow buttons hover to brighter yellow, gray buttons to white?
+- [ ] Do badges on light gray have 1px dark gray borders?
+- [ ] Are progress bars slim (4-6px)?
+- [ ] Do tables use baseline underlines only (no colored cell backgrounds)?
+- [ ] Are breadcrumbs in Regular with inactive pages in lighter gray?
+- [ ] Is grid spacing 50% tighter than default?
+- [ ] Do cards have 100% line-height gap between headline and body?
+- [ ] Is the layout built on precision and clarity?
+
+---
+
+## 10. Quick Reference
+
+### Typefaces
+
+| Element            | Typeface          | Weight  | Letter Spacing | When?  |
+| ------------------ | ----------------- | ------- | -------------- | ------ |
+| Hero headings      | Libre Baskerville | Regular | -5%            | ≥60pt  |
+| All other headings | Work Sans         | Regular | -5%            | <60pt  |
+| Body text          | Work Sans         | Regular | -5%            | >10pt  |
+| Small labels       | Work Sans         | Regular | +4% to +14%    | ≤10pt  |
+| Links              | Work Sans         | Regular | -5%            | Always |
+| Buttons            | Work Sans         | Regular | -5%            | Always |
+| Breadcrumbs        | Work Sans         | Regular | -5%            | Always |
+
+### Colors
+
+| Usage                  | HEX     | Description                |
+| ---------------------- | ------- | -------------------------- |
+| Primary color          | #FFBE26 | Sunflower (never for text) |
+| Text Primary           | #1A1A1A | Headings, main text        |
+| Text Secondary         | #4A4A4A | Body text                  |
+| Text Tertiary          | #6A6A6A | Labels, meta               |
+| Text Quaternary        | #6C6C6C | Muted text                 |
+| Text Quinary           | #EDEDED | Very muted text            |
+| Main Background        | #FAFAFA | Light gray page background |
+| Alternative Background | #F5F5F5 | Light gray sections        |
+| Card Background        | #F9F9F9 | Light gray cards           |
+| Color Field Vanilla    | #FFFCD0 | Light yellow accent        |
+| Color Field Eggshell   | #FFFDE8 | Light yellow soft          |
+
+### UI Quick Reference
+
+| Element               | Key Specification                          |
+| --------------------- | ------------------------------------------ |
+| Button border-radius  | 9999px                                     |
+| Button padding        | 12px vertical, 32px horizontal (compact)   |
+| Button hover (yellow) | #FFD966 (brighter yellow)                  |
+| Button hover (gray)   | #FFFFFF (white)                            |
+| Badge border          | 1px solid #6A6A6A (on light gray surfaces) |
+| Progress bar height   | 4px–6px (slim)                             |
+| Table header line     | 1px solid #1A1A1A                          |
+| Table row line        | 1px solid #E5E5E5                          |
+| Grid gap              | 50% of default                             |
+| Card headline gap     | 100% of body text line height              |
+| Date picker selected  | Solid fill #FFF8A2                         |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@engrate/components",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "description": "Engrate Component Library",
   "type": "module",
   "main": "./dist/index.cjs.js",
@@ -19,11 +19,12 @@
       "require": "./dist/index.cjs.js"
     },
     "./styles.css": "./dist/styles.css",
-    "./fonts/*": "./dist/fonts/*"
+    "./fonts/*": "./dist/fonts/*",
+    "./skills/engrate-designer.md": "./dist/skills/engrate-designer.md"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "build": "tsc -p tsconfig.app.json && vite build",
+    "build": "tsc -p tsconfig.app.json && vite build && mkdir -p dist/skills && cp .github/skills/engrate-designer/SKILL.md dist/skills/engrate-designer.md",
     "test": "vitest run",
     "test:watch": "vitest",
     "test:coverage": "vitest run --coverage",