@shaykec/app-agent 1.0.0

package/designs/brands/nature-organic.md

@@ -0,0 +1,105 @@
+# Nature Organic
+
+> Follows all rules in [DESIGN_PRINCIPLES.md](../DESIGN_PRINCIPLES.md).
+
+**Tone:** playful
+**One-line:** Warm earth tones with soft shapes inspired by nature and sustainability.
+
+---
+
+## Color Palette
+
+### Light Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#16A34A` | Key actions, active elements, links |
+| onPrimary | `#FFFFFF` | Text/icons on primary |
+| secondary | `#92400E` | Supporting elements, earthy accents |
+| onSecondary | `#FFFFFF` | Text/icons on secondary |
+| tertiary | `#D97706` | Highlights, badges, warm accent |
+| onTertiary | `#FFFFFF` | Text/icons on tertiary |
+| background | `#FEFDF8` | Main screen background (warm white) |
+| onBackground | `#1C1917` | Primary text |
+| surface | `#FDF6E3` | Cards, sheets (cream/parchment) |
+| onSurface | `#292524` | Text on surface |
+| surfaceVariant | `#F5EFE0` | Search bars, input fields |
+| error | `#DC2626` | Error states |
+| onError | `#FFFFFF` | Text on error |
+| outline | `#E7E0D3` | Borders, dividers |
+
+### Dark Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#4ADE80` | Key actions (brighter green on dark) |
+| onPrimary | `#1C1917` | Text/icons on primary |
+| secondary | `#D4A574` | Earthy accent (warmer on dark) |
+| onSecondary | `#1C1917` | Text/icons on secondary |
+| tertiary | `#FBBF24` | Warm accent (gold on dark) |
+| onTertiary | `#1C1917` | Text/icons on tertiary |
+| background | `#1C1917` | Main screen background (warm black) |
+| onBackground | `#F5EFE0` | Primary text (cream) |
+| surface | `#292524` | Cards, sheets |
+| onSurface | `#E7E0D3` | Text on surface |
+| surfaceVariant | `#3D3530` | Search bars, input fields |
+| error | `#F87171` | Error states |
+| onError | `#1C1917` | Text on error |
+| outline | `#44403C` | Borders, dividers |
+
+---
+
+## Layout Tokens
+
+| Token | Value |
+|-------|-------|
+| Corner radius | 12pt/dp |
+| Spacing scale | Generous (16-24pt between elements) |
+| Card elevation | Subtle (2pt soft shadow / 1dp elevation) |
+| Border width | 0pt (prefer shadows or no borders) |
+
+---
+
+## Typography
+
+| Property | Value |
+|----------|-------|
+| Font family | System (San Francisco / Roboto) — rounded variant preferred if available |
+| Heading weight | Bold (700) |
+| Body weight | Regular (400) |
+| Body size | 16pt/sp |
+| Letter spacing | Default |
+
+---
+
+## Icon Style
+
+- **Preferred variant:** Filled (warm, friendly feel)
+- **Active/selected:** Filled with primary color
+- **Line weight:** Standard
+- **Size:** 24pt/dp
+- **Preference:** Nature-themed SF Symbols where available (leaf, sun, drop)
+
+---
+
+## Do's and Don'ts
+
+### Do
+- Use warm tones throughout — even grays should lean warm (taupe, not cool gray)
+- Use organic shapes for illustrations and decorative elements
+- Pair green with brown/terracotta for an earthy feel
+- Use cream/parchment surfaces instead of pure white
+- Consider leaf or nature motifs for empty states and onboarding
+
+### Don't
+- Use cool blues or grays (keep everything warm)
+- Use sharp, angular geometric shapes
+- Use neon or electric colors
+- Make the design feel corporate or rigid
+- Use pure white (#FFFFFF) backgrounds — always tint warm
+
+### Brand-Specific Overrides
+- Background is warm white (#FEFDF8) not pure white
+- Dark mode background is warm black (#1C1917) not cool black
+- Surfaces use cream (#FDF6E3) not standard light gray
+- Shadows are warm-tinted (brown undertone, not cool gray)

package/designs/brands/neo-brutalist.md

@@ -0,0 +1,105 @@
+# Neo Brutalist
+
+> Follows all rules in [DESIGN_PRINCIPLES.md](../DESIGN_PRINCIPLES.md).
+
+**Tone:** bold
+**One-line:** High-contrast black and white with thick borders, raw typography, and neon accents.
+
+---
+
+## Color Palette
+
+### Light Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#000000` | Key actions, text, primary elements |
+| onPrimary | `#FFFFFF` | Text/icons on primary |
+| secondary | `#A3E635` | Neon accent for highlights, selected states |
+| onSecondary | `#000000` | Text/icons on secondary |
+| tertiary | `#F43F5E` | Alerts, badges, destructive accent |
+| onTertiary | `#FFFFFF` | Text/icons on tertiary |
+| background | `#FFFFFF` | Main screen background (pure white) |
+| onBackground | `#000000` | Primary text (pure black) |
+| surface | `#FAFAFA` | Cards, sheets |
+| onSurface | `#000000` | Text on surface |
+| surfaceVariant | `#F5F5F5` | Search bars, input fields |
+| error | `#EF4444` | Error states |
+| onError | `#FFFFFF` | Text on error |
+| outline | `#000000` | Borders, dividers (thick, visible) |
+
+### Dark Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#FFFFFF` | Key actions, text (inverted) |
+| onPrimary | `#000000` | Text/icons on primary |
+| secondary | `#A3E635` | Neon accent (same in dark mode) |
+| onSecondary | `#000000` | Text/icons on secondary |
+| tertiary | `#FB7185` | Alerts, badges |
+| onTertiary | `#000000` | Text/icons on tertiary |
+| background | `#000000` | Main screen background (pure black) |
+| onBackground | `#FFFFFF` | Primary text (pure white) |
+| surface | `#141414` | Cards, sheets |
+| onSurface | `#FFFFFF` | Text on surface |
+| surfaceVariant | `#1F1F1F` | Search bars, input fields |
+| error | `#F87171` | Error states |
+| onError | `#000000` | Text on error |
+| outline | `#FFFFFF` | Borders, dividers (thick, visible) |
+
+---
+
+## Layout Tokens
+
+| Token | Value |
+|-------|-------|
+| Corner radius | 0pt/dp (sharp corners — signature of this brand) |
+| Spacing scale | Moderate (12-16pt between elements) |
+| Card elevation | None (0 shadow — use thick borders instead) |
+| Border width | 3pt (thick, visible, structural) |
+
+---
+
+## Typography
+
+| Property | Value |
+|----------|-------|
+| Font family | System monospace (SF Mono / Roboto Mono) for headings, system sans for body |
+| Heading weight | Black (900) |
+| Body weight | Medium (500) |
+| Body size | 16pt/sp |
+| Letter spacing | Tight (-0.5pt on large headings) |
+
+---
+
+## Icon Style
+
+- **Preferred variant:** Outlined (stark, structural)
+- **Active/selected:** Filled with neon secondary color
+- **Line weight:** Bold/heavy
+- **Size:** 24pt/dp
+
+---
+
+## Do's and Don'ts
+
+### Do
+- Use thick (3pt) visible borders on everything — cards, buttons, inputs
+- Use pure black and white as the primary palette
+- Reserve the neon accent (lime green) for interactive/active states only
+- Use monospace fonts for headings to create a raw, coded feel
+- Embrace asymmetry and unconventional layouts where safe to do so
+
+### Don't
+- Use gradients, shadows, or blur effects
+- Use rounded corners (0pt radius is the signature)
+- Use more than one neon accent color per screen
+- Make the design feel polished or refined — raw is the point
+- Soften the contrast — this brand thrives on stark black/white
+
+### Brand-Specific Overrides
+- Corner radius is 0pt (overrides all general guidelines)
+- Card elevation is 0 — cards are defined by thick borders, not shadows
+- Border width is 3pt (significantly thicker than general 1pt default)
+- Headings use monospace font, which is unusual but defines the brand
+- The neon accent color (lime #A3E635) stays identical in both light and dark mode

package/designs/brands/retro-vintage.md

@@ -0,0 +1,108 @@
+# Retro Vintage
+
+> Follows all rules in [DESIGN_PRINCIPLES.md](../DESIGN_PRINCIPLES.md).
+
+**Tone:** nostalgic
+**One-line:** Warm sepia tones with serif typography for nostalgic, handcrafted experiences.
+
+---
+
+## Color Palette
+
+### Light Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#92400E` | Key actions, active elements, links |
+| onPrimary | `#FFFFFF` | Text/icons on primary |
+| secondary | `#D97706` | Secondary actions, highlights, warm accents |
+| onSecondary | `#FFFFFF` | Text/icons on secondary |
+| tertiary | `#B45309` | Tertiary elements, badges, subtle highlights |
+| onTertiary | `#FFFFFF` | Text/icons on tertiary |
+| background | `#FFFBEB` | Main screen background (warm cream) |
+| onBackground | `#451A03` | Primary text (dark brown) |
+| surface | `#FEF3C7` | Cards, sheets (warm parchment) |
+| onSurface | `#78350F` | Text on surface |
+| surfaceVariant | `#FDE68A` | Input fields, muted areas (golden tint) |
+| error | `#DC2626` | Error states |
+| onError | `#FFFFFF` | Text on error |
+| outline | `#D6D3D1` | Borders, dividers (warm gray) |
+
+### Dark Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#FBBF24` | Key actions (warm amber for dark bg) |
+| onPrimary | `#451A03` | Text/icons on primary |
+| secondary | `#F59E0B` | Secondary actions |
+| onSecondary | `#451A03` | Text/icons on secondary |
+| tertiary | `#D97706` | Tertiary elements |
+| onTertiary | `#FFFFFF` | Text/icons on tertiary |
+| background | `#1C1917` | Main screen background (warm black) |
+| onBackground | `#FEF3C7` | Primary text (cream) |
+| surface | `#292524` | Cards, sheets (warm dark) |
+| onSurface | `#E7E5E4` | Text on surface |
+| surfaceVariant | `#44403C` | Input fields, muted areas |
+| error | `#F87171` | Error states |
+| onError | `#451A03` | Text on error |
+| outline | `#57534E` | Borders, dividers |
+
+---
+
+## Layout Tokens
+
+| Token | Value |
+|-------|-------|
+| Corner radius | 4pt/dp (slightly squared, classic feel) |
+| Spacing scale | Moderate (12-16pt between elements) |
+| Card elevation | Subtle warm shadow (2pt shadow in warm tone, not gray) |
+| Border width | 1pt (classic, thin) |
+
+---
+
+## Typography
+
+| Property | Value |
+|----------|-------|
+| Font family | Serif for headings (Georgia / Noto Serif), System for body |
+| Heading weight | Bold (700) |
+| Body weight | Regular (400) |
+| Body size | 16pt/sp |
+| Letter spacing | Default for body, +0.5pt for headings |
+
+---
+
+## Icon Style
+
+- **Preferred variant:** Outlined with thin weight
+- **Active/selected:** Filled variant
+- **Line weight:** Light to Regular (SF Symbols: light, Material: outlined)
+- **Size:** Standard 24pt/dp
+- **Style:** Classic, simple line icons — avoid modern/tech iconography
+
+---
+
+## Do's and Don'ts
+
+### Do
+- Use serif typography for headings to create a classic, timeless feel
+- Use warm shadow tones (brown-tinted, not gray) for depth
+- Favor warm neutrals (cream, parchment, brown) over cool grays
+- Use photography with warm color grading
+- Create visual texture through typography contrast (serif headings + sans-serif body)
+- Use muted, earthy accent colors
+
+### Don't
+- Use bright, saturated modern colors (neon, electric blue, hot pink)
+- Use heavy drop shadows or strong elevation
+- Use monospace or geometric sans-serif for headings
+- Use sharp, angular design elements
+- Mix warm vintage tones with cool tech aesthetics
+- Use gradient backgrounds or glass-morphism effects
+
+### Brand-Specific Overrides
+- Headings use serif font (Georgia/Noto Serif) instead of system sans-serif
+- Card shadows use warm tone (`rgba(120, 53, 15, 0.08)`) instead of neutral gray
+- Corner radius is 4pt (slightly squared for a classic feel)
+- Background uses warm cream (#FFFBEB) instead of pure white
+- All grays lean warm (stone/sand tones instead of cool slate)

package/designs/brands/soft-gradient.md

@@ -0,0 +1,120 @@
+# Soft Gradient
+
+> Follows all rules in [DESIGN_PRINCIPLES.md](../DESIGN_PRINCIPLES.md).
+
+**Tone:** playful
+**One-line:** Dreamy pastel gradients with soft shapes for a calming, lifestyle feel.
+
+---
+
+## Color Palette
+
+### Light Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#8B5CF6` | Key actions, active elements (violet) |
+| onPrimary | `#FFFFFF` | Text/icons on primary |
+| secondary | `#6366F1` | Supporting elements (indigo, for gradient pairing) |
+| onSecondary | `#FFFFFF` | Text/icons on secondary |
+| tertiary | `#EC4899` | Highlights, badges, warm accent (pink) |
+| onTertiary | `#FFFFFF` | Text/icons on tertiary |
+| background | `#FDFBFF` | Main screen background (cool white) |
+| onBackground | `#1C1B2E` | Primary text (dark violet-tinted) |
+| surface | `#F8F5FF` | Cards, sheets (very light lavender) |
+| onSurface | `#2D2B4E` | Text on surface |
+| surfaceVariant | `#F0ECFF` | Search bars, input fields |
+| error | `#EF4444` | Error states |
+| onError | `#FFFFFF` | Text on error |
+| outline | `#E4DEFF` | Borders, dividers |
+
+### Dark Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#A78BFA` | Key actions (lighter violet) |
+| onPrimary | `#1C1B2E` | Text/icons on primary |
+| secondary | `#818CF8` | Supporting elements |
+| onSecondary | `#1C1B2E` | Text/icons on secondary |
+| tertiary | `#F472B6` | Highlights, badges |
+| onTertiary | `#1C1B2E` | Text/icons on tertiary |
+| background | `#13121E` | Main screen background (deep violet-black) |
+| onBackground | `#EDE8FF` | Primary text |
+| surface | `#1E1D2E` | Cards, sheets |
+| onSurface | `#D4CDFF` | Text on surface |
+| surfaceVariant | `#2A2940` | Search bars, input fields |
+| error | `#F87171` | Error states |
+| onError | `#1C1B2E` | Text on error |
+| outline | `#3D3A5C` | Borders, dividers |
+
+---
+
+## Gradient Definitions
+
+This brand uses gradients as a signature element. Define these for use on headers, cards, and backgrounds:
+
+| Gradient | Start | End | Usage |
+|----------|-------|-----|-------|
+| Primary gradient | `#8B5CF6` | `#6366F1` | Header backgrounds, hero sections |
+| Warm gradient | `#8B5CF6` | `#EC4899` | CTA buttons, promotional cards |
+| Subtle gradient | `#F0ECFF` | `#FDFBFF` | Surface backgrounds, section dividers |
+| Dark gradient | `#1E1D2E` | `#13121E` | Dark mode header backgrounds |
+
+All gradients flow **top-left to bottom-right** (135 degrees).
+
+---
+
+## Layout Tokens
+
+| Token | Value |
+|-------|-------|
+| Corner radius | 16pt/dp (fully rounded on pills and badges) |
+| Spacing scale | Generous (16-24pt between elements) |
+| Card elevation | Soft (6pt diffused shadow at 8% opacity) |
+| Border width | 0pt (no borders — shadows and gradients define edges) |
+
+---
+
+## Typography
+
+| Property | Value |
+|----------|-------|
+| Font family | System (San Francisco / Roboto) — rounded variant if available |
+| Heading weight | Bold (700) |
+| Body weight | Regular (400) |
+| Body size | 16pt/sp |
+| Letter spacing | Default |
+
+---
+
+## Icon Style
+
+- **Preferred variant:** Filled (soft, friendly)
+- **Active/selected:** Filled with primary color or gradient tint
+- **Line weight:** Standard
+- **Size:** 24pt/dp
+
+---
+
+## Do's and Don'ts
+
+### Do
+- Use gradients on key surfaces (headers, primary buttons, onboarding backgrounds)
+- Keep gradients subtle — pastel-to-pastel, not vivid-to-vivid
+- Use soft, diffused shadows (large blur, low opacity)
+- Round everything generously (16pt corners, pill-shaped buttons)
+- Use airy illustrations for empty states and onboarding
+
+### Don't
+- Use harsh borders or divider lines (prefer subtle shadows or spacing)
+- Use dark, saturated colors in light mode (keep everything pastel and airy)
+- Apply gradients to text (only to backgrounds and containers)
+- Use angular or geometric shapes (everything should feel soft)
+- Make gradients too colorful — stick to 2 colors per gradient, same hue family
+
+### Brand-Specific Overrides
+- Backgrounds can use subtle gradients (not just solid colors)
+- No visible borders — card edges are defined by soft shadows
+- Gradient definitions are unique to this brand — no other brand uses them
+- Dark mode backgrounds are tinted violet (not neutral gray or pure black)
+- Shadow color is tinted with primary (violet at 8-12% opacity, not gray)

package/designs/brands/sport-athletic.md

@@ -0,0 +1,117 @@
+# Sport Athletic
+
+> Follows all rules in [DESIGN_PRINCIPLES.md](../DESIGN_PRINCIPLES.md).
+
+**Tone:** energetic
+**One-line:** Bold black and red with condensed all-caps typography for competitive, high-energy experiences.
+
+---
+
+## Color Palette
+
+### Light Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#0A0A0A` | Key actions, primary buttons, bold elements |
+| onPrimary | `#FFFFFF` | Text/icons on primary |
+| secondary | `#EF4444` | Secondary actions, highlights, energy accents |
+| onSecondary | `#FFFFFF` | Text/icons on secondary |
+| tertiary | `#F97316` | Tertiary elements, progress, warmth |
+| onTertiary | `#FFFFFF` | Text/icons on tertiary |
+| background | `#FFFFFF` | Main screen background |
+| onBackground | `#0A0A0A` | Primary text |
+| surface | `#F5F5F5` | Cards, sheets (neutral gray) |
+| onSurface | `#171717` | Text on surface |
+| surfaceVariant | `#E5E5E5` | Input fields, muted areas |
+| success | `#22C55E` | Achievement unlocked, goal met, PR |
+| onSuccess | `#FFFFFF` | Text on success |
+| error | `#EF4444` | Errors, missed targets |
+| onError | `#FFFFFF` | Text on error |
+| outline | `#D4D4D4` | Borders, dividers |
+
+### Dark Mode (preferred)
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#FFFFFF` | Key actions (inverted for dark bg) |
+| onPrimary | `#0A0A0A` | Text/icons on primary |
+| secondary | `#F87171` | Secondary actions, energy accents |
+| onSecondary | `#0A0A0A` | Text/icons on secondary |
+| tertiary | `#FB923C` | Tertiary elements, progress |
+| onTertiary | `#0A0A0A` | Text/icons on tertiary |
+| background | `#0A0A0A` | Main screen background (pure black) |
+| onBackground | `#FAFAFA` | Primary text |
+| surface | `#171717` | Cards, sheets |
+| onSurface | `#E5E5E5` | Text on surface |
+| surfaceVariant | `#262626` | Input fields, muted areas |
+| success | `#4ADE80` | Achievement, goal met |
+| onSuccess | `#0A0A0A` | Text on success |
+| error | `#F87171` | Errors |
+| onError | `#0A0A0A` | Text on error |
+| outline | `#404040` | Borders, dividers |
+
+---
+
+## Layout Tokens
+
+| Token | Value |
+|-------|-------|
+| Corner radius | 4pt/dp (sharp, aggressive) |
+| Spacing scale | Tight (8-12pt between elements) |
+| Card elevation | Strong (4pt shadow / 4dp elevation) |
+| Border width | 2pt (bold, visible) |
+
+---
+
+## Typography
+
+| Property | Value |
+|----------|-------|
+| Font family | System condensed or heavy (SF Pro Display / Roboto Condensed) |
+| Heading weight | Black (900) |
+| Body weight | Medium (500) |
+| Body size | 16pt/sp |
+| Heading transform | UPPERCASE (all-caps for headings and labels) |
+| Letter spacing | Tight (-0.5pt for headings, default for body) |
+
+---
+
+## Icon Style
+
+- **Preferred variant:** Filled (bold presence)
+- **Active/selected:** Filled with accent color
+- **Line weight:** Heavy (SF Symbols: bold, Material: filled)
+- **Size:** 24pt/dp (standard, but bold weight)
+- **Style:** Strong, geometric — sports-oriented where possible
+
+---
+
+## Do's and Don'ts
+
+### Do
+- Use ALL CAPS for headings, labels, and button text
+- Use bold, high-contrast color combinations (black + white + red)
+- Create visual energy with tight spacing and strong typography
+- Use angular, geometric shapes and sharp corners
+- Make CTAs large and impossible to miss
+- Use progress indicators aggressively (bars, rings, percentages)
+- Show numbers prominently (stats, times, reps, distances)
+
+### Don't
+- Use pastel or muted colors (this brand is about intensity)
+- Use rounded, soft shapes (keep it angular and sharp)
+- Use lightweight or thin typography
+- Add excessive padding or white space (tight layouts = energy)
+- Use decorative or playful elements
+- Mix in serif fonts or calligraphic styles
+- Use gentle transitions (prefer quick, snappy animations)
+
+### Brand-Specific Overrides
+- Heading weight is Black (900) — the boldest available
+- All headings and labels are UPPERCASE
+- Corner radius is 4pt (sharp, not rounded)
+- Letter spacing is -0.5pt for headings (tight, compressed)
+- Dark mode is preferred (black creates a dramatic canvas)
+- Animations are quick (200ms or less) with ease-out timing
+- Border width is 2pt for emphasis

package/designs/brands/tech-dynamic.md

@@ -0,0 +1,123 @@
+# Tech Dynamic
+
+> Follows all rules in [DESIGN_PRINCIPLES.md](../DESIGN_PRINCIPLES.md).
+
+**Tone:** bold
+**One-line:** Electric blue and cyan on dark backgrounds with sharp angles and high energy.
+
+---
+
+## Color Palette
+
+### Light Mode
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#2563EB` | Key actions, active elements (electric blue) |
+| onPrimary | `#FFFFFF` | Text/icons on primary |
+| secondary | `#06B6D4` | Supporting elements, secondary actions (cyan) |
+| onSecondary | `#FFFFFF` | Text/icons on secondary |
+| tertiary | `#10B981` | Success, positive metrics, progress (emerald) |
+| onTertiary | `#FFFFFF` | Text/icons on tertiary |
+| background | `#F9FAFB` | Main screen background |
+| onBackground | `#111827` | Primary text |
+| surface | `#F3F4F6` | Cards, sheets |
+| onSurface | `#1F2937` | Text on surface |
+| surfaceVariant | `#E5E7EB` | Search bars, input fields |
+| error | `#EF4444` | Error states, negative metrics |
+| onError | `#FFFFFF` | Text on error |
+| outline | `#D1D5DB` | Borders, dividers |
+
+### Dark Mode (preferred theme)
+
+| Token | Hex | Usage |
+|-------|-----|-------|
+| primary | `#3B82F6` | Key actions (vivid blue on dark) |
+| onPrimary | `#FFFFFF` | Text/icons on primary |
+| secondary | `#22D3EE` | Supporting elements (bright cyan) |
+| onSecondary | `#0F172A` | Text/icons on secondary |
+| tertiary | `#34D399` | Success, positive metrics |
+| onTertiary | `#0F172A` | Text/icons on tertiary |
+| background | `#0F172A` | Main screen background (dark navy) |
+| onBackground | `#F1F5F9` | Primary text |
+| surface | `#1E293B` | Cards, sheets |
+| onSurface | `#E2E8F0` | Text on surface |
+| surfaceVariant | `#334155` | Search bars, input fields |
+| error | `#F87171` | Error states |
+| onError | `#0F172A` | Text on error |
+| outline | `#475569` | Borders, dividers |
+
+---
+
+## Layout Tokens
+
+| Token | Value |
+|-------|-------|
+| Corner radius | 8pt/dp |
+| Spacing scale | Moderate (12-16pt between elements) |
+| Card elevation | Medium (3pt shadow / 2dp elevation) |
+| Border width | 1pt (crisp, defined) |
+
+---
+
+## Typography
+
+| Property | Value |
+|----------|-------|
+| Font family | System (San Francisco / Roboto) |
+| Heading weight | Black (900) |
+| Body weight | Medium (500) |
+| Body size | 16pt/sp |
+| Letter spacing | Tight (-0.25pt on headings for impact) |
+
+---
+
+## Icon Style
+
+- **Preferred variant:** Filled (bold, impactful)
+- **Active/selected:** Filled with primary or secondary color
+- **Line weight:** Bold
+- **Size:** 24pt/dp
+
+---
+
+## Data Visualization Colors
+
+This brand is data-heavy. Use these colors for charts, graphs, and metrics:
+
+| Purpose | Hex |
+|---------|-----|
+| Series 1 (primary) | `#3B82F6` |
+| Series 2 (secondary) | `#22D3EE` |
+| Series 3 (tertiary) | `#34D399` |
+| Series 4 | `#FBBF24` |
+| Series 5 | `#F87171` |
+| Positive / Up | `#34D399` (green) |
+| Negative / Down | `#F87171` (red) |
+| Neutral | `#94A3B8` (gray) |
+
+---
+
+## Do's and Don'ts
+
+### Do
+- Prefer dark mode as the default (better for data visualization and metrics)
+- Use cyan and blue for interactive elements — they pop on dark backgrounds
+- Display metrics prominently with large numbers and clear labels
+- Use progress bars, gauges, and charts — this brand loves data-viz
+- Add subtle glow effects on active elements in dark mode
+- Use tight heading spacing for an impactful, compressed feel
+
+### Don't
+- Use warm, soft colors (no pastels, no earth tones)
+- Make the design feel gentle or nurturing (this brand is about performance)
+- Use large corner radii (8pt max — keep it sharp)
+- Skip data visualization opportunities — if there's data, show it graphically
+- Use serif fonts or decorative typography
+
+### Brand-Specific Overrides
+- Dark mode is the PREFERRED experience (like DarkLuxe, but for performance/tech reasons)
+- Includes a data visualization color palette (unique to this brand)
+- Heading weight is Black (900), heavier than most brands
+- In dark mode, active elements can have a subtle glow (box-shadow with primary color at 20% opacity)
+- Charts and graphs should use the defined series colors, not arbitrary colors