Inspiration first, drift never.

Quiet Lattice

Calm, layered surfaces with soft micro-dividers and spacious rhythm.

TailwindShadcn UIBalanced densitystable

ID: quiet-lattice

Version: v0.1.1

Updated: 2026-01-02

Get JSON

Constraints

density:balancedstacks:tailwind,shadcntags:wellness,calm,minimal

Token summary

6 palette tokens · 6 spacing steps · balanced density

Stability cue

stable contract · enforce tokens & guardrails

Token boundaries (hard limits)

Density in {balanced}Palette tokens = 6Accent usage <= 1 primary per section

Pair with a structure

Choose the execution surface.

Structures define the required slots. Pair this visual language with a structure when calling `POST /api/emit` to get deterministic output targets.

Structure

Dashboard

Full-width app shell with persistent sidebar navigation, filter toolbar, alert banner, stats tiers, data tables, charts, and right-rail insights.

Structure

SaaS

Marketing page with hero, trust strip, metrics, feature grid, integrations, pricing, case study, FAQ, and CTA.

Structure

Editorial

Publication layout with masthead, nav, featured story, highlights, trending, resources, archive, and newsletter signup.

Structure

Portfolio

Personal or studio portfolio with hero, work gallery, services, testimonials, and contact call-to-action.

Structure

Support

Helpdesk workspace with ticket inbox, ticket detail, customer context, and response tools.

Token sandbox

Component Preview

See how buttons, cards, and forms look with this language's tokens applied.

Component Previewserenebalanced density

signature55f5d2fb

Buttons

Tokens applied

Card

sereneActive

Dashboard Overview

A sample card showing typography, badges, and layout rhythm.

Form Elements

Email address

Send me updates

Badges

AccentHighlightOutline

Alert

Quiet Lattice Notice

New

Tokens applied to emphasize clear, low-noise messaging.

Input Group

Palette

#F7F4EE

#1B2A2F

#4FA39B

#D9C8B4

#EFE8DD

#9BCAC4

Guardrail cues

Density: balanced
Buttons: primary · secondary · ghost · highlight
Layout: button row, card, form fields

Language brief

Intent

Quiet Lattice suits wellness dashboards and calm productivity tools. It leans on soft surfaces, subtle borders, and a restrained teal accent to encourage focus.

Tokens

Background: #F7F4EE
Ink: #1B2A2F
Accent: #4FA39B
Muted: #D9C8B4
Surface: #EFE8DD
Mist: #9BCAC4
Radius: 24px
Divider: 1px solid rgba(27, 42, 47, 0.12)

Layout cues

Sections float inside rounded containers with 32px padding.
Use thin dividers and low-contrast charts.
Buttons are capsule-shaped with soft teal fill.

Shadcn UI snippet

<Card className="rounded-3xl border-muted bg-white/80">
  <CardHeader>
    <CardTitle>Quiet workspace</CardTitle>
    <CardDescription>Soft rhythm, clean labels, calm surface tones.</CardDescription>
  </CardHeader>
  <CardContent>
    <div className="flex items-center justify-between rounded-2xl border border-muted p-4">
      <span className="text-sm text-muted-foreground">Calm focus mode</span>
      <Button size="sm">Enable</Button>
    </div>
  </CardContent>
</Card>

Ledger overview

Quiet structure with dependable hierarchy.

Compliance status

Density: balanced

Agent snapshot

{
  "id": "quiet-lattice",
  "name": "Quiet Lattice",
  "version": "v0.1.1",
  "stability": "stable",
  "constraints": [
    "density:balanced",
    "stacks:tailwind,shadcn",
    "tags:wellness,calm,minimal"
  ],
  "tokenSummary": "6 palette tokens · 6 spacing steps · balanced density",
  "tokenSet": {
    "palette": {
      "paper": "#F7F4EE",
      "ink": "#1B2A2F",
      "accent": "#4FA39B",
      "highlight": "#D9C8B4"
    },
    "colorRoles": {
      "light": {
        "background": "#F7F4EE",
        "surface": "#F7F4EE",
        "surfaceAlt": "#D9C8B4",
        "surfaceRaised": "#D9C8B4",
        "overlay": "#D9C8B4",
        "border": "#D9C8B4",
        "borderSubtle": "#D9C8B4",
        "borderStrong": "#1B2A2F",
        "text": "#1B2A2F",
        "textMuted": "#D9C8B4",
        "textDisabled": "#D9C8B4",
        "link": "#4FA39B",
        "accent": "#4FA39B",
        "accentText": "#F7F4EE"
      },
      "dark": {
        "background": "#1B2A2F",
        "surface": "#1B2A2F",
        "surfaceAlt": "#D9C8B4",
        "surfaceRaised": "#D9C8B4",
        "overlay": "#D9C8B4",
        "border": "#D9C8B4",
        "borderSubtle": "#D9C8B4",
        "borderStrong": "#F7F4EE",
        "text": "#F7F4EE",
        "textMuted": "#D9C8B4",
        "textDisabled": "#D9C8B4",
        "link": "#4FA39B",
        "accent": "#4FA39B",
        "accentText": "#1B2A2F"
      }
    },
    "colorMode": "light",
    "colorStates": {
      "light": {
        "surface": {
          "hover": "#D9C8B4",
          "active": "#4FA39B",
          "disabled": "#F7F4EE"
        },
        "border": {
          "default": "#D9C8B4",
          "focus": "#4FA39B",
          "disabled": "#D9C8B4"
        },
        "text": {
          "default": "#1B2A2F",
          "muted": "#D9C8B4",
          "disabled": "#D9C8B4"
        },
        "accent": {
          "hover": "#4FA39B",
          "active": "#4FA39B"
        }
      },
      "dark": {
        "surface": {
          "hover": "#D9C8B4",
          "active": "#4FA39B",
          "disabled": "#1B2A2F"
        },
        "border": {
          "default": "#D9C8B4",
          "focus": "#4FA39B",
          "disabled": "#D9C8B4"
        },
        "text": {
          "default": "#F7F4EE",
          "muted": "#D9C8B4",
          "disabled": "#D9C8B4"
        },
        "accent": {
          "hover": "#4FA39B",
          "active": "#4FA39B"
        }
      }
    },
    "colorRamps": {
      "neutral": [
        "#F7F4EE",
        "#F7F4EE",
        "#D9C8B4",
        "#D9C8B4",
        "#D9C8B4",
        "#D9C8B4",
        "#D9C8B4",
        "#1B2A2F",
        "#1B2A2F",
        "#1B2A2F"
      ],
      "accent": [
        "#4FA39B",
        "#4FA39B",
        "#4FA39B",
        "#4FA39B",
        "#4FA39B",
        "#4FA39B",
        "#4FA39B",
        "#4FA39B",
        "#4FA39B",
        "#4FA39B"
      ]
    },
    "semantic": {
      "success": "#16a34a",
      "warning": "#f59e0b",
      "info": "#4FA39B",
      "danger": "#dc2626",
      "muted": "#D9C8B4"
    },
    "typography": {
      "display": {
        "family": "Playfair Display, 'Inter', system-ui, sans-serif",
        "weight": 600,
        "lineHeight": 1.2,
        "letterSpacing": "0em",
        "casing": "title"
      },
      "body": {
        "family": "Inter, system-ui, sans-serif",
        "weight": 400,
        "lineHeight": 1.5,
        "letterSpacing": "0em",
        "casing": "sentence"
      },
      "mono": {
        "family": "IBM Plex Mono, ui-monospace, SFMono-Regular, Menlo, monospace",
        "weight": 500,
        "lineHeight": 1.4,
        "letterSpacing": "0em"
      },
      "scale": {
        "xs": 12,
        "sm": 14,
        "md": 16,
        "lg": 18,
        "xl": 20,
        "2xl": 24,
        "3xl": 30,
        "4xl": 36,
        "5xl": 48,
        "6xl": 60
      }
    },
    "space": {
      "xs": 4,
      "sm": 8,
      "md": 12,
      "lg": 16,
      "xl": 24,
      "2xl": 32
    },
    "radius": {
      "sm": 16,
      "md": 20,
      "lg": 24,
      "xl": 32
    },
    "shadow": {
      "soft": "0 10px 26px rgba(27, 42, 47, 0.12)",
      "hard": "0 0 0 1px rgba(27, 42, 47, 0.12)"
    },
    "border": {
      "width": {
        "thin": 1,
        "thick": 2
      },
      "style": "solid"
    },
    "motion": {
      "fast": "150ms",
      "base": "200ms",
      "slow": "300ms",
      "easing": "cubic-bezier(0.4, 0, 0.2, 1)"
    },
    "opacity": {
      "muted": 0.7,
      "disabled": 0.4,
      "overlay": 0.55
    },
    "z": {
      "base": 1,
      "overlay": 10,
      "modal": 30,
      "toast": 40
    },
    "interaction": {
      "focusRing": {
        "color": "#4FA39B",
        "width": 2,
        "offset": 3,
        "style": "solid"
      },
      "states": {
        "hoverOpacity": 0.94,
        "activeOpacity": 0.88,
        "disabledOpacity": 0.5,
        "selectedOpacity": 0.92,
        "pressedScale": 0.99
      },
      "outlines": {
        "width": 1,
        "color": "#D9C8B4"
      },
      "keyboard": {
        "indicator": "focus-ring",
        "behavior": "show-on-focus"
      },
      "motionSafety": "respect-reduced-motion"
    },
    "content": {
      "voice": "friendly",
      "casing": {
        "headings": "title",
        "body": "sentence"
      },
      "numerals": {
        "format": "localized",
        "decimalPlaces": 2
      },
      "dates": {
        "format": "yyyy-MM-dd"
      },
      "ellipsis": {
        "maxLines": 2,
        "strategy": "ellipsis"
      },
      "placeholders": "Use concise, action-oriented placeholders."
    },
    "accessibility": {
      "contrast": {
        "text": 4.5,
        "ui": 3
      },
      "tapTarget": 44,
      "focusOrder": "natural",
      "aria": {
        "nav": "role=navigation, aria-label required",
        "forms": "associate labels, describe errors, aria-live for status",
        "tables": "use scope on headers, describe sortable state"
      },
      "motionReduction": "respect"
    },
    "dataViz": {
      "palette": {
        "categorical": [
          "#4FA39B",
          "#D9C8B4",
          "#10b981",
          "#8b5cf6"
        ],
        "sequential": [
          "#e0f2fe",
          "#93c5fd",
          "#3b82f6",
          "#1d4ed8"
        ],
        "diverging": [
          "#dc2626",
          "#fbbf24",
          "#22c55e",
          "#0ea5e9"
        ]
      },
      "grid": {
        "color": "rgba(0,0,0,0.08)",
        "width": 1
      },
      "axis": {
        "color": "#1B2A2F",
        "width": 1,
        "labelCase": "title"
      },
      "stroke": {
        "width": 2,
        "radius": 6
      },
      "tooltip": {
        "background": "#F7F4EE",
        "text": "#1B2A2F",
        "shadow": "0 12px 30px rgba(0,0,0,0.12)"
      }
    },
    "i18n": {
      "rtl": false,
      "numeralSystem": "latn",
      "dateFormat": "yyyy-MM-dd",
      "typographyFallbacks": [
        "Inter",
        "system-ui",
        "sans-serif"
      ]
    },
    "compliance": {
      "status": "brand-critical",
      "usage": {
        "do": [
          "Respect density and palette constraints",
          "Keep accent usage minimal"
        ],
        "dont": [
          "Override guardrails",
          "Add new accent colors"
        ]
      },
      "allowedStacks": [
        "tailwind",
        "shadcn"
      ]
    },
    "layout": {
      "grid": {
        "columns": 12,
        "gutter": 24,
        "maxWidth": 1280
      },
      "breakpoints": {
        "sm": 640,
        "md": 768,
        "lg": 1024,
        "xl": 1280
      },
      "container": {
        "padding": {
          "mobile": 16,
          "desktop": 22
        },
        "maxWidth": 1200
      },
      "section": {
        "verticalSpacing": 24
      },
      "media": {
        "aspectRatios": [
          "16:9",
          "4:3",
          "1:1"
        ]
      }
    },
    "componentSpecs": {
      "button": {
        "variants": [
          "primary",
          "secondary",
          "ghost"
        ],
        "states": [
          "default",
          "hover",
          "active",
          "focus",
          "disabled"
        ],
        "requiredTokens": [
          "colorRoles.light.accent",
          "colorRoles.dark.accent",
          "colorRoles.light.accentText",
          "colorRoles.dark.accentText",
          "typography.scale.md",
          "radius.lg"
        ],
        "sizeTokens": {
          "height": "space.2xl",
          "paddingX": "space.lg",
          "paddingY": "space.sm",
          "radius": "radius.lg"
        },
        "typographyTokens": {
          "size": "typography.scale.md",
          "weight": "typography.display.weight",
          "lineHeight": "typography.display.lineHeight",
          "letterSpacing": "typography.display.letterSpacing",
          "family": "typography.display.family"
        },
        "anatomy": [
          "root",
          "label"
        ],
        "a11yTokens": [
          "focus-visible"
        ]
      },
      "input": {
        "variants": [
          "default",
          "filled"
        ],
        "states": [
          "default",
          "focus",
          "disabled",
          "error"
        ],
        "requiredTokens": [
          "colorRoles.light.surface",
          "colorRoles.dark.surface",
          "colorRoles.light.border",
          "colorRoles.dark.border",
          "typography.scale.sm",
          "radius.md"
        ],
        "sizeTokens": {
          "height": "space.2xl",
          "paddingX": "space.md",
          "paddingY": "space.sm",
          "radius": "radius.md"
        },
        "typographyTokens": {
          "size": "typography.scale.sm",
          "weight": "typography.body.weight",
          "lineHeight": "typography.body.lineHeight",
          "letterSpacing": "typography.body.letterSpacing",
          "family": "typography.body.family"
        },
        "anatomy": [
          "label",
          "control",
          "helper"
        ],
        "a11yTokens": [
          "label-associated",
          "described-by"
        ]
      }
    },
    "componentGuardrails": {
      "hero": {
        "required": [
          "headline",
          "supporting copy",
          "primary action"
        ],
        "allowedPatterns": [
          "image-right",
          "image-left",
          "split"
        ],
        "maxAccents": 1,
        "maxActions": 2,
        "notes": [
          "Keep eyebrow short",
          "One accent block per hero"
        ]
      },
      "nav": {
        "required": [
          "brand",
          "primary links"
        ],
        "allowedPatterns": [
          "topbar",
          "sidebar"
        ],
        "maxAccents": 0,
        "maxActions": 1,
        "notes": [
          "Use focus ring on nav links",
          "Keep link labels <= 2 words"
        ]
      },
      "table": {
        "required": [
          "header",
          "rows",
          "hover/focus states"
        ],
        "allowedPatterns": [
          "sortable columns"
        ],
        "maxAccents": 0,
        "maxActions": 2,
        "notes": [
          "Use zebra or divider rows",
          "Include empty-state copy"
        ]
      },
      "card": {
        "required": [
          "title",
          "body"
        ],
        "allowedPatterns": [
          "media-top",
          "media-left"
        ],
        "maxAccents": 1,
        "maxActions": 2,
        "notes": [
          "Respect radius scale",
          "Avoid more than 2 badges"
        ]
      },
      "form": {
        "required": [
          "label",
          "helper text",
          "error state"
        ],
        "allowedPatterns": [
          "stacked",
          "inline"
        ],
        "maxAccents": 0,
        "maxActions": 1,
        "notes": [
          "Inputs full-width on mobile",
          "Use consistent spacing scale"
        ]
      },
      "chart": {
        "required": [
          "axes labels",
          "legend",
          "tooltip"
        ],
        "allowedPatterns": [
          "line",
          "bar"
        ],
        "maxAccents": 1,
        "maxActions": 0,
        "notes": [
          "Use dataViz palette",
          "Keep gridlines subtle"
        ]
      }
    },
    "density": "balanced",
    "mood": "serene",
    "stacks": [
      "tailwind",
      "shadcn"
    ],
    "tags": [
      "wellness",
      "calm",
      "minimal",
      "soft",
      "focus"
    ],
    "guardrails": [
      "Density in {balanced}",
      "Palette tokens = 6",
      "Accent usage <= 1 primary per section"
    ]
  },
  "stacks": [
    "tailwind",
    "shadcn"
  ],
  "tags": [
    "wellness",
    "calm",
    "minimal",
    "soft",
    "focus"
  ]
}

WellnessCalmMinimalSoftFocus