Design system
Mycodyne UI
Tokens, layout, and Vue components for marketing surfaces. Pair 3270 body type with system UI for chrome. Components are registered globally — use <MycoPanel> and siblings in any page SFC.
Principles
- Legibility hierarchy — UI caps and nav in --myco-ui ; long copy in IBM 3270.
- One surface — panels, accent strips, and glow read as a single instrument in both archive (light) and TTY (dark) themes.
- Tokens first — prefer CSS variables over raw hex in new work.
Foundations
Color
120-HQ reference strip plus semantic tokens. Archive mode uses cream field and plum chrome; terminal mode remaps the same variables to phosphor green.
Spectrum (reference)
--myco-creamCream canvas--myco-plumPlum chrome / body--myco-bg-panelPanel surface--myco-cyanPrimary accent--myco-cyan-dimDim accent--myco-amberGold highlight--myco-textBody text--myco-text-mutedMuted text--myco-borderBorder--myco-on-plumText on chrome- Raw ladder: --myco-spectrum-01 … --myco-spectrum-12
- Semantic aliases --myco-cyan / --myco-amber swap meaning in terminal theme — components stay unchanged.
Foundations
Typography
Two stacks: UI chrome (system sans) and body (IBM 3270). Root html sets base size and tracking; components map semantic roles to those tokens.
Font stacks
| Token | Use |
|---|---|
--myco-ui | Header, nav, buttons, captions — system sans, wide tracking. |
--myco-body | Paragraphs, lists, forms — IBM 3270 with monospace fallbacks. |
UI sample
System · navigation · buttons
Body sample
The quick brown fox jumps over 0123456789 — long-form and paragraphs.
Root defaults
Global html uses 20px type, 1.45 line-height, and 0.02em letter-spacing. Theme swaps only variables — markup stays the same in archive and TTY modes.
Component scale
Sample eyebrow // label
Body (3270): THE QUICK BROWN FOX JUMPS OVER 0123456789
Muted — secondary and legal-adjacent lines.
Lead — intro blurbs; capped width for readability.
Caption — ui micro label
Prose (inline patterns)
myco-code marks tokens and paths. In-copy links use global anchor styles — reserve MycoButton for primary actions. - MycoEyebrow — tag defaults to p .
- MycoHeading : display / page → h1 ; section → h2 ; subsection → h3 . Use tag="div" + presentation role for kit previews (single real h1 on this page).
- Prefer MycoText / MycoHeading on marketing pages; raw html inherits body font for markdown routes.
Foundations
Voice
Buyer-facing copy should be clearer than the chrome. Let the interface carry the fiction; let the message carry fit, scope, and trust.
Brand mode
Precise, institutional, and slightly diegetic. Use archive, directive, and sector language as surface flavor, not as a barrier to understanding.
Buyer mode
Lead with capability, process, deliverables, and next steps. Assume the reader is comparing partners and wants answers fast.
Say
- Use short sentences and concrete capabilities.
- Describe software, AI, hardware, media, web, and props plainly.
- Explain the path: request, scope, milestones, build, handoff.
- Stress technical depth and presentation value when relevant.
Avoid
- Startup hype, bland agency filler, and overpromises.
- Jokes or irony that undermine trust.
- Named stacks in hero copy when they do not change fit.
- Claims of proof, credits, or case studies that are not public.
- Homepage copy should filter out cheap, fast, template-only work without sounding hostile.
- Public-facing copy stays capability-level for now; save stack detail for later proof or process pages.
Foundations
Spacing
Four-step scale used for padding, gaps, and vertical rhythm. Bars sit in a track so small tokens stay visible.
--myco-space-1--myco-space-2--myco-space-3--myco-space-4- 1 tight · 2 control gap · 3 panel padding · 4 section rhythm
Components
Panel
Primary container: border, panel background, optional top accent strip, optional CRT scanlines.
accent="default"
Standard accent strip.
accent="spectrum"
Full ladder gradient strip.
accent="none"
No top accent.
scan
Horizontal scanline overlay.
tight
Reduced padding only.
- tag — root element ( div , section , article ).
- Scanlines use --myco-scanline-stripe (theme-aware).
Components
Buttons
Single panel showing core button patterns. Primary carries intent, ghost stays secondary, and disabled states remain visibly non-interactive.
Core
Sizes
Form actions
Hero pair
Disabled
Decorative
- variant : primary | ghost
- size : md (default) | sm
- href → anchor; type applies to button only ( button | submit ).
- disabled — native button uses disabled ; with href , a non-interactive span is rendered ( aria-disabled ).
- native=false renders span (unless href is set).
Components
Badge & callout
Inline status chips and bordered notes.
- MycoCallout : variant="note" | "warning"
Components
Stack
Flex helper for demos and form-like vertical rhythm.
Column gap 2
- gap : 1 – 4 · horizontal for row + wrap
Components
Doc section
Layout primitive for this style kit: heading, description, preview well, usage notes. The dashed region below is the preview slot.
This paragraph sits in the default slot — the same place every other component demo above renders. Usage notes for this component appear under “Usage” in the outer card (not inside the dashed well).
- Props: group , title , description , component , surface (card chrome around the whole block)
- Default slot = preview; named slot docs = implementation notes.
Patterns
Inline links
Default anchor styles from global CSS — use inside body copy, not for primary actions.
Example: in-copy link (hover for state).