Home Signature (Default)
Use for all standard app shells across Lens, Explorer, Home, MOC, and Victoria surfaces.
Elcano Internal
Elcano Design System
Canonical visual reference from the Flag repo. Includes foundations, logos, unified inputs, and component patterns for all products.
Design System
Foundations, brand assets, and global patterns that define the visual language across all products.
Color Tokens
Typography (Rem Scale)
Operations Intelligence Platform
Campaign Delivery Health
Today
Use body large for readable copy and operational descriptions.
Use body base for controls, table rows, and compact UI copy.
Used for helper text, metadata, and low-emphasis labels.
Common Spacing
space-1 / 0.25rem
space-2 / 0.5rem
space-3 / 0.75rem
space-4 / 1rem
space-5 / 1.25rem
space-6 / 1.5rem
space-7 / 2rem
Use semantic spacing primitives for consistency: control inline, control stack, card padding, section stack, page gutter.
Gradient and Background Standard
Default and enforced shell background across products is Home Signature. Other shell gradients are reserved and require explicit exception approval.
Product Standard (Reserved)
Reserved fallback for constrained environments only.
Ops Console (Reserved)
Reserved for highly specialized dashboards after design approval.
Surface Panel
Default section and panel background.
Surface Card
Feature cards and highlighted grouped content.
Surface Elevated
Modals and elevated detail surfaces.
Logos and Brand Marks
Use only approved marks from `design-system/logos`. Each logo below includes its approved usage context.
Elcano Primary Mark
Corporate and suite-level identity. Use in global headers, launch surfaces, and brand-level navigation.
Elcano Favicon Mark
Browser tab, touch icon source, and compact brand placements where square mark format is required.
Victoria Product Mark
Victoria-specific touchpoints only. Do not replace Elcano suite branding in global shell.
Lens App Mark
Lens product identity for app-level branding, favicon usage, and app launch tiles.
Explorer App Mark
Explorer product identity for app-level branding, favicon usage, and app launch tiles.
MOC App Icon
MOC product icon for launch surfaces and icon contexts. Keep 1:1 aspect ratio and no color edits.
Core Icons
download
trash
logout
paperclip
calendar
clock
search
filter
plus
close
sun
moon
Text link example: Open component guidelines
Common Header Pattern
Standard header pattern for all products: brand mark + suite label + page title + right-side actions. This mirrors the Home topbar style and should be reused across apps.
Elcano Internal
Home
Use this in all products: Lens, Explorer, Home, MOC, and Victoria surfaces.
Title slot: set to current page name (`Home`, `Lens`, `Explorer`, `Operations Center`, etc.).
Component Library
Interactive components, state coverage, and implementation-ready UI patterns for product teams.
Component States
Quick state matrix for implementation QA and visual parity checks.
Buttons
Featured Cards
Status Badges
running
warning
success
error
cancelled
Buttons and Standard Inputs
Inputs
Unified input patterns from Home, Lens, Explorer, and MOC: basic fields, dropzone upload, number stepper, date picker, accordion disclosure, file radio select, and checkbox.
File Upload Dropzone
Reference pattern from Lens and MOC with drag states, browse affordance, and file list.
Drag and drop files here
or
Max 250 MB per file ยท Up to 10 files
march-forecast.csv
2.4 MB
68%
Number Input Stepper
Explorer pattern: compact + and - controls, centered value, and focus-within ring on wrapper.
Themed Date Picker
Explorer treatment for date inputs and calendar popover theme (Flatpickr-compatible classes).
Accordion (Home Pattern)
Use for grouped navigation or secondary tool catalogs. Plus/minus indicator shows disclosure state.
Trading and Supply
Files and Docs
Custom File Radio Select (Lens)
Use for selecting one uploaded file before running a task.
Common Checkbox
Use this checkbox style for toggles and optional settings across all products.
Email Selection Pills (MOC)
Use this pill selector pattern for choosing one or more notification recipients in task forms.
ops@elcanotek.com
ads@elcanotek.com
finance@elcanotek.com
Click a pill to select/deselect. Click the `x` to remove a custom email.
Logs Code Display and Task Tracker
Canonical logs-ui components from MOC, preserved as baseline contracts for code execution display and task tracker rendering.
Code Display (MOC Logs)
Use this tool-call code presentation in log timelines when showing `run_python` or comparable code execution payloads.
run_python
ID:
call_9f8a2ce1import statistics
samples = [123.4, 128.1, 120.9, 131.7]
average = statistics.mean(samples)
print(f"Mean latency: {average:.2f} ms")Other arguments:
{"timeout": 45}Task Tracker (MOC Logs)
Use this when rendering `task_tracker` tool calls so planning/progress state remains consistent across products.
Command: RECONCILE DELIVERY REPORT
[1]
Validate file schema
[2]
Aggregate publisher metrics
[3]
Write QA summary
Cards, Badges, Table
Clickable Action Cards
Use this Home-modeled card pattern for primary navigation actions and app launch tiles. Includes default, hover/focus, selected, and disabled states.
Status Badges
pending
scheduled
assigned
leased
running
analyzing
success
error
cancelled
| ID | Name | Status |
|---|---|---|
| T-1023 | Daily Optimization | success |
| T-1024 | Supply Audit | running |
| T-1025 | Weekly Forecast | scheduled |
| T-1026 | Deal Sync | assigned |
| T-1027 | Archive Cleanup | cancelled |
Feedback States
Empty
No records yet. Start by creating your first job.
Loading
Processing request...
Error
Something failed. Check configuration and retry.