# Glass — Construction Instructions & AI Prompting Guide
> Version 1.0 · Complete decision framework for building with the Glass system

---

## Table of Contents

1. [Design Philosophy & Core Rules](#1-design-philosophy--core-rules)
2. [The Two-Font Law](#2-the-two-font-law)
3. [Color Application Rules](#3-color-application-rules)
4. [Border Radius Decision Framework](#4-border-radius-decision-framework)
5. [Background & Surface Rules](#5-background--surface-rules)
6. [Shadow & Elevation Rules](#6-shadow--elevation-rules)
7. [The Teal Accent — When and How](#7-the-teal-accent--when-and-how)
8. [Typography Application Rules](#8-typography-application-rules)
9. [Spacing Construction Rules](#9-spacing-construction-rules)
10. [Component Construction Guides](#10-component-construction-guides)
11. [Interactive States — Full Decision Guide](#11-interactive-states--full-decision-guide)
12. [Layout Construction Rules](#12-layout-construction-rules)
13. [Animation Rules](#13-animation-rules)
14. [What Never to Do — Anti-Pattern List](#14-what-never-to-do--anti-pattern-list)
15. [AI Prompting Instructions](#15-ai-prompting-instructions)
16. [New Project Checklist](#16-new-project-checklist)
17. [Component Pattern Library](#17-component-pattern-library)
18. [Responsive Construction Rules](#18-responsive-construction-rules)
19. [Accessibility Guidelines](#19-accessibility-guidelines)
20. [Common Scenarios — Decision Trees](#20-common-scenarios--decision-trees)

---

## 1. Design Philosophy & Core Rules

### The Fundamental Premise

Glass is built on one idea: **nothing is opaque, and the background is always visible through every layer.** Every card, button, input, and modal is a pane of frosted glass floating over a soft blue-to-mint gradient sky. The product should feel weightless, premium, and calm — this is the aesthetic of a beautifully designed weather app or a modern fintech onboarding flow, not a dense dashboard.

This is not "add `backdrop-filter: blur()` to a white card and call it done." Every surface has a carefully tuned opacity value, every shadow is tinted toward the page's blue undertone, and every interactive element gets *more* opaque — never a color change — when focused or hovered. The blur is structural, not decorative.

---

### The 10 Commandments of This System

**1. Nothing is a flat opaque color.**
Every surface — card, button, input, badge, dropdown, modal, toast — is `rgba(255,255,255, alpha)` combined with `backdrop-filter: blur()`. If you catch yourself writing `background: #ffffff` for a surface, stop — it should be `rgba(255,255,255,0.55)` at minimum.

**2. The gradient page background is mandatory, not optional.**
`linear-gradient(135deg, #dbeafe 0%, #e0f2fe 45%, #f0fdfa 100%)` is the only acceptable page background. Glass surfaces are meaningless without something colorful and soft behind them to blur.

**3. Radius is large and consumer-friendly, buttons are always pills.**
`20px` for cards, `9999px` (full pill) for every button, badge, and input-adjacent control. The one deliberate exception is the checkbox, which uses `8px` for a soft-square shape.

**4. Teal is the single functional accent.**
`#0d9488` (with gradient partner `#0ea5b0`) marks every interactive/primary element: buttons, focus rings, section-title dots, active dropdown items. No second accent hue is introduced except the sky-blue (`#38bdf8`) reserved strictly for "info" semantic state.

**5. Shadows are blue-tinted, never pure black.**
`rgba(31, 74, 121, alpha)` is the only ambient shadow color in the entire system. A pure `rgba(0,0,0,...)` shadow anywhere in Glass is a mistake — it will look muddy against the cool gradient.

**6. Elevation increases blur strength, not just shadow depth.**
Cards: `blur(18px)`. Inputs: `blur(10px)`. Dropdown/modal panels: `blur(20px)` — the strongest blur in the system, because they sit visually closest to the user.

**7. Interactive surfaces get more opaque, never a new color, on focus.**
An input's background goes from `rgba(255,255,255,0.55)` to `rgba(255,255,255,0.75)` on focus. This "clarifying" effect — the glass becoming clearer as you interact — is the system's signature interaction language.

**8. Every section title carries a small teal dot.**
`.section-title::before { content:''; width:8px; height:8px; border-radius:50%; background:#0d9488; }` — this repeating micro-mark is Glass's most frequent brand touchpoint and must appear on every section header.

**9. Primary buttons lift on hover.**
`transform: translateY(-1px)` combined with a strengthening teal glow shadow is the *only* translate-based hover effect in the system — reserved exclusively for primary buttons, reinforcing the "floating" metaphor.

**10. Two fonts, cleanly divided: Poppins for hierarchy, Inter for function.**
Poppins never appears below 15px. Inter never carries a page-level heading. There is no third font.

---

## 2. The Two-Font Law

### Category 1: Display — Poppins
**Assignment question: Does this establish hierarchy — a heading, section heading, or subheading?**

If yes → Poppins, weight 600–700.

- Page hero title (h1): YES → Poppins 700
- Section heading (h2, 24px): YES → Poppins 600
- Subheading (17px): YES → Poppins 500
- Card title: YES → Poppins 600
- Modal title: YES → Poppins 600
- Button text: NO → Inter
- Body copy: NO → Inter

### Category 2: UI / Body — Inter
**Assignment question: Is this a functional UI string — button, input, label, badge, table cell, caption?**

If yes → Inter. This is nearly everything below 15px.

- Button label: YES → Inter 600
- Input text / placeholder: YES → Inter 400
- Field label: YES → Inter 600 (small caps-style, teal)
- Section title: YES → Inter/Poppins 600 (this is the one shared context — section titles use whichever font is imported for headings in the given implementation; the reference build uses Poppins)
- Body paragraph: YES → Inter 400
- Badge text: YES → Inter 600
- Table header / cell: YES → Inter

### Font Decision Flowchart

```
Does this text establish page/section hierarchy (heading, subheading)? ──YES──► Poppins, 600–700
        │ NO
        ▼
Default to Inter
```

---

## 3. Color Application Rules

### 3.1 Surface Opacity Rules

| Surface | Opacity | Blur | Why |
|---------|---------|------|-----|
| Card | `rgba(255,255,255,0.55)` | 18px | Base surface layer |
| Input (default) | `rgba(255,255,255,0.55)` | 10px | Matches card baseline |
| Input (focus) | `rgba(255,255,255,0.75)` | 10px | "Clarifies" on interaction |
| Dashed button | `rgba(255,255,255,0.35)` | none | Lowest emphasis — most transparent |
| Secondary button | `rgba(255,255,255,0.5)` | 10px | Mid emphasis |
| Dropdown / modal panel | `rgba(255,255,255,0.75)` | 20px | Highest layer — most opaque + most blurred |

**Rule:** opacity and blur strength both *increase* as elements rise in the visual stack (button → card → dropdown/modal). Never make a higher-elevation element more transparent than a lower one.

---

### 3.2 Teal Accent Usage Rules

Use teal (`#0d9488`) in exactly these contexts:

1. **Primary button** — gradient fill `linear-gradient(135deg,#0d9488,#0ea5b0)`
2. **Input focus border + ring** — `border-color:#0d9488` + `box-shadow:0 0 0 4px rgba(13,148,136,0.15)`
3. **Section-title dot** — the 8px circle before every section header
4. **Outline button** — border + text color
5. **Dropdown item hover/selected** — `rgba(13,148,136,0.14)` background + `#0f766e` text
6. **Table header text and row hover tint**

**Never:**
- Teal as a full card or page background
- A second saturated accent hue alongside teal (sky-blue is reserved for info badges only)
- Teal glow effects outside of primary-button and input-focus contexts

---

### 3.3 Text Color Assignment

| Priority | Color | Examples |
|----------|-------|----------|
| Highest | `#0f2942` | Headings, display text |
| High | `#1e293b` | Body copy |
| Medium | `#3b5670` | Header subtitle, captions |
| Low | `#5b7690` | Secondary text, placeholders |
| Accent-text | `#0f766e` | Labels, section titles, links |
| Disabled | `#a0b0be` | Greyed-out states |

**Rule:** never use pure black for text. The darkest text color in the system is `#0f2942` — a deep navy, not `#000000` — keeping the entire palette in harmony with the cool gradient background.

---

## 4. Border Radius Decision Framework

The rule is simple: **if it's a button, badge, or pill-shaped control, it's `9999px`. If it's a surface, it's `20px`. If it's an input, it's `14px`.**

### Is this a button (any variant) or badge?
→ `border-radius: 9999px` — always fully rounded.

### Is this a card, modal, or toast?
→ `border-radius: 20px`.

### Is this a text input, textarea, or select trigger?
→ `border-radius: 14px`.

### Is this a dropdown panel?
→ `border-radius: 16px`, with inner items at `10px`.

### Is this a checkbox?
→ `border-radius: 8px` — the **only** non-pill, non-20px exception in the system.

### Quick Reference Table

| Element | Radius |
|---------|--------|
| Card / surface / modal / toast | 20px |
| Dropdown / modal shell | 16px |
| Input / textarea / select | 14px |
| Dropdown item | 10px |
| Skeleton block | 10px |
| Button (all variants) | 9999px |
| Badge | 9999px |
| Radio / switch track | 9999px |
| Checkbox | 8px |

---

## 5. Background & Surface Rules

### 5.1 The Only Background

```css
body, .theme-panel {
  background: linear-gradient(135deg, #dbeafe 0%, #e0f2fe 45%, #f0fdfa 100%);
}
```

There is no second "page background" variant. Every screen in this system uses this exact gradient — consistency here is what allows the blur values across cards to look intentional rather than arbitrary.

### 5.2 Card-on-Gradient Contrast Rule

Because the background is light and the cards are translucent white, contrast comes from the **border** (`1px solid rgba(255,255,255,0.7)`) catching the light at the card's edge, not from a color difference. Never remove this border — without it, cards visually disappear into the gradient.

### 5.3 No Dark Mode Variant

Glass is a light-only system. Do not attempt to invert it to a dark background — the entire elevation and blur logic depends on a light, colorful backdrop showing through.

---

## 6. Shadow & Elevation Rules

### 6.1 The Blue-Tint Rule

```css
rgba(31, 74, 121, [opacity])
```

Every non-colored ambient shadow in Glass uses this exact blue-grey RGB triplet at varying opacity. Never substitute `rgba(0,0,0,...)`.

### 6.2 Elevation and Shadow Pairing

| What You're Building | Shadow |
|---------------------|--------|
| Card | `0 8px 32px rgba(31,74,121,0.12)` |
| Dropdown / modal | `0 16px 40px rgba(31,74,121,0.18)` |
| Primary button | `0 8px 20px rgba(13,148,136,0.35)` (teal-tinted — the one exception) |
| Destructive button | `0 8px 20px rgba(220,38,38,0.3)` (red-tinted — the other exception) |

**Rule:** only buttons get colored shadows matching their own fill color. All structural surfaces (cards, dropdowns, modals) use the neutral blue-grey tint.

---

## 7. The Teal Accent — When and How

### When to Use Teal

| Use It | Don't Use It |
|--------|--------------|
| Primary button gradient | Card/page backgrounds |
| Input focus border + ring | Body text |
| Section-title dot | Table backgrounds |
| Outline button border/text | Disabled states |
| Dropdown item hover/active | Neutral badges |

### How NOT to Use Teal

- Never as a solid full-opacity fill larger than a button or badge
- Never mixed with a second saturated hue (aside from the reserved sky-blue info accent)
- Never applied to more than one accent role per component (e.g., don't give a card both a teal border AND a teal shadow — pick one)

---

## 8. Typography Application Rules

### 8.1 The Section-Title Dot Pattern

```
● Typography                        ← 8px teal dot + Poppins/Inter 600, 11px, uppercase, tracking 0.1em, #0f766e
                                     ← 18px gap before content
[Section content begins]
```

Every single section in a Glass layout begins with this exact pattern. It is the system's most repeated signature and should never be omitted, even in compact/utility cards.

### 8.2 The Header Eyebrow Pattern

```
THEME 09 · FROSTED UI               ← eyebrow, Inter 11px, tracking 0.14em, uppercase, #0d9488
Glass.ui                            ← title, Poppins 700, clamp(28px,4vw,44px), #0f2942, accent period in teal
Poppins + Inter · radius 20px/pill  ← subtitle, Inter 14.5px, #3b5670
```

### 8.3 Weight as Hierarchy

| Hierarchy Level | Font | Weight | Color |
|-----------------|------|--------|-------|
| Display | Poppins | 700 | `#0f2942` |
| Section heading | Poppins | 600 | `#164e63` |
| Subheading | Poppins | 500 | `#0f766e` |
| Body | Inter | 400 | `#1e293b` |
| Label / section title | Inter | 600 | `#0f766e` |
| Secondary / caption | Inter | 400 | `#5b7690` |

---

## 9. Spacing Construction Rules

### 9.1 The Padding Budget for Components

| Component | Padding |
|-----------|---------|
| Badge | 4px vertical, 12px horizontal |
| Input | 11px vertical, 16px horizontal |
| Button | 11px vertical, 24px horizontal |
| Card (standard) | 28px vertical, 32px horizontal |
| Card (header/hero) | 32px vertical, 36px horizontal |
| Modal | 30px all sides |
| Table header cell | 12px vertical, 16px horizontal |
| Table body cell | 12px vertical, 16px horizontal |

### 9.2 Vertical Rhythm in Forms

```
[Field Label — Inter 11.5px, teal]
         ↕ 7px
[Input — 55% white, 14px radius]
         ↕ 14–16px (between field groups)
[Next Field Label]
```

### 9.3 Card Gap Rhythm

Cards in a Glass grid layout are separated by `20–24px` — noticeably more generous than dense systems, because the gradient background needs visible "gaps" between floating panels for the glass effect to read.

---

## 10. Component Construction Guides

### 10.1 How to Build a Card — Step by Step

**Step 1: Container** — `rgba(255,255,255,0.55)` background, `backdrop-filter: blur(18px)`, `1px solid rgba(255,255,255,0.7)` border, `border-radius: 20px`, `box-shadow: 0 8px 32px rgba(31,74,121,0.12)`, `padding: 28px 32px`

**Step 2: Section title** — 8px teal dot + Inter/Poppins 600, 11px, uppercase, `#0f766e`, tracking `0.1em`, margin-bottom `18px`

**Step 3: Content** — body text Inter 400, 13.5–15px, `#1e293b`. Emphasis in `#0d9488` or `#0f2942`.

### 10.2 How to Build a Button — Step by Step

**Step 1: Shape** — always `border-radius: 9999px`, padding `11px 24px`

**Step 2: Pick the variant fill** — primary: teal gradient; secondary: translucent white + blur; outline: transparent + teal border; destructive: `rgba(220,38,38,0.85)`; dashed: `rgba(255,255,255,0.35)` + dashed teal border

**Step 3: Add the matching shadow** — only primary and destructive get colored shadows; secondary/outline/dashed have none

**Step 4: Hover** — primary lifts `1px` and deepens its glow; others simply shift opacity slightly

### 10.3 How to Build an Input — Step by Step

**Step 1: Shell** — `rgba(255,255,255,0.55)` bg, `blur(10px)`, `1px solid rgba(255,255,255,0.8)` border, `border-radius: 14px`, `padding: 11px 16px`

**Step 2: Focus state** — border → `#0d9488`, background → `rgba(255,255,255,0.75)`, add `box-shadow: 0 0 0 4px rgba(13,148,136,0.15)`

**Step 3: Variants** — search adds a left-aligned 14px icon + `padding-left:38px`; textarea adds `resize:vertical`; disabled sets `opacity:0.45`

### 10.4 How to Build a Dropdown/Select — Step by Step

**Step 1: Trigger** — styled identically to `.input`, with a chevron icon right-aligned

**Step 2: Panel** — `rgba(255,255,255,0.75)` bg, `blur(20px)`, `1px solid rgba(255,255,255,0.9)`, `border-radius: 16px`, `box-shadow: 0 16px 40px rgba(31,74,121,0.18)`, inner `padding: 6px`

**Step 3: Items** — `border-radius: 10px`, `padding: 9px 12px`; hover/selected → `rgba(13,148,136,0.14)` bg + `#0f766e` text

**Step 4: Multi-select** — same panel, items get a leading checkbox; date/time pickers reuse the panel shell with calendar-grid or time-list content instead of a flat item list

---

## 11. Interactive States — Full Decision Guide

### 11.1 Button States

**Primary (teal gradient):**
- Default: gradient fill + `--shadow-btn-primary`
- Hover: `--shadow-btn-primary-hover` + `translateY(-1px)`
- Active: `transform: scale(0.98)`
- Loading: spinner icon + reduced opacity (0.7), pointer-events disabled
- Disabled: `opacity: 0.4`

**Secondary (translucent white):**
- Default: `rgba(255,255,255,0.5)` + blur
- Hover: increase opacity slightly, no shadow added

**Outline (teal ghost):**
- Default: transparent + `1.5px` teal border
- Hover: `rgba(13,148,136,0.1)` fill appears

**Destructive (red):**
- Default: `rgba(220,38,38,0.85)` + red-tinted shadow
- Hover: increase opacity to `1`

### 11.2 Input Focus

```css
.input:focus {
  border-color: #0d9488;
  box-shadow: 0 0 0 4px rgba(13,148,136,0.15);
  background: rgba(255,255,255,0.75);
}
```

Three things change simultaneously on focus: border color, background opacity, and the appearance of a soft ring. This triple-signal focus state is more elaborate than most systems in the collection and is intentional — it needs to be unmistakable against a busy gradient background.

### 11.3 Table Row Hover

```css
tr:hover td { background: rgba(13,148,136,0.06); }
```

---

## 12. Layout Construction Rules

### 12.1 Page Layout Model

```css
.page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px 24px 100px;
}
```

### 12.2 Dashboard Grid Pattern

```css
.layout-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.layout-3col { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; }
```

---

## 13. Animation Rules

### 13.1 What Can Animate

| Element | Property | Duration | Easing |
|---------|----------|----------|--------|
| Button hover | `box-shadow`, `transform` | 200ms | ease-out |
| Input focus | `border-color`, `background`, `box-shadow` | 200ms | ease-out |
| Dropdown item hover | `background` | 150ms | ease-out |
| Toast entry | `transform`, `opacity` | 350ms | ease-standard |
| Skeleton shimmer | `background-position` | 1.6s loop | ease-in-out |
| Switch thumb | `transform` | 200ms | ease-out |

### 13.2 What Should Not Animate

- Card background opacity (it's a static value, not a hover target)
- Section-title dot (always static)
- Border-radius (never animated in this system)

---

## 14. What Never to Do — Anti-Pattern List

### Typography Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Use Poppins for body copy or table cells | Poppins is headings/subheadings only |
| Use pure black (`#000000`) for text | Darkest text is `#0f2942` |
| Omit the section-title dot | Every section title needs the 8px teal dot |

### Color Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Use a flat opaque background on any card/button/input | Always `rgba(255,255,255, alpha)` + blur |
| Use a pure black ambient shadow | Use `rgba(31,74,121, alpha)` |
| Introduce a second saturated accent color | Teal + reserved sky-blue info accent only |
| Use a dark page background | Glass is light-only; keep the gradient |

### Border Radius Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Use sharp corners (0px) anywhere | Minimum radius is 8px (checkbox) |
| Make buttons anything but full pills | `border-radius: 9999px` always |

### Structural Anti-Patterns

| ❌ Never | ✅ Instead |
|---------|----------|
| Skip `backdrop-filter` on any "glass" surface | Blur is mandatory, not decorative |
| Reduce opacity on focus/hover | Elements always become *more* opaque when active |
| Add a bounce/spring easing | All motion is ease-out/ease-standard, no overshoot |

---

## 15. AI Prompting Instructions

**System prompt to include:**

> Build this UI using the Glass design system.
>
> Core rules:
> — Page background is always `linear-gradient(135deg,#dbeafe 0%,#e0f2fe 45%,#f0fdfa 100%)`. Never use a flat or dark background.
> — Every surface (card, button, input, dropdown, modal, toast) is translucent: `rgba(255,255,255, alpha)` + `backdrop-filter: blur(...)`. Cards use `0.55` opacity / `18px` blur; dropdowns/modals use `0.75` opacity / `20px` blur.
> — Border-radius: cards/modals `20px`, inputs `14px`, dropdown panels `16px`, buttons/badges `9999px` (full pill), checkboxes `8px`.
> — Primary accent: `#0d9488` teal, gradient partner `#0ea5b0`. Use for primary buttons, input focus, section-title dots, outline buttons.
> — Shadows are blue-tinted `rgba(31,74,121, alpha)`, never pure black. Only primary/destructive buttons get colored (teal/red) shadows.
> — Fonts: Poppins for headings/subheadings (weight 600–700), Inter for everything else.
> — Every section title has an 8px solid teal dot before it.
> — Interactive elements become *more opaque* (never a new color) on focus/hover. Primary buttons additionally lift `1px` on hover.
> — Text colors: `#0f2942` (headings) → `#1e293b` (body) → `#5b7690` (secondary) — never pure black.

---

## 16. New Project Checklist

**Fonts:**
- [ ] Poppins imported (weights 600, 700)
- [ ] Inter imported (weights 400, 500, 600)
- [ ] `font-family: 'Inter', sans-serif` set on body

**Colors:**
- [ ] Gradient background applied to page/body
- [ ] `--color-teal-400: #0d9488` set as primary accent
- [ ] All shadows use `rgba(31,74,121, alpha)`, not black

**Radius:**
- [ ] Cards/modals at `20px`
- [ ] Inputs at `14px`
- [ ] Buttons/badges at `9999px`
- [ ] Checkboxes at `8px` (only non-pill exception)

**Structure:**
- [ ] Every card uses `backdrop-filter: blur()`
- [ ] Every section title has the teal dot
- [ ] Focus states increase opacity, not just change border color

---

## 17. Component Pattern Library

### Pattern: Frosted Stat Card

```html
<div class="glass-card" style="padding:24px;">
  <div class="section-title">Usage</div>
  <div style="font-family:'Poppins';font-size:32px;font-weight:700;color:#0f2942;">84%</div>
  <div style="font-size:13px;color:#5b7690;margin-top:4px;">of monthly quota</div>
</div>
```

### Pattern: Page Header

```html
<div class="glass-card" style="padding:32px 36px;margin-bottom:32px;">
  <div style="font-size:11px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;color:#0d9488;margin-bottom:10px;">Theme 09 · Frosted UI</div>
  <h1 style="font-size:clamp(28px,4vw,44px);font-weight:700;margin:0;color:#0f2942;">Glass<span style="color:#0d9488;">.</span>ui</h1>
</div>
```

### Pattern: Status Badge Row

```html
<span class="badge badge-success">● Active</span>
<span class="badge badge-warning">● Pending</span>
<span class="badge badge-error">● Failed</span>
```

---

## 18. Responsive Construction Rules

**Below 480px:**
- Modal padding reduces from 30px to 20px
- Multi-column grids collapse to single column
- Card padding reduces from 28–32px to 20px

**480px–1023px:**
- Two-column layouts remain where space allows
- Card padding at 24px

**1024px+:**
- Full system at designed specifications

---

## 19. Accessibility Guidelines

### 19.1 Color Contrast Requirements

| Pairing | Notes |
|---------|-------|
| `#0f2942` on light gradient | High contrast, AAA-safe on the lightest gradient stop |
| `#5b7690` on `rgba(255,255,255,0.55)` | Verify effective contrast against the actual gradient stop behind it — test at all three gradient positions |
| `#0d9488` on white glass | AA-safe for large text, verify for small text |

**Rules:**
- Because backgrounds are translucent and gradient-dependent, always test text contrast against the *lightest* point of the gradient a component may sit over, not just a flat white swatch.
- Increase `--glass-fill-base` opacity toward `0.7`+ for any text-heavy surface if contrast testing fails.

### 19.2 Focus Management

- All interactive elements need `outline: 2px solid #0d9488; outline-offset: 2px;` for `:focus-visible`
- Do not rely on the opacity-shift alone for focus visibility — it is a nice-to-have layered on top of the teal border/ring, not a replacement for it

---

## 20. Common Scenarios — Decision Trees

### Scenario: "What radius do I use?"

```
Is it a button or badge? ──YES──► 9999px
        │ NO
        ▼
Is it a checkbox? ──YES──► 8px
        │ NO
        ▼
Is it an input/textarea/select? ──YES──► 14px
        │ NO
        ▼
Is it a dropdown/modal panel? ──YES──► 16px
        │ NO
        ▼
Default: 20px (card/surface)
```

### Scenario: "What shadow color do I use?"

```
Is it a primary button? ──YES──► teal-tinted shadow
        │ NO
        ▼
Is it a destructive button? ──YES──► red-tinted shadow
        │ NO
        ▼
Default: blue-grey rgba(31,74,121, alpha)
```

### Scenario: "Should this element get more opaque?"

```
Is the user hovering or focusing it right now? ──YES──► Increase opacity (never change hue)
        │ NO
        ▼
Leave at its default opacity value.
```

---

*End of Instructions — Glass v1.0*
*Design System Document: glass-design-system.md*
*Instructions Document: glass-instructions.md*