Visual Design System
A living reference for Andromeda’s visual language.
Components
Browse core atoms and composite molecules via tabs.
Atoms
Smallest building blocks: typography, links, buttons, labels, captions, form inputs.
Typography primary
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Andromeda is a decentralized bookstore of tokenized titles.
Fonts: Merriweather + Inter.
Designed for discovery & long‑form reading.
Typography secondary
Heading One
Heading Two
Heading Three
Heading Four
Heading Five
Heading Six
Andromeda is a decentralized bookstore of tokenized titles.
Fonts: Merriweather + Inter.
Designed for discovery & long‑form reading.
Links
Containers primary
Layout wrapper that constrains width and applies gutters.
Small container
max-w-xl with small padding.
Medium container
max-w-3xl with medium padding.
Containers bordered
Card-like containers with integrated border and background.
Bordered container
Useful for sections that should stand out.
Boxes subtle
Low-level layout primitive with background, border, and radius.
Plain content
Default subtle box with border-color and bg-primary.
Use Box to group related elements consistently.
Boxes elevated
Elevated boxes for emphasis or interactive regions.
Elevated box
Shadow and rounded corners provide hierarchy.
Plain box without border or background.
Buttons
Icons
States
Labels primary
Solid
Soft
Outline
Ghost & Pill
Labels secondary
Solid
Soft
Outline
Ghost & Pill
Badges primary
Compact inline labels for status, type, or counts.
Soft
Solid
Outline & pill
Badges secondary
Secondary text contrast for darker contexts.
Soft
Solid
Outline & pill
Chips primary
Interactive pills for filters, tokens, and selections.
Default
Tones
Removable
Chips secondary
Secondary text contrast for chips.
Default
Tones
Removable
Menu items primary
Interactive menu entries for dropdowns and command palettes.
Menu items secondary
Neutral menu items with secondary text color.
Tooltips primary
Hover or focus to reveal contextual labels.
Tooltips secondary
Secondary tooltip styling and bottom placement.
Toasts primary
Inline feedback messages for transient status updates.
Toasts soft
Soft variant toasts with dismiss actions.
Captions primary
Tiny caption size (xs)
Centered caption
Right-aligned caption
Captions secondary
Tiny caption size (xs)
Centered caption
Right-aligned caption
Avatars
User representation via image or initials fallback.
ELFHGPHIDividers
Subtle separators for grouping content and sections.
Basic
Above
Below
With label
Breadcrumbs
Hierarchical navigation trail with current page emphasis.
Basic
Short
Spacers
Invisible spacing helpers built on the spacing scale.
Vertical spacing
Above
Below
Horizontal spacing
Left
Right
Logo
Brand mark variations across size and color contexts.
AndromedaAndromeda
AndromedaAndromedaBrandImages
Framed images with sizes, rounded corners, and optional labels.
ImageImageCover imageImageProgress bars
Determinate and indeterminate progress feedback across variants.
Primary variant
Secondary variant
Spinners
Animated loading indicators for transient background tasks.
Primary variant
Secondary variant
With accessible label
Skeletons
Structural placeholders approximating final content layout.
Primary variant
Secondary variant
With accessible label
Price tags
Current price display with optional previous value & trend indicator.
Primary variant
Secondary variant
Ratings
Star-based rating display with sizes and variants.
Primary variant
Secondary variant
Form primary
Text inputs & search.
Checkboxes.
Dropdowns.
Toggles.
Radio buttons.
Plan
Preferences
Text areas.
Form secondary
Text inputs & search.
Checkboxes.
Dropdowns.
Toggles.
Radio buttons.
Plan
Preferences
Text areas.