This document serves as the official technical reference for building and maintaining the ARC Codex dashboard and service pages. It ensures a consistent "Floating Island" aesthetic across the entire ARCHLab ecosystem.
Our glassmorphism effect relies on three specific CSS classes defined in the global Administration > Stylesheet.
This is the "frosted glass" pane that houses service information.
| Property | Value | Purpose |
| Translucency | rgba(255, 255, 255, .08) | provides a white tint without blocking the background.|
| Diffusion backdrop-filter | blur(15px) | creates the "frosted" look by blurring objects behind it. |
| Vibrancy | saturate(150%) | prevents the blur from looking "muddy" by boosting underlying colors. |
| Definition | border: 1px solid rgba(255, 255, 255, .15) | acts as a "rim light" to define the island's edge. |
|
These elements are designed to feel like physical layers of glass that react to the user.
The Curve: We use cubic-bezier(.165, .84, .44, 1). Unlike a standard "linear" animation, this curve makes the button "pop" up quickly and settle smoothly, simulating physical weight.
The Lift: On :hover, the button uses translateY(-5px). This creates a parallax effect where the button moves independently of the main tile.
The Easter Egg (.runaway)
Purpose: Assigned to placeholder links that are not yet functional.
Performance: Uses will-change: transform to ensure the "running away" animation is handled by the GPU, keeping the page frame rate high.
📋 Component Templates
To add new services, copy the HTML snippets below into a Markdown page. Note: Always wrap your tiles in the "Grid Container" to ensure they are responsive.
The Grid Container (Required)
Place this at the start and end of your tile group.
HTML
Template: Service Tile (Split Buttons)
Use this for services requiring both a documentation Guide and an external Site link.
HTML
Template: Action Tile (Single Button)
Use this for simple navigation like Newsletters or Directories.
HTML
Template: Service Hub Tile (single button)
🎨 Branding Palette
To keep the dashboard organized, use these standard icon colors:
Category Hex Code Usage
Media #7b8ff7 Jellyfin, Navidrome, Plex
System #cfd8dc Admin, Terminal, Docker
Social #ffffff Matrix, Chat, Signal
Gaming #81c784 Minecraft, Game Servers
Alerts #ffb74d News, Status, Important
🛠️ Maintenance & Troubleshooting
Image not rendering? Ensure the image is uploaded to Media Assets and starts with a leading slash (e.g., /my-image.png).
Grid layout broken? Ensure every opening <div> has a corresponding closing </div>.
Animation stuttering? Reduce the number of tiles on a single page to under 12 to maintain backdrop-filter performance on older devices.