Abyss Teal
#75b6b5Teal text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
Tableland
tableland.xyzWebsite preview
The design language
Tableland operates as a dark-mode developer surface punctuated by a single painted moment: a lavender-coral hero landscape that gives way to a calm, infrastructure-feeling interior. Typography is geometric humanist (Poppins) with weight 300 doing the heavy lifting on display copy, giving headlines a quiet, engineered feel rather than a marketing punch. A muted teal (#75b6b5) carries all interactive voice — nav, icons, links, learn-more affordances — while a single vivid mint green (#0be291) is reserved exclusively for emphasized headings, creating a clear hierarchy where teal navigates and green signals the primary read. Surfaces are layered in near-black steps (page → card → elevated), with cards and buttons rounded modestly (8–16px) and never pill-shaped except for tags and icon containers. The visual signature is the contrast between the soft painterly hero and the hard-edged terminal aesthetic below it — a database that feels both approachable and uncompromising.
Color palette
brand
accent
Mint Beacon
#0be291Green text accent for links, tags, and emphasized short phrases. Do not promote it to the primary CTA color
Coral Ember
#f4706bDecorative icon accent — used sparingly in nav icons and the hero illustration's mountain highlights. Warm counterpoint to the cool teal/mint palette
Lavender Mist
#e4cbf2Hero atmosphere — the soft lavender backdrop of the hero section and mountain illustration sky. Only used in the hero band; never in component surfaces or UI chrome
neutral
Void
#101e1ePage canvas and primary action background — the base layer of the dark theme and the fill of filled CTA buttons (Enter Studio, Discord). Slightly green-tinted black rather than pure neutral
Carbon
#1a1a1aDeep surface — code block backgrounds, terminal interiors, darkest elevated layers. One step below void for maximum contrast terminal aesthetic
Slate
#162929Mid surface and hairline borders — card backgrounds, button borders, dividers. Bridges between void and the lighter elevated steps
Graphite
#3b4949Elevated card surface and hover-state fills — the topmost card tier, used for testimonial cards and hover backgrounds
Fog
#718b8bMuted text and inactive nav icons — body helper text, inactive nav glyphs, secondary metadata. The de-emphasized reading layer
Ash
#e5e7ebHairline borders and dividers — the universal 1px border color used across nav, cards, icons, and structural separators. Primary border token
Paper
#ffffffPrimary text and icon fill — all high-emphasis body copy, headings, and filled icon shapes. The top of the text contrast scale
Typography
Type scale
Major Second (1.125) · 16px basedisplay
48px · 400 · 1The quick brown fox jumps
heading-lg
30px · 400 · 1.2The quick brown fox jumps
heading
24px · 400 · 1.33The quick brown fox jumps
heading-sm
22px · 300 · 1.43The quick brown fox jumps
subheading
18px · 300 · 1.5The quick brown fox jumps
body
16px · 400 · 1.56The quick brown fox jumps
body-sm
14px · 300 · 1.45The quick brown fox jumps
caption
12px · 300 · 1.33The quick brown fox jumps
Font samples use locally available fonts and fallbacks.
Primary typeface
Poppins
- Weights
- 300, 400, 500, 700
- Sizes
- 12, 14, 16, 18, 22, 24, 30, 48
- Line height
- 1.00–1.78
- Letter spacing
- normal at all sizes; no tightening observed on large display
- Fallback
- Nunito Sans or DM Sans as system-friendly alternatives; for the same light-weight display feel, Manrope (300) is the closest match.
All UI and display copy. Weight 300 dominates display and hero headings, creating an unusually quiet headline voice — the database speaks softly. Weight 400 for body and nav, 500 for button labels and emphasized metadata, 700 reserved for rare structural emphasis.
Additional typeface
monospace
- Weights
- 300
- Sizes
- 12px
- Line height
- 1.33
- Fallback
- JetBrains Mono, IBM Plex Mono, or Fira Code
Code snippets, terminal output, SQL examples, and inline technical tokens. System monospace at a single small size — functional, not decorative.
Spacing & shape
Spacing
- Density
- comfortable
- Base unit
- 8px
- Max width
- 1200px
- Section gap
- 128px
- Card padding
- 24px
- Element gap
- 16px
Border radius
tags
9999pxcards
8pxbuttons
4pxcode-blocks
4pxelevated-cards
16pxicon-containers
9999pxSpacing scale
4px8px12px16px20px24px32px40px73px80px128px144pxGuidelines
Do
- Use Poppins 300 for all display and section headings — the whisper-weight is the signature voice
- Reserve #0be291 (mint) exclusively for emphasized section headings; never apply it to body, links, or backgrounds
- Use #75b6b5 (teal) for all interactive voice — nav links, icon strokes, learn-more affordances
- Layer surfaces using the four-step scale: #101e1 (page) → #162929 (mid) → #3b4949 (elevated card) → #1a1a1a (terminal)
- Use 4px radius for buttons and code blocks, 8px for content cards, 16px for elevated testimonial cards, 9999px only for tags and icon containers
- Center-align section headings and give each section at least 128px vertical breathing room
- Keep the lavender hero as the single painted moment — do not introduce gradients or illustrations into the dark interior
Don’t
- Do not use weight 600+ on display headings — the light-weight restraint IS the brand voice
- Do not apply #0be291 to links, icons, or backgrounds — it loses hierarchy when scattered
- Do not use pill radius (9999px) on buttons or cards — pills are reserved for tags and icon containers only
- Do not introduce shadows or elevation effects — the design relies on surface color steps, not depth
- Do not use pure black (#000000) — all darks are slightly green-tinted (#101e1, #1a1a1a, #162929)
- Do not add accent colors beyond the existing four (teal, mint, coral, lavender) — the palette is intentionally narrow
- Do not use more than one chromatic color per UI region — teal for interaction, mint for emphasis, coral only in the hero illustration
Components
Primary CTA Button (filled)
Main conversion action — 'Enter Studio', 'Discord'Filled dark button on dark surface: #101e1 background, #ffffff text, 4px radius, 12px vertical × 24px horizontal padding. Poppins 500 at 14px. Arrow glyph (→) follows label, rendered in the same white. No border. Hover lifts to #1a1a1a or adds subtle 1px #e5e7eb outline.
Ghost Nav Button
Secondary action in nav bar — 'Enter Studio' in headerOutlined button: transparent or #101e1 background, 1px #e5e7eb border, #ffffff text, 9999px radius (pill). Poppins 500 at 14px. 8px vertical × 20px horizontal padding. Inverts on hover (background becomes #e5e7eb, text becomes #101e1e).
Nav Link
Primary navigation — GitHub, Docs, Blog, RigsText-only nav item, no underline. Poppins 400 at 14px, #75b6b5 (teal). 8px vertical padding. Hover: opacity 0.7 or shifts to #0be291. No background, no border.
Code Terminal Block
SQL example, command preview, developer-facing syntaxDark terminal panel: #1a1a1a background, 4px radius, 1px #162929 border. Monospace 12px text, #ffffff on dark. 24px internal padding. Optional top bar with traffic-light dots (#f4706b, #0be291, #75b6b5). The terminal is always full-width within its container.
Feature Card
Product feature blocks — SQLite, On-chain security, Portable, Multi-chain, PricingFlat dark card with no background fill (sits directly on #101e1 canvas). Icon container is 32px circle with 1px #75b6b5 border, icon stroke in #75b6b5 or #0be291. Heading Poppins 500 at 18px, #ffffff. Body Poppins 400 at 14px, #718b8b. 'Learn more' link in #75b6b5 with underline. No card border or background — the negative space IS the card.
Testimonial Card
Community quotes — Twitter-style cards in 'Join the community' sectionElevated card: #3b4949 background, 1px #e5e7eb border, 16px radius, 24px padding. Avatar 32px rounded square with 1px #e5e7eb border, placed top-left. Display name Poppins 500 at 14px #ffffff beside @handle in #718b8b. Quote body Poppins 400 at 14px #ffffff with natural line wrapping. Cards may overflow horizontally with peek effect on the section edges.
Section Heading (mint)
Emphasized section titles — 'Join the community', key feature headersPoppins 300 at 30px, #0be291. Centered alignment. The mint green is the only chromatic heading color; it signals the most important reading on the page. No underline, no decoration.
Section Heading (white)
Standard section titles — 'Build on decentralized data without the headache'Poppins 300 at 30px, #ffffff. Centered. The default heading voice — quiet, engineered, not marketing-loud.
Display Headline
Hero headline — 'The decentralized cloud database.'Poppins 300 at 48px, line-height 1.0, #1a1a1a on the lavender hero. The word 'decentralized' is bolded (weight 700) in the same color for contrast within the whisper-weight line. Small eyebrow label above in Poppins 500 at 12px uppercase #718b8b with 'ANYWHERE' bolded in #1a1a1a.
Body Paragraph
Standard explanatory copyPoppins 400 at 16px, line-height 1.56, #ffffff. Max-width ~640px for readable line length. No drop cap, no first-line indent.
Helper / Metadata Text
Captions, timestamps, secondary metadataPoppins 400 at 12px, #718b8b. Used for @handles, section subtitles, footnotes, and de-emphasized metadata.
Icon Container (circular)
Wrapping small feature/inline icons32px–40px circle, 1px #75b6b5 or #e5e7eb border, transparent or #101e1 fill. Icon inside is 1.5px stroke, #75b6b5 or matching border color. Used for feature card headers and inline section markers.
Hero Landscape Illustration
Brand identity artwork — the mountain peaks in the heroIllustrated mountain ridge in #f4706b (coral) with darker shadow planes, sitting on a soft #e4cbf2 to #f5d4e8 gradient sky. Flat illustration style, no outlines, geometric facets. Anchored to the right side of the hero, bleeding off the right edge. The illustration is the brand signature — no other decorative graphics are used in the dark interior.
Surfaces & elevation
Level 0
Canvas
#101e1Page background — the base dark layer across all interior sections
Level 1
Mid Surface
#162929Subtle card backgrounds and structural borders — bridges void and elevated
Level 2
Elevated Card
#3b4949Testimonial and elevated content cards
Level 3
Terminal
#1a1a1aCode blocks and deepest UI elements — the darkest tier for maximum contrast
The design uses no shadows or blur effects. Depth is communicated entirely through a four-step surface color scale (#101e1 → #162929 → #3b4949 → #1a1a1a) and 1px #e5e7eb hairline borders. This flat, hard-edged approach reinforces the infrastructure/database identity — nothing floats, everything sits precisely on a surface.
Layout & imagery
Layout
Page is max-width 1200px centered with generous horizontal padding (80px on desktop). The hero is split-layout: left column holds eyebrow label, display headline, body copy, and CTA; right column is dominated by the mountain illustration bleeding off the right edge. Below the hero, the page alternates into full-width dark bands with centered headings and either 2-column or 4-column content grids. The 'Build on decentralized data' section uses a 4-column equal grid for feature cards (SQLite, On-chain security, Portable, Multi-chain), then drops to a single-column full-width block for Pricing. The 'Join the community' section breaks the grid with a horizontally scrolling testimonial card carousel that peeks cards at the edges. Section gaps are 128px, giving each dark band room to breathe. Navigation is a minimal top bar: logo left, 4 text links plus 1 ghost pill button right, 64px height, 1px bottom border in #e5e7eb.
Imagery
The site has exactly one illustrative element: a painted mountain landscape in the hero section, rendered in flat geometric facets of coral (#f4706b) with soft gradient sky (#e4cbf2 to #f5d4e8). No photography, no 3D renders, no decorative graphics anywhere in the dark interior. Icons throughout are simple line-drawn strokes in 1.5px weight, using teal (#75b6b5) as the standard color. The visual language is deliberately sparse: the hero illustration is the only emotional moment, and the rest of the page communicates through type, surface color, and code. This restraint signals developer credibility — the product is the content, not the decoration.
Design notes
Agent Guide
Quick Color Reference: - text: #ffffff (primary), #718b8b (muted) - background: #101e1e (canvas), #3b4949 (elevated card), #1a1a1a (terminal) - border: #e5e7eb (hairline), #162929 (structural) - accent: #75b6b5 (teal — interactive voice), #0be291 (mint — heading emphasis only) - primary action: #101e1e (filled action) 3-5 Example Component Prompts: 1. Hero section: lavender (#e4cbf2) background, split layout. Left column: eyebrow 'READ+WRITE FROM ANYWHERE' at Poppins 500 12px uppercase #718b8b (with 'ANYWHERE' bold in #1a1a1a). Headline 'The decentralized cloud database.' at Poppins 300 48px #1a1a1a, line-height 1.0, with 'decentralized' at weight 700. Body 16px Poppins 400 #1a1a1a. Primary button: #101e1e fill, white text, 4px radius, 12px 24px padding, Poppins 500 14px, with → arrow. Right column: coral (#f4706b) geometric mountain illustration bleeding off right edge. 2. Feature card row: 4-column grid on #101e1e canvas, 40px column gap. Each card has no background fill. Icon container: 32px circle, 1px #75b6b5 border, teal icon stroke inside. Heading Poppins 500 18px #ffffff. Body Poppins 400 14px #718b8b. 'Learn more' link in #75b6b5 with underline, Poppins 400 14px. 3. Testimonial card carousel: section background #101e1e, section heading 'Join the community' at Poppins 300 30px #0be291 centered. Cards: #3b4949 background, 1px #e5e7eb border, 16px radius, 24px padding. Avatar 32px square with 1px #e5e7eb border. Display name Poppins 500 14px #ffffff, @handle in #718b8b. Quote Poppins 400 14px #ffffff. Cards overflow horizontally with edge peek effect. 4. Code terminal block: #1a1a1a background, 4px radius, 1px #162929 border, 24px padding. Monospace 12px white text on dark. Top bar optional with three 8px circles: #f4706b, #0be291, #75b6b5. Full-width within its parent container. 5. Ghost nav button: transparent background, 1px #e5e7eb border, 9999px pill radius, #ffffff text Poppins 500 14px, 8px 20px padding. Inverts on hover to #e5e7eb fill with #101e1e text.
Similar brands
The Graph
Same dark-mode developer infrastructure aesthetic with a single hero illustration and quiet, weight-300 display headlines
Filecoin
Dark canvas with an illustrated landscape hero, mint-green accent for emphasized headings, and terminal-style code blocks
Ceramic Network
Near-black surface stack with a four-step elevation scale, teal interactive voice, and flat geometric illustration in the hero
IPFS
Developer-facing dark surface with a single brand-color moment in the hero, monospace code examples, and whisper-light Poppins-style headlines
Take this style into your next project.
Use the design exports or connect Musterlab to your AI.
