elanous 0.2.0 → 0.2.5

package/docs/design/systems/dramatic/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Dramatic
+
+> Category: Bold & Expressive
+> High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.
+
+## 1. Visual Theme & Atmosphere
+
+High-contrast, theatrical design with bold layouts, immersive visuals, and unconventional compositions that command attention.
+
+- **Visual style:** modern, clean, high-contrast
+- **Color stance:** primary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#8B5CF6` — Token from style foundations.
+- **Secondary:** `#F43F5E` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#09090B` — Token from style foundations.
+- **Text:** `#FAFAFA` — Token from style foundations.
+- **Neutral:** `#09090B` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#8B5CF6) for CTA emphasis.
+- Use Surface (#09090B) for large backgrounds and cards.
+- Keep body copy on Text (#FAFAFA) for legibility.
+
+## 3. Typography
+
+- **Scale:** 12/14/16/20/24/32
+- **Families:** primary=Outfit, display=Outfit, mono=JetBrains Mono
+- **Weights:** 400, 900
+- Headings should carry the style personality; body text should optimize scanability and contrast.
+
+## 4. Spacing & Grid
+
+- **Spacing scale:** 4/8/12/16/24/32
+- Keep vertical rhythm consistent across sections and components.
+- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
+
+## 5. Layout & Composition
+
+- Prefer clear content blocks with consistent internal padding.
+- Keep hierarchy obvious: headline → support text → primary action.
+- Use whitespace to separate concerns before adding borders or shadows.
+
+## 6. Components
+
+- Buttons: primary action uses `#8B5CF6`; secondary actions stay neutral.
+- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
+- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
+
+## 7. Motion & Interaction
+
+- Use subtle transitions that emphasize Primary (#8B5CF6) as the interaction signal.
+- Default to short, purposeful transitions (150–250ms) with stable easing.
+- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
+
+## 8. Voice & Brand
+
+- Tone should reflect the visual style: concise, confident, and product-specific.
+- Keep microcopy action-oriented and avoid generic filler language.
+- Preserve the style identity in headlines while keeping UI labels literal and clear.
+
+## 9. Anti-patterns
+
+- Do not introduce off-palette colors when an existing token can solve the problem.
+- Do not flatten hierarchy by using the same type size/weight for all text.
+- Do not add decorative effects that reduce readability or accessibility.
+- Do not mix unrelated visual metaphors in the same interface.

package/docs/design/systems/dramatic/manifest.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "dramatic",
+  "name": "Dramatic",
+  "category": "Bold & Expressive",
+  "description": "Bundled OpenDesign package for Dramatic, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
+  "source": {
+    "type": "bundled",
+    "origin": "OpenDesign curated bundled fixture"
+  },
+  "files": {
+    "design": "DESIGN.md",
+    "tokens": "tokens.css",
+    "designTokens": "design-tokens.json",
+    "tailwind": "tailwind-v4.css",
+    "components": "components.html"
+  },
+  "usage": "USAGE.md",
+  "componentsManifest": "components.manifest.json",
+  "importMode": "normalized",
+  "craft": {
+    "applies": [],
+    "suggested": [
+      "color",
+      "accessibility-baseline"
+    ],
+    "exemptions": []
+  },
+  "preview": {
+    "dir": "preview",
+    "pages": [
+      {
+        "path": "preview/colors.html",
+        "role": "colors",
+        "title": "Colors"
+      },
+      {
+        "path": "preview/typography.html",
+        "role": "typography",
+        "title": "Typography"
+      },
+      {
+        "path": "preview/spacing.html",
+        "role": "spacing",
+        "title": "Spacing"
+      }
+    ]
+  },
+  "sourceFiles": {
+    "evidence": "source/evidence.md",
+    "tokens": "source/tokens.source.json",
+    "report": "source/token-contract.report.json"
+  }
+}

package/docs/design/systems/dramatic/tokens.css

@@ -0,0 +1,63 @@
+/* design-systems/dramatic/tokens.css
+ * Structured token bindings for Dramatic.
+ * dramatic cinematic interface with dark surfaces, strong contrast, and spotlight accent states.
+ */
+
+:root {
+  --bg: #090b12;
+  --surface: #121722;
+  --surface-warm: #1b2233;
+  --fg: #f8fafc;
+  --fg-2: #cbd5e1;
+  --muted: #94a3b8;
+  --meta: #60a5fa;
+  --border: #2a3447;
+  --border-soft: #1d2636;
+  --accent: #60a5fa;
+  --accent-on: #06101d;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #22c55e;
+  --warn: #fbbf24;
+  --danger: #fb7185;
+  --font-display: Inter, system-ui, sans-serif;
+  --font-body: Inter, system-ui, sans-serif;
+  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 16px;
+  --text-lg: 18px;
+  --text-xl: 24px;
+  --text-2xl: 36px;
+  --text-3xl: 54px;
+  --text-4xl: 76px;
+  --leading-body: 1.52;
+  --leading-tight: 1.06;
+  --tracking-display: -0.025em;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --section-y-desktop: 96px;
+  --section-y-tablet: 68px;
+  --section-y-phone: 48px;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-pill: 9999px;
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 24px 72px rgba(0, 0, 0, 0.42);
+  --focus-ring: 0 0 0 4px rgba(96, 165, 250, 0.28);
+  --motion-fast: 150ms;
+  --motion-base: 240ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --container-max: 1180px;
+  --container-gutter-desktop: 36px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

package/docs/design/systems/editorial/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Editorial
+
+> Category: Creative & Artistic
+> Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
+
+## 1. Visual Theme & Atmosphere
+
+Magazine-inspired editorial layout with refined serif typography, structured grids, and elegant reading experiences.
+
+- **Visual style:** modern, editorial
+- **Color stance:** primary, secondary, neutral, success
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#111111` — Token from style foundations.
+- **Secondary:** `#F1F1F1` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#FFFFFF` — Token from style foundations.
+- **Text:** `#111827` — Token from style foundations.
+- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#111111) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** 14/16/18/24/32/40
+- **Families:** primary=Gelasio, display=Gelasio, mono=Ubuntu Mono
+- **Weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
+- Headings should carry the style personality; body text should optimize scanability and contrast.
+
+## 4. Spacing & Grid
+
+- **Spacing scale:** 8pt baseline grid
+- Keep vertical rhythm consistent across sections and components.
+- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
+
+## 5. Layout & Composition
+
+- Prefer clear content blocks with consistent internal padding.
+- Keep hierarchy obvious: headline → support text → primary action.
+- Use whitespace to separate concerns before adding borders or shadows.
+
+## 6. Components
+
+- Buttons: primary action uses `#111111`; secondary actions stay neutral.
+- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
+- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
+
+## 7. Motion & Interaction
+
+- Use subtle transitions that emphasize Primary (#111111) as the interaction signal.
+- Default to short, purposeful transitions (150–250ms) with stable easing.
+- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
+
+## 8. Voice & Brand
+
+- Tone should reflect the visual style: concise, confident, and product-specific.
+- Keep microcopy action-oriented and avoid generic filler language.
+- Preserve the style identity in headlines while keeping UI labels literal and clear.
+
+## 9. Anti-patterns
+
+- Do not introduce off-palette colors when an existing token can solve the problem.
+- Do not flatten hierarchy by using the same type size/weight for all text.
+- Do not add decorative effects that reduce readability or accessibility.
+- Do not mix unrelated visual metaphors in the same interface.

package/docs/design/systems/editorial/manifest.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "editorial",
+  "name": "Editorial",
+  "category": "Creative & Artistic",
+  "description": "Bundled OpenDesign package for Editorial, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
+  "source": {
+    "type": "bundled",
+    "origin": "OpenDesign curated bundled fixture"
+  },
+  "files": {
+    "design": "DESIGN.md",
+    "tokens": "tokens.css",
+    "designTokens": "design-tokens.json",
+    "tailwind": "tailwind-v4.css",
+    "components": "components.html"
+  },
+  "usage": "USAGE.md",
+  "componentsManifest": "components.manifest.json",
+  "importMode": "normalized",
+  "craft": {
+    "applies": [],
+    "suggested": [
+      "color",
+      "accessibility-baseline"
+    ],
+    "exemptions": []
+  },
+  "preview": {
+    "dir": "preview",
+    "pages": [
+      {
+        "path": "preview/colors.html",
+        "role": "colors",
+        "title": "Colors"
+      },
+      {
+        "path": "preview/typography.html",
+        "role": "typography",
+        "title": "Typography"
+      },
+      {
+        "path": "preview/spacing.html",
+        "role": "spacing",
+        "title": "Spacing"
+      }
+    ]
+  },
+  "sourceFiles": {
+    "evidence": "source/evidence.md",
+    "tokens": "source/tokens.source.json",
+    "report": "source/token-contract.report.json"
+  }
+}

package/docs/design/systems/editorial/tokens.css

@@ -0,0 +1,63 @@
+/* design-systems/editorial/tokens.css
+ * Structured token bindings for Editorial.
+ * editorial publishing language with warm paper surfaces, serif display type, and composed story cards.
+ */
+
+:root {
+  --bg: #fbf7f0;
+  --surface: #fffdf8;
+  --surface-warm: #f1e6d6;
+  --fg: #1f1a16;
+  --fg-2: #4b4038;
+  --muted: #7d7168;
+  --meta: #9a5a2f;
+  --border: #ded3c5;
+  --border-soft: #eee5da;
+  --accent: #9a5a2f;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #4f8a4f;
+  --warn: #c9822f;
+  --danger: #b33a3a;
+  --font-display: Georgia, "Times New Roman", serif;
+  --font-body: "Source Serif Pro", Georgia, serif;
+  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 18px;
+  --text-lg: 21px;
+  --text-xl: 30px;
+  --text-2xl: 44px;
+  --text-3xl: 66px;
+  --text-4xl: 92px;
+  --leading-body: 1.65;
+  --leading-tight: 1;
+  --tracking-display: -0.02em;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --section-y-desktop: 112px;
+  --section-y-tablet: 80px;
+  --section-y-phone: 56px;
+  --radius-sm: 4px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-pill: 9999px;
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 20px 50px rgba(31, 26, 22, 0.12);
+  --focus-ring: 0 0 0 4px rgba(154, 90, 47, 0.24);
+  --motion-fast: 180ms;
+  --motion-base: 280ms;
+  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);
+  --container-max: 1120px;
+  --container-gutter-desktop: 36px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

package/docs/design/systems/elegant/DESIGN.md

@@ -0,0 +1,71 @@
+# Design System Inspired by Elegant
+
+> Category: Professional & Corporate
+> Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.
+
+## 1. Visual Theme & Atmosphere
+
+Graceful, refined aesthetic with delicate typography, minimal palettes, and polished layouts that exude sophistication.
+
+- **Visual style:** minimal, clean
+- **Color stance:** primary, secondary, neutral, success, warning, danger
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#3B82F6` — Token from style foundations.
+- **Secondary:** `#8B5CF6` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Surface:** `#FFFFFF` — Token from style foundations.
+- **Text:** `#111827` — Token from style foundations.
+- **Neutral:** `#FFFFFF` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#3B82F6) for CTA emphasis.
+- Use Surface (#FFFFFF) for large backgrounds and cards.
+- Keep body copy on Text (#111827) for legibility.
+
+## 3. Typography
+
+- **Scale:** 14/16/18/24/32/40
+- **Families:** primary=Google Sans, display=Google Sans, mono=Anonymous Pro
+- **Weights:** 100, 200, 300, 400, 500, 600
+- Headings should carry the style personality; body text should optimize scanability and contrast.
+
+## 4. Spacing & Grid
+
+- **Spacing scale:** 4/8/12/16/24/32
+- Keep vertical rhythm consistent across sections and components.
+- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
+
+## 5. Layout & Composition
+
+- Prefer clear content blocks with consistent internal padding.
+- Keep hierarchy obvious: headline → support text → primary action.
+- Use whitespace to separate concerns before adding borders or shadows.
+
+## 6. Components
+
+- Buttons: primary action uses `#3B82F6`; secondary actions stay neutral.
+- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
+- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
+
+## 7. Motion & Interaction
+
+- Use subtle transitions that emphasize Primary (#3B82F6) as the interaction signal.
+- Default to short, purposeful transitions (150–250ms) with stable easing.
+- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
+
+## 8. Voice & Brand
+
+- Tone should reflect the visual style: concise, confident, and product-specific.
+- Keep microcopy action-oriented and avoid generic filler language.
+- Preserve the style identity in headlines while keeping UI labels literal and clear.
+
+## 9. Anti-patterns
+
+- Do not introduce off-palette colors when an existing token can solve the problem.
+- Do not flatten hierarchy by using the same type size/weight for all text.
+- Do not add decorative effects that reduce readability or accessibility.
+- Do not mix unrelated visual metaphors in the same interface.

package/docs/design/systems/elegant/manifest.json

@@ -0,0 +1,54 @@
+{
+  "schemaVersion": "od-design-system-project/v1",
+  "id": "elegant",
+  "name": "Elegant",
+  "category": "Professional & Corporate",
+  "description": "Bundled OpenDesign package for Elegant, derived from curated DESIGN.md, tokens.css, and components.html fixtures.",
+  "source": {
+    "type": "bundled",
+    "origin": "OpenDesign curated bundled fixture"
+  },
+  "files": {
+    "design": "DESIGN.md",
+    "tokens": "tokens.css",
+    "designTokens": "design-tokens.json",
+    "tailwind": "tailwind-v4.css",
+    "components": "components.html"
+  },
+  "usage": "USAGE.md",
+  "componentsManifest": "components.manifest.json",
+  "importMode": "normalized",
+  "craft": {
+    "applies": [],
+    "suggested": [
+      "color",
+      "accessibility-baseline"
+    ],
+    "exemptions": []
+  },
+  "preview": {
+    "dir": "preview",
+    "pages": [
+      {
+        "path": "preview/colors.html",
+        "role": "colors",
+        "title": "Colors"
+      },
+      {
+        "path": "preview/typography.html",
+        "role": "typography",
+        "title": "Typography"
+      },
+      {
+        "path": "preview/spacing.html",
+        "role": "spacing",
+        "title": "Spacing"
+      }
+    ]
+  },
+  "sourceFiles": {
+    "evidence": "source/evidence.md",
+    "tokens": "source/tokens.source.json",
+    "report": "source/token-contract.report.json"
+  }
+}

package/docs/design/systems/elegant/tokens.css

@@ -0,0 +1,63 @@
+/* design-systems/elegant/tokens.css
+ * Structured token bindings for Elegant.
+ * elegant interface language with warm neutrals, serif display type, and quiet premium controls.
+ */
+
+:root {
+  --bg: #fbf6ee;
+  --surface: #fffdf8;
+  --surface-warm: #f1e3cf;
+  --fg: #201914;
+  --fg-2: #4c4037;
+  --muted: #7a6d63;
+  --meta: #9b5b32;
+  --border: #ded2c3;
+  --border-soft: #eee4d7;
+  --accent: #9b5b32;
+  --accent-on: #ffffff;
+  --accent-hover: color-mix(in oklab, var(--accent), black 8%);
+  --accent-active: color-mix(in oklab, var(--accent), black 14%);
+  --success: #4f8a4f;
+  --warn: #c9822f;
+  --danger: #b33a3a;
+  --font-display: Georgia, "Times New Roman", serif;
+  --font-body: Inter, system-ui, sans-serif;
+  --font-mono: "SF Mono", ui-monospace, Menlo, monospace;
+  --text-xs: 12px;
+  --text-sm: 14px;
+  --text-base: 17px;
+  --text-lg: 20px;
+  --text-xl: 28px;
+  --text-2xl: 42px;
+  --text-3xl: 64px;
+  --text-4xl: 88px;
+  --leading-body: 1.62;
+  --leading-tight: 1;
+  --tracking-display: -0.025em;
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-8: 32px;
+  --space-12: 48px;
+  --section-y-desktop: 112px;
+  --section-y-tablet: 80px;
+  --section-y-phone: 56px;
+  --radius-sm: 10px;
+  --radius-md: 16px;
+  --radius-lg: 24px;
+  --radius-pill: 9999px;
+  --elev-flat: none;
+  --elev-ring: 0 0 0 1px var(--border);
+  --elev-raised: 0 20px 52px rgba(32, 25, 20, 0.12);
+  --focus-ring: 0 0 0 4px rgba(155, 91, 50, 0.24);
+  --motion-fast: 150ms;
+  --motion-base: 240ms;
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --container-max: 1180px;
+  --container-gutter-desktop: 36px;
+  --container-gutter-tablet: 24px;
+  --container-gutter-phone: 16px;
+}

package/docs/design/systems/energetic/DESIGN.md

@@ -0,0 +1,72 @@
+# Design System Inspired by Energetic
+
+> Category: Bold & Expressive
+> Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.
+
+## 1. Visual Theme & Atmosphere
+
+Dynamic, vibrant style with thick borders, geometric shapes, high-contrast colors, and expressive typography conveying motion and vitality.
+
+- **Visual style:** bold, geometric, vibrant, thick-bordered
+- **Color stance:** primary, secondary, neutral
+- **Design intent:** Keep outputs recognizable to this style family while preserving usability and readability.
+
+## 2. Color
+
+- **Primary:** `#EA580B` — Token from style foundations.
+- **Secondary:** `#F59E0B` — Token from style foundations.
+- **Success:** `#16A34A` — Token from style foundations.
+- **Warning:** `#D97706` — Token from style foundations.
+- **Danger:** `#DC2626` — Token from style foundations.
+- **Background:** `#FFEDD5` — Token from style foundations.
+- **Surface:** `#FDBA74` — Token from style foundations.
+- **Text:** `#EA580C` — Token from style foundations.
+- **Neutral:** `#FDBA74` — Derived from the surface token for official format compatibility.
+
+- Favor Primary (#EA580B) for CTA emphasis.
+- Use Surface (#FDBA74) for large backgrounds and cards.
+- Keep body copy on Text (#EA580C) for legibility.
+
+## 3. Typography
+
+- **Scale:** 12/14/16/20/24/32/48
+- **Families:** primary=Limelight, display=Limelight, mono=JetBrains Mono
+- **Weights:** 400
+- Headings should carry the style personality; body text should optimize scanability and contrast.
+
+## 4. Spacing & Grid
+
+- **Spacing scale:** 4/8/12/16/24/32/48/64
+- Keep vertical rhythm consistent across sections and components.
+- Align columns and modules to a predictable grid; avoid ad-hoc offsets.
+
+## 5. Layout & Composition
+
+- Prefer clear content blocks with consistent internal padding.
+- Keep hierarchy obvious: headline → support text → primary action.
+- Use whitespace to separate concerns before adding borders or shadows.
+
+## 6. Components
+
+- Buttons: primary action uses `#EA580B`; secondary actions stay neutral.
+- Inputs: strong focus-visible states, clear labels, and predictable error messaging.
+- Cards/sections: use consistent radii, spacing, and elevation strategy across the page.
+
+## 7. Motion & Interaction
+
+- Use subtle transitions that emphasize Primary (#EA580B) as the interaction signal.
+- Default to short, purposeful transitions (150–250ms) with stable easing.
+- Ensure hover, focus-visible, active, disabled, and loading states are explicit.
+
+## 8. Voice & Brand
+
+- Tone should reflect the visual style: concise, confident, and product-specific.
+- Keep microcopy action-oriented and avoid generic filler language.
+- Preserve the style identity in headlines while keeping UI labels literal and clear.
+
+## 9. Anti-patterns
+
+- Do not introduce off-palette colors when an existing token can solve the problem.
+- Do not flatten hierarchy by using the same type size/weight for all text.
+- Do not add decorative effects that reduce readability or accessibility.
+- Do not mix unrelated visual metaphors in the same interface.