# Design Language for layer2.id ## Aesthetics and Tone layer2.id channels a botanical aesthetic — organic growth forms, natural textures, and the patient elegance of living systems applied to Layer-2 blockchain identity. The site presents digital identity as something that grows organically, like a plant developing from seed to mature form, rather than something manufactured or computed. Each identity feature is framed as a living element in a digital ecosystem that needs nurturing, rooting, and time to flourish. Inspiration draws from Victorian botanical illustration plates, the taxonomy displays of natural history museums, the terrarium aesthetic of enclosed living systems, and the Korean tradition of bonsai cultivation (분재). The tone is luxurious — identity presented as a premium, carefully cultivated asset worthy of meticulous attention, like a rare botanical specimen under glass. The dashboard layout organizes identity facets into a curated control panel where each metric and feature is a specimen in the user's personal identity garden. ## Layout Motifs and Structure The layout uses a **dashboard** architecture — a structured control panel with defined zones for different identity metrics and management functions, organized for at-a-glance monitoring and deeper exploration. **Dashboard Architecture:** - Top bar: 64px fixed header with identity logo, user indicator, and notification area - Sidebar: 240px left panel with navigation categories styled as a botanical taxonomy tree - Main zone: Flexible grid (right of sidebar) using CSS Grid, columns: repeat(auto-fill, minmax(300px, 1fr)), gap: 20px - Widget cards: Self-contained dashboard modules with consistent 24px padding, 12px border-radius - Max viewport utilization: dashboard fills available screen with scroll only in the main content zone **Section Sequence:** 1. **Canopy View:** Top header bar with identity summary — a single row showing identity health score, connected chains, and verification status as botanical health indicators 2. **Root System:** Sidebar taxonomy listing identity categories — personal, professional, on-chain, social — as branching tree navigation 3. **Growth Bed:** Main dashboard grid with identity feature cards displayed as botanical specimen cards with data fields 4. **Greenhouse:** Featured section (spans full main width) for identity verification flow, styled as a terrarium environment 5. **Soil Layer:** Footer integrated into dashboard bottom with system status and data freshness timestamps ## Typography and Palette **Typography:** - **Headlines:** "DM Serif Display" (Google Fonts) — elegant serif with botanical-illustration authority at 1.8rem-2.8rem, weight 400. Its classical proportions evoke specimen labels and natural history museum signage. - **Body Text:** "Nunito" (Google Fonts) — warm rounded sans at 0.95rem, weight 400, line height 1.65. Friendly and readable for dashboard data descriptions. - **Data Values:** "Azeret Mono" (Google Fonts) — distinctive monospace at 0.85rem for identity addresses, hash values, and numerical metrics. - **Labels:** "Nunito" at 0.7rem, weight 700, uppercase, letter-spacing 0.06em for widget headers and category markers. **Color Palette:** - **Burnt Terracotta:** #c06030 — warm burnt orange for primary accents, active states, and key metrics - **Leaf Dark:** #2a4a28 — deep green for sidebar background and primary text on light surfaces - **Parchment Warm:** #f8f0e0 — warm cream for main content background - **Moss Light:** #c0d8b0 — soft green for card backgrounds and success indicators - **Bark Deep:** #4a3020 — rich brown for secondary text and card borders - **Bloom Coral:** #e08060 — warm coral for notification badges and alerts - **Soil Rich:** #3a2a1a — dark earth for dashboard header and sidebar hover states - **Fern Pale:** #e8f0e0 — pale green for alternating card backgrounds and hover highlights ## Imagery and Motifs **Mixed-Media Botanical Specimens:** Identity features illustrated as botanical specimen cards combining line art (thin pen-style SVG drawings of leaves, roots, seeds) with data overlay — identity metrics positioned where a botanist would note species data (height, growth rate, health), creating a taxonomy card for each digital identity attribute. **Geometric Shape Growth Indicators:** Identity health and completeness shown as geometric shapes that grow — circles that fill (conic-gradient progress), hexagons that gain sides (SVG morph), and branching tree diagrams (SVG paths) that extend new branches as identity coverage expands. Each shape uses Burnt Terracotta for filled portions and Moss Light for unfilled. **Skeleton-Loading Botanical Growth:** Loading states use skeleton screens where placeholder shapes animate as growing botanical forms — a stem extends upward, leaves unfurl from the stem, and data fields bloom into place as content loads. The skeleton uses Fern Pale for the growing shapes against Parchment Warm background, with a pulse animation (opacity 0.4 to 0.8, 1.5s ease-in-out infinite). **Terrarium Glass Panels:** The Greenhouse section and featured identity cards use a glass-terrarium effect — border: 1px solid rgba(42,74,40,0.2), background: rgba(232,240,224,0.6), backdrop-filter: blur(8px), with a subtle green tint suggesting viewing through greenhouse glass. **Root Network Connections:** Lines connecting related identity elements use organic curved SVG paths (quadratic beziers) rather than straight lines, styled as root tendrils in Leaf Dark at 0.3 opacity, suggesting underground connections between identity components. ## Prompts for Implementation Build the page as a botanical identity dashboard. The layout uses CSS Grid: grid-template-columns: 240px 1fr for sidebar + main, grid-template-rows: 64px 1fr auto for header + content + footer. Main content zone uses a nested grid: repeat(auto-fill, minmax(300px, 1fr)). Specimen cards: each card has a subtle botanical border (1px solid Bark Deep at 0.2 opacity), background alternating between Parchment Warm and Fern Pale, padding: 24px, border-radius: 12px. A small SVG botanical line drawing (40x40px, stroke: Leaf Dark, fill: none) sits in the top-left corner. Skeleton-loading growth: @keyframes growStem { from { height: 0; } to { height: 100%; } } applied to a thin (2px) vertical div. Leaf elements use @keyframes unfurl { from { transform: scale(0) rotate(-30deg); } to { transform: scale(1) rotate(0deg); } } with staggered animation-delay. Geometric progress: conic-gradient(Burnt Terracotta var(--progress), Moss Light var(--progress)) on circular containers creates pie-chart-style completion indicators. Update --progress via JavaScript based on data attributes. Root connections: SVG with position: absolute, pointer-events: none. Paths use cubic-bezier curves with stroke: #2a4a28, stroke-opacity: 0.3, stroke-width: 1.5, fill: none. Sidebar taxonomy: nested ul/li structure with CSS-drawn branch lines (border-left: 1px solid Bark Deep, pseudo-element horizontal connectors) creating a tree diagram navigation. AVOID: Generic dashboard templates, aggressive upsell widgets, and dense data tables without visual character. Let the botanical metaphor and luxurious tone transform identity management into a cultivated, premium experience. ## Uniqueness Notes 1. **Botanical metaphor for digital identity:** Framing identity as a living, growing organism creates emotional connection with what is typically abstract technical infrastructure. 2. **Dashboard as identity garden:** The control panel layout reframes monitoring as cultivation, where each widget is a specimen to tend. 3. **Skeleton-loading as botanical growth animation:** Loading states that mimic plant growth make waiting feel like watching something come alive. 4. **Specimen card data display:** Identity attributes formatted as botanical taxonomy cards bridge natural history aesthetics with blockchain data. 5. **Root network connection visualization:** Organic curved lines between identity elements visualize the interconnected nature of digital identity components. **Seed/Style:** aesthetic: botanical, layout: dashboard, typography: rounded-sans, palette: burnt-orange, patterns: skeleton-loading, imagery: mixed-media, motifs: geometric-shapes, tone: luxurious **Avoided Overused Patterns:** corporate aesthetic (76%), parallax patterns (85%), asymmetric layout (85%), mono typography (86%), warm palette at surface level (89%), friendly tone (76%), minimal imagery (84%). This design uses botanical aesthetic, dashboard layout, burnt-orange palette, mixed-media imagery, and luxurious tone.