@michaelmusyoka/eng-os-kit 1.0.0

package/skills/signature-dark-ui/references/components.md

@@ -0,0 +1,449 @@
+# Components reference
+
+Contents: cards and hover, shadows, glassmorphism, navigation, primary and secondary buttons, inputs, badges, data visualization, progress bars, tables, modals, empty states, loading states, iconography, micro-interactions.
+
+# 14. CARDS
+
+Cards are a major part of the visual system.
+
+Default:
+
+```css
+background: var(--bg-card);
+border: 1px solid var(--border);
+border-radius: var(--radius);
+```
+
+Large cards may use:
+
+```css
+border-radius: var(--radius-lg);
+padding: 24px–32px;
+```
+
+Reference cards use dark elevated surfaces, subtle borders, controlled radius, and soft shadows.
+
+### Card hierarchy
+
+Not every card should look identical.
+
+Use:
+
+### Level 1
+Flat surface.
+
+### Level 2
+Surface + border.
+
+### Level 3
+Surface + border + shadow.
+
+### Level 4
+Featured surface + accent edge/glow.
+
+Most components should remain Level 1 or Level 2.
+
+---
+
+# 15. CARD HOVER
+
+Hover should be subtle.
+
+Preferred:
+
+```css
+transform: translateY(-2px);
+border-color: var(--border-bright);
+```
+
+Optionally:
+
+```css
+box-shadow: var(--shadow-glow);
+```
+
+Do not make cards jump 10–20px.
+
+Do not rotate cards.
+
+Do not add huge glow effects.
+
+The reference uses approximately 2px elevation on interactive cards.
+
+---
+
+# 16. SHADOWS
+
+Use soft, deep shadows.
+
+Reference:
+
+```css
+--shadow-card: 0 4px 32px rgba(0,0,0,0.45);
+--shadow-glow: 0 0 32px rgba(59,130,246,0.25);
+```
+
+
+
+Shadows should establish depth.
+
+They should not make every element look like it is floating.
+
+---
+
+# 17. GLASSMORPHISM
+
+Use sparingly.
+
+Acceptable:
+
+- sticky navigation
+- modal overlays
+- floating contextual UI
+- occasional hero decoration
+
+Example:
+
+```css
+background: rgba(6,9,20,0.85);
+backdrop-filter: blur(20px);
+```
+
+The reference uses this treatment on its sticky navigation.
+
+Do not build the entire site from translucent glass cards.
+
+That is one of the fastest ways to make the site look like a generic AI-generated interface.
+
+---
+
+# 18. NAVIGATION
+
+Desktop navigation:
+
+- compact
+- horizontal
+- centered within max-width container
+- sticky when useful
+- translucent/dark
+- subtle bottom border
+
+Navigation links should be quiet.
+
+Inactive:
+
+```text
+muted slate
+```
+
+Hover:
+
+```text
+primary text
+subtle translucent background
+```
+
+Active:
+
+```text
+blue-bright
+```
+
+Reference navigation follows this exact hierarchy.
+
+---
+
+# 19. PRIMARY BUTTONS
+
+Primary buttons should feel tactile and important.
+
+Use:
+
+- blue gradient
+- white text
+- 8–14px radius
+- moderate padding
+- subtle glow
+- small hover elevation
+
+Example behavior:
+
+```css
+transition: all 220ms cubic-bezier(0.4,0,0.2,1);
+```
+
+Hover:
+
+```css
+transform: translateY(-2px);
+box-shadow: 0 8px 32px var(--blue-glow);
+```
+
+The reference uses this interaction pattern.
+
+---
+
+# 20. SECONDARY BUTTONS
+
+Secondary actions should not compete with primary actions.
+
+Use:
+
+```css
+background: rgba(255,255,255,0.04–0.06);
+border: 1px solid var(--border-bright);
+color: var(--text-primary);
+```
+
+Hover:
+
+```css
+background: rgba(255,255,255,0.08–0.10);
+transform: translateY(-1px or -2px);
+```
+
+---
+
+# 21. INPUTS
+
+Inputs should feel integrated into the interface.
+
+Use:
+
+```css
+background: var(--bg-surface);
+border: 1px solid var(--border);
+border-radius: 8px;
+color: var(--text-primary);
+```
+
+Focus:
+
+```css
+border-color: var(--blue-bright);
+box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
+```
+
+The reference uses this exact focus philosophy.
+
+Never use browser-default inputs.
+
+---
+
+# 22. BADGES
+
+Badges should be compact.
+
+Use:
+
+```text
+small font
+semi-bold
+pill radius
+low-opacity colored background
+colored text
+```
+
+Examples:
+
+```text
+SUCCESS
+PENDING
+PROCESSING
+ACTIVE
+NEW
+POPULAR
+```
+
+Semantic colors:
+
+```text
+success → green
+warning → amber
+danger → red
+info → blue
+special → purple/cyan
+```
+
+Keep the background translucent.
+
+---
+
+# 23. DATA VISUALIZATION
+
+For dashboards:
+
+Charts should feel like part of the same interface.
+
+Use:
+
+- dark chart surfaces
+- muted grid lines
+- luminous data lines
+- blue/cyan primary series
+- green for positive metrics
+- amber for warnings
+- purple for secondary categories
+
+The reference uses blue, cyan, purple, amber, and green as its primary chart vocabulary.
+
+Do not use random chart palettes.
+
+---
+
+# 24. PROGRESS BARS
+
+Progress bars should be:
+
+- thin
+- rounded
+- dark track
+- bright fill
+- animated when data loads
+
+Typical:
+
+```text
+track: 6–8px
+radius: full
+fill: accent
+transition: 600ms ease
+```
+
+The reference uses approximately 6px conversion bars with animated width transitions.
+
+---
+
+# 41. TABLES
+
+Tables should feel integrated rather than like HTML defaults.
+
+Use:
+
+- compact row heights
+- muted headers
+- thin dividers
+- subtle hover
+- semantic badges
+- aligned numerical values
+- horizontal scrolling on mobile
+
+Reference behavior includes muted table headers, subtle row borders, and extremely low-opacity hover states.
+
+---
+
+# 42. MODALS
+
+Modal:
+
+- dark card
+- 20px radius
+- subtle bright border
+- blurred overlay
+- controlled entrance animation
+
+Reference modal behavior uses a dark elevated card, brightened border, blurred overlay, and a small translate/scale entrance.
+
+Preferred entrance:
+
+```text
+opacity: 0 → 1
+translateY: 20px → 0
+scale: .97 → 1
+```
+
+---
+
+# 43. EMPTY STATES
+
+Never leave an empty area blank.
+
+Use:
+
+- Signature Signal
+- small icon
+- concise explanation
+- optional action
+
+Example:
+
+```text
+      [Signature Signal]
+
+      No activity yet
+
+      Your recent activity will appear here.
+```
+
+Keep it understated.
+
+---
+
+# 44. LOADING STATES
+
+Prefer skeletons or restrained shimmer.
+
+Skeleton colors:
+
+```text
+background: rgba(255,255,255,.04)
+highlight: rgba(255,255,255,.07)
+```
+
+Do not create enormous animated loading screens unless necessary.
+
+The Signature Signal may be used as a subtle loading indicator.
+
+---
+
+# 48. ICONOGRAPHY
+
+Prefer:
+
+- Lucide-style icons
+- clean SVG icons
+- consistent stroke width
+- 16–20px typical size
+
+Use icons as information enhancers.
+
+Do not use emojis as the primary icon system.
+
+Emojis may occasionally appear in dashboards or marketing copy where they make sense, but the core interface should use a coherent icon family.
+
+---
+
+# 49. MICRO-INTERACTIONS
+
+Every interactive element should communicate its state.
+
+Examples:
+
+### Button
+
+Rest → hover → pressed → disabled
+
+### Navigation
+
+Inactive → hover → active
+
+### Input
+
+Rest → focus → error → success
+
+### Card
+
+Rest → hover → selected
+
+### Dropdown
+
+Closed → opening → open
+
+### Modal
+
+Hidden → entering → active → exiting
+
+Animations should be fast enough to feel responsive.
+
+---
+