Lido

# Lido

## Philosophy

Lido reimagines refraction as a sunlit open-air pool seen from the surface. Importance is depth in the water: the surface you are working in floats up bright and catches the caustic light, while everything else settles quietly underneath. A shimmering waterline divides the page, and anything carried across it bends — the way a pole looks broken where it enters the water. It keeps the source's essence of refraction, translucency, and depth through light, but stages it in bright daylight from above the water instead of frosting everything into uniform blur.

### Values

- Depth is the hierarchy: a focused surface floats up bright and catches the light, everything else sinks and dims
- Clear water, not frost: surfaces stay translucent and legible; the system changes how deep a surface sits, not how blurred it is
- Refraction as a working divider: a waterline replaces rules, and what crosses it visibly bends
- Caught light as signal: three accents are spent like sun on water, only on the brightest edges
- Material honesty: surfaces behave like a sunlit pool seen from above, with a caustic net playing across every floor

### Anti-Values

- Frosting everything into uniform blur and calling it hierarchy
- Opaque flat card fills, grey borders, or one-sided accent edges
- Letting the accents flood a panel — they stay highlighters, never washes
- Light-first white minimalism as a default; this language stages a saturated daylit-teal pool
- Arbitrary in-between radii or hard black drop shadows

### Visual Character

- Translucent glass panes over a deep daylit-teal pool, lit one or two steps brighter than the water, with an inset 1px highlight and a soft teal-black shadow instead of borders.
- A 2px shimmering waterline (aqua to white to amber, fading at both ends, with a blurred refracted underside) recurs as the divider, the section break, and the active-nav underline.
- Focused and active surfaces SURFACE — brighter glass with a soft aqua glow ring; importance reads by how high a pane floats and how brightly it catches the caustic light.
- Three accents (turquoise water-light, coral glint, amber sun-spark) used like sun on water against the teal, plus a faint masked caustic light-net playing across every pane.
- The refraction-shift: a value carried across the waterline lands horizontally displaced, bent at the surface, on a disciplined geometry of 16px and 24px containers and full pills, Fraunces display, Outfit body, IBM Plex Mono metadata.

## Tokens

### Colors

| Name | Value |
|------|-------|
| bg | `#0B6275` |
| surface | `#0F7A8F` |
| surface_2 | `#12889F` |
| text | `#F1FBFC` |
| muted | `#9FD3DE` |
| border | `rgba(241,251,252,0.10)` |
| hairline | `rgba(241,251,252,0.16)` |
| accent | `#1FE6D6` |
| accent_2 | `#FF6E5C` |
| accent_3 | `#FFC247` |
| on_accent | `#06343C` |
| success | `#3FE0A6` |
| warning | `#FFC247` |
| error | `#FF6E5C` |
| info | `#1FE6D6` |

### Typography

- **Base Size**: 17px
- **Body Font**: Outfit
- **Heading Font**: Fraunces
- **Mono Font**: IBM Plex Mono
- **Heading Weight**: 600
- **Heading Transform**: none
- **Letter Spacing**: -0.035em
- **Line Height**: 1.55
- **Google Fonts Url**: https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Outfit:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap

### Radii

- **None**: 0px
- **Sm**: 16px
- **Md**: 24px
- **Lg**: 24px
- **Full**: 9999px

### Shadows

- **Sm**: 0 6px 22px -14px rgba(2,28,34,0.70)
- **Md**: 0 18px 50px -24px rgba(2,28,34,0.85)
- **Lg**: 0 24px 60px -28px rgba(2,28,34,0.9)
- **Glow**: 0 0 0 1px rgba(31,230,214,0.40), 0 0 30px -6px rgba(31,230,214,0.45)

### Spacing

- **Base**: 8px
- **Scale**: [4,8,12,16,24,32,48,64,96]

### Surfaces

- **Treatment**: Translucent glass panes: linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03)) with an inset 1px white highlight and a soft teal-black shadow, over a deep daylit-teal pool carrying faint aqua/amber caustic blooms.
- **Card Style**: 24px-radius translucent panes, no borders or opaque fills; a focused (surfaced) pane glows with an aqua ring and floats brighter, an idle (deep) pane sinks dimmer.
- **Bg Pattern**: Deep daylit-teal pool-water ground with oversized soft aqua and amber radial blooms as the sunlight the water refracts, and a faint masked caustic light-net on panes.

### Borders

- **Default Width**: 0
- **Character**: No borders. Depth from a 1px inner highlight, the waterline, and soft teal-black shadows; never grey edges or one-sided accents.

### Motion

- **Duration**: 300ms
- **Easing**: cubic-bezier(.2,.8,.2,1)
- **Philosophy**: Liquid but restrained behind a reduced-motion gate. The settled page is the no-JS default; an inline script gates a gentle scroll-reveal where sections surface as they rise into view. Hover lifts a pane 2px and deepens its glow.

## Rules

### Composition

Stage the page as a pool: the focused surface floats up bright (surfaced), supporting surfaces sink (deep). Divide sections with the waterline, never a rule. Keep the most important action a single light-catching CTA, never a button pair as default furniture.

### Hierarchy

Hierarchy comes from depth in the water — how high a pane floats and how brightly it catches the caustic light — before pure text size. Supporting data is tiered through chips, depth-meters and mono cues. State is told by which accent lights: aqua open/active, amber closing/warning, coral fault/error.

### Density

Medium-to-high density organised into legible panes: a surfaced focal pane, supporting deep panes, and micro-status chips and depth-meters within them. Negative space reveals the daylit-teal water, never neutral white.

### Signature

Surfacing depth (panes float up or sink to encode importance), the waterline divider (a shimmering meniscus), the refraction-shift (values bend crossing the line), and the caustic light-net (a masked light texture on every pane).

## Layout

### Grid

A contained max-width stage (1240-1320px) with a full-bleed pool hero. Desktop runs multi-column pane grids; tablet drops to two columns; mobile stacks to a single column.

### Whitespace

Atmospheric: pockets of open daylit-teal water around the focal pane, tighter spacing inside dense data panes, generous padding above every title.

### Density

medium-high

### Responsive

From ~390px to 2560px+. Single column on mobile with a wrapping nav; the full-bleed pool hero keeps its darker-water corner behind the copy for legibility; headlines shrink with clamp() and wrap, verified never to clip the 390px edge (longest line ~313px inside 390px).

### Breakpoints

- **Mobile**: 0-619px
- **Tablet**: 620-1039px
- **Desktop**: 1040px+

## Guidance

### Do

- Encode importance with depth: float the focused pane to the surface (brighter glass + aqua glow), sink the rest
- Divide sections with the shimmering waterline, never a grey rule or one-sided edge
- Refraction-shift any value that crosses the waterline so the divider visibly does its work
- Use turquoise, coral and amber as highlighters on the brightest edges, never as panel washes
- Keep the ground a deep daylit-teal pool so the accents read as caught light

### Don't

- Do not frost everything into uniform blur or use opaque flat card fills
- Do not box the nav into a pill bar or float chrome as a widget
- Do not open the hero with a tracked eyebrow tag, a button pair, or a three-stat row
- Do not swap a regular serif for an italic serif in the headline; use a colour-pop highlighter mark
- Do not mute the accents into greys — they are meant to read as sun on water

### Accessibility

Body 17px+ on the daylit-teal water with high contrast (#F1FBFC on #0B6275); never encode meaning in accent colour alone (pair every accent with a label or chip text); focus rings glow aqua; respect prefers-reduced-motion.

## Imagery Direction

### Pairs With

caustic-refraction

### Summary

A refractive optical-light technique: any subject rendered as if lit and bent through clear-to-frosted glass, with caustic light-nets, specular glints, a thin chromatic-dispersion fringe on the brightest contours, frosted-to-clear lensing, staged so the refracted light glows.

### Subjects

- sunlit pool water seen from the surface
- tiled pool floors lensed under water
- a swimmer or single object refracted through the surface
- hero objects caught in caustic light

### Usage

Landing hero is a full-bleed sunlit-pool image with a darker stretch of water at upper-left for the overlay copy; the caustic light-net and refraction technique read across the whole frame.

---
version: "alpha"
name: "Lido"
description: "Agent-curated design language exported from Katagami as DESIGN.md."
colors:
  bg: "#0B6275"
  surface: "#0F7A8F"
  surface_2: "#12889F"
  text: "#F1FBFC"
  muted: "#9FD3DE"
  accent: "#1FE6D6"
  accent_2: "#FF6E5C"
  accent_3: "#FFC247"
  on_accent: "#06343C"
  success: "#3FE0A6"
  warning: "#FFC247"
  error: "#FF6E5C"
  info: "#1FE6D6"
typography:
  headline-lg:
    fontFamily: "Fraunces"
    fontSize: "2.075rem"
    fontWeight: 700
    lineHeight: 1.1
    letterSpacing: "-0.035em"
  headline-md:
    fontFamily: "Fraunces"
    fontSize: "1.66rem"
    fontWeight: 600
    lineHeight: 1.15
    letterSpacing: "-0.035em"
  body-md:
    fontFamily: "Outfit"
    fontSize: "17px"
    fontWeight: 400
    lineHeight: 1.5
    letterSpacing: "-0.035em"
  label-md:
    fontFamily: "IBM Plex Mono"
    fontSize: "0.75rem"
    fontWeight: 600
    lineHeight: 1
    letterSpacing: "0.08em"
rounded:
  none: "0px"
  sm: "16px"
  md: "24px"
  lg: "24px"
  full: "9999px"
spacing:
  base: "8px"
  xs: "4px"
  sm: "8px"
  md: "12px"
  lg: "16px"
  xl: "24px"
  2xl: "32px"
  3xl: "48px"
  4xl: "64px"
  step-8: "96px"
components:
  color-reference-bg:
    backgroundColor: "{colors.bg}"
  color-reference-surface:
    backgroundColor: "{colors.surface}"
  color-reference-surface_2:
    backgroundColor: "{colors.surface_2}"
  color-reference-text:
    backgroundColor: "{colors.text}"
  color-reference-muted:
    backgroundColor: "{colors.muted}"
  color-reference-accent:
    backgroundColor: "{colors.accent}"
  color-reference-accent_2:
    backgroundColor: "{colors.accent_2}"
  color-reference-accent_3:
    backgroundColor: "{colors.accent_3}"
  color-reference-on_accent:
    backgroundColor: "{colors.on_accent}"
  color-reference-success:
    backgroundColor: "{colors.success}"
  color-reference-warning:
    backgroundColor: "{colors.warning}"
  color-reference-error:
    backgroundColor: "{colors.error}"
  color-reference-info:
    backgroundColor: "{colors.info}"
  button-primary:
    backgroundColor: "{colors.accent}"
    textColor: "#000000"
    typography: "{typography.label-md}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  card-surface:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    padding: "{spacing.md}"
  input-default:
    backgroundColor: "{colors.surface}"
    textColor: "{colors.text}"
    rounded: "{rounded.md}"
    height: "44px"
---

# Lido

## Overview

Lido reimagines refraction as a sunlit open-air pool seen from the surface. Importance is depth in the water: the surface you are working in floats up bright and catches the caustic light, while everything else settles quietly underneath. A shimmering waterline divides the page, and anything carried across it bends — the way a pole looks broken where it enters the water. It keeps the source's essence of refraction, translucency, and depth through light, but stages it in bright daylight from above the water instead of frosting everything into uniform blur.

### Values

- Depth is the hierarchy: a focused surface floats up bright and catches the light, everything else sinks and dims
- Clear water, not frost: surfaces stay translucent and legible; the system changes how deep a surface sits, not how blurred it is
- Refraction as a working divider: a waterline replaces rules, and what crosses it visibly bends
- Caught light as signal: three accents are spent like sun on water, only on the brightest edges
- Material honesty: surfaces behave like a sunlit pool seen from above, with a caustic net playing across every floor

### Anti-Values

- Frosting everything into uniform blur and calling it hierarchy
- Opaque flat card fills, grey borders, or one-sided accent edges
- Letting the accents flood a panel — they stay highlighters, never washes
- Light-first white minimalism as a default; this language stages a saturated daylit-teal pool
- Arbitrary in-between radii or hard black drop shadows

### Visual Character

- Translucent glass panes over a deep daylit-teal pool, lit one or two steps brighter than the water, with an inset 1px highlight and a soft teal-black shadow instead of borders.
- A 2px shimmering waterline (aqua to white to amber, fading at both ends, with a blurred refracted underside) recurs as the divider, the section break, and the active-nav underline.
- Focused and active surfaces SURFACE — brighter glass with a soft aqua glow ring; importance reads by how high a pane floats and how brightly it catches the caustic light.
- Three accents (turquoise water-light, coral glint, amber sun-spark) used like sun on water against the teal, plus a faint masked caustic light-net playing across every pane.
- The refraction-shift: a value carried across the waterline lands horizontally displaced, bent at the surface, on a disciplined geometry of 16px and 24px containers and full pills, Fraunces display, Outfit body, IBM Plex Mono metadata.

## Colors

Use the YAML color tokens as the normative palette. The prose below names the roles agents should preserve when generating UI.

| Token | Value |
|-------|-------|
| bg | `#0B6275` |
| surface | `#0F7A8F` |
| surface_2 | `#12889F` |
| text | `#F1FBFC` |
| muted | `#9FD3DE` |
| accent | `#1FE6D6` |
| accent_2 | `#FF6E5C` |
| accent_3 | `#FFC247` |
| on_accent | `#06343C` |
| success | `#3FE0A6` |
| warning | `#FFC247` |
| error | `#FF6E5C` |
| info | `#1FE6D6` |

## Typography

- **Headline-Lg**: Fraunces, 2.075rem, weight 700, line-height 1.1.
- **Headline-Md**: Fraunces, 1.66rem, weight 600, line-height 1.15.
- **Body-Md**: Outfit, 17px, weight 400, line-height 1.5.
- **Label-Md**: IBM Plex Mono, 0.75rem, weight 600, line-height 1.

## Layout

### Spacing Tokens

- **Base**: `8px`
- **Xs**: `4px`
- **Sm**: `8px`
- **Md**: `12px`
- **Lg**: `16px`
- **Xl**: `24px`
- **2xl**: `32px`
- **3xl**: `48px`
- **4xl**: `64px`
- **Step-8**: `96px`

### Grid

A contained max-width stage (1240-1320px) with a full-bleed pool hero. Desktop runs multi-column pane grids; tablet drops to two columns; mobile stacks to a single column.

### Whitespace

Atmospheric: pockets of open daylit-teal water around the focal pane, tighter spacing inside dense data panes, generous padding above every title.

### Density

medium-high

### Responsive

From ~390px to 2560px+. Single column on mobile with a wrapping nav; the full-bleed pool hero keeps its darker-water corner behind the copy for legibility; headlines shrink with clamp() and wrap, verified never to clip the 390px edge (longest line ~313px inside 390px).

### Breakpoints

- **Mobile**: 0-619px
- **Tablet**: 620-1039px
- **Desktop**: 1040px+

## Elevation & Depth

### Shadows

- **Sm**: 0 6px 22px -14px rgba(2,28,34,0.70)
- **Md**: 0 18px 50px -24px rgba(2,28,34,0.85)
- **Lg**: 0 24px 60px -28px rgba(2,28,34,0.9)
- **Glow**: 0 0 0 1px rgba(31,230,214,0.40), 0 0 30px -6px rgba(31,230,214,0.45)

## Shapes

### Rounded

- **None**: `0px`
- **Sm**: `16px`
- **Md**: `24px`
- **Lg**: `24px`
- **Full**: `9999px`

### Surfaces

- **Treatment**: Translucent glass panes: linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03)) with an inset 1px white highlight and a soft teal-black shadow, over a deep daylit-teal pool carrying faint aqua/amber caustic blooms.
- **Card Style**: 24px-radius translucent panes, no borders or opaque fills; a focused (surfaced) pane glows with an aqua ring and floats brighter, an idle (deep) pane sinks dimmer.
- **Bg Pattern**: Deep daylit-teal pool-water ground with oversized soft aqua and amber radial blooms as the sunlight the water refracts, and a faint masked caustic light-net on panes.

### Borders

- **Default Width**: 0
- **Character**: No borders. Depth from a 1px inner highlight, the waterline, and soft teal-black shadows; never grey edges or one-sided accents.

## Components

### Composition

Stage the page as a pool: the focused surface floats up bright (surfaced), supporting surfaces sink (deep). Divide sections with the waterline, never a rule. Keep the most important action a single light-catching CTA, never a button pair as default furniture.

### Hierarchy

Hierarchy comes from depth in the water — how high a pane floats and how brightly it catches the caustic light — before pure text size. Supporting data is tiered through chips, depth-meters and mono cues. State is told by which accent lights: aqua open/active, amber closing/warning, coral fault/error.

### Density

Medium-to-high density organised into legible panes: a surfaced focal pane, supporting deep panes, and micro-status chips and depth-meters within them. Negative space reveals the daylit-teal water, never neutral white.

### Signature

Surfacing depth (panes float up or sink to encode importance), the waterline divider (a shimmering meniscus), the refraction-shift (values bend crossing the line), and the caustic light-net (a masked light texture on every pane).

## shadcn/ui Usage

When the target app uses shadcn/ui, copy DESIGN.md with shadcn instead of the plain DESIGN.md. It contains the same Katagami design-language source plus the shadcn/ui primitives, imports, theme variables, component recipes, and preview-shot guidance.

DESIGN.md with shadcn: `/language/en-019efdb6-9235-7843-ac6a-e8cb1f61be56/DESIGN.with-shadcn.md`.

The shadcn page also exposes optional machine-readable files for automation, but the human-facing handoff is DESIGN.md with shadcn.

Install recommended primitives with `npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table`.

Use these primitives in shadcn apps:
- button
- card
- input
- textarea
- select
- dialog
- sheet
- tabs
- badge
- separator
- checkbox
- switch
- slider
- tooltip
- dropdown-menu
- table

Implementation rule for agents: import shadcn primitives from `@/components/ui/*`, apply the generated CSS variables first, then compose the language-specific recipes from the companion MD. Katagami remains the source of truth; shadcn names are the implementation surface.

## Do's and Don'ts

- Do Encode importance with depth: float the focused pane to the surface (brighter glass + aqua glow), sink the rest
- Do Divide sections with the shimmering waterline, never a grey rule or one-sided edge
- Do Refraction-shift any value that crosses the waterline so the divider visibly does its work
- Do Use turquoise, coral and amber as highlighters on the brightest edges, never as panel washes
- Do Keep the ground a deep daylit-teal pool so the accents read as caught light
- Don't Do not frost everything into uniform blur or use opaque flat card fills
- Don't Do not box the nav into a pill bar or float chrome as a widget
- Don't Do not open the hero with a tracked eyebrow tag, a button pair, or a three-stat row
- Don't Do not swap a regular serif for an italic serif in the headline; use a colour-pop highlighter mark
- Don't Do not mute the accents into greys — they are meant to read as sun on water

### Accessibility

Body 17px+ on the daylit-teal water with high contrast (#F1FBFC on #0B6275); never encode meaning in accent colour alone (pair every accent with a label or chip text); focus rings glow aqua; respect prefers-reduced-motion.

## Imagery Direction

### Pairs With

caustic-refraction

### Summary

A refractive optical-light technique: any subject rendered as if lit and bent through clear-to-frosted glass, with caustic light-nets, specular glints, a thin chromatic-dispersion fringe on the brightest contours, frosted-to-clear lensing, staged so the refracted light glows.

### Subjects

- sunlit pool water seen from the surface
- tiled pool floors lensed under water
- a swimmer or single object refracted through the surface
- hero objects caught in caustic light

### Usage

Landing hero is a full-bleed sunlit-pool image with a darker stretch of water at upper-left for the overlay copy; the caustic light-net and refraction technique read across the whole frame.

```json
{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "lido",
  "type": "registry:theme",
  "title": "Lido shadcn Theme",
  "cssVars": {
    "theme": {},
    "light": {
      "background": "#0B6275",
      "foreground": "#F1FBFC",
      "card": "#0F7A8F",
      "card-foreground": "#F1FBFC",
      "popover": "#0F7A8F",
      "popover-foreground": "#F1FBFC",
      "primary": "#F1FBFC",
      "primary-foreground": "#111111",
      "secondary": "#f4f4f5",
      "secondary-foreground": "#111111",
      "muted": "#9FD3DE",
      "muted-foreground": "#F1FBFC",
      "accent": "#1FE6D6",
      "accent-foreground": "#111111",
      "destructive": "#FF6E5C",
      "border": "rgba(241,251,252,0.10)",
      "input": "rgba(241,251,252,0.10)",
      "ring": "#1FE6D6",
      "chart-1": "#F1FBFC",
      "chart-2": "#f4f4f5",
      "chart-3": "#1FE6D6",
      "chart-4": "#3FE0A6",
      "chart-5": "#FFC247",
      "sidebar": "#0F7A8F",
      "sidebar-foreground": "#F1FBFC",
      "sidebar-primary": "#F1FBFC",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#1FE6D6",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "rgba(241,251,252,0.10)",
      "sidebar-ring": "#1FE6D6",
      "radius": "24px"
    },
    "dark": {
      "background": "#0f1115",
      "foreground": "#f8fafc",
      "card": "#181b22",
      "card-foreground": "#f8fafc",
      "popover": "#181b22",
      "popover-foreground": "#f8fafc",
      "primary": "#F1FBFC",
      "primary-foreground": "#111111",
      "secondary": "#252a33",
      "secondary-foreground": "#f8fafc",
      "muted": "#252a33",
      "muted-foreground": "#a1a1aa",
      "accent": "#1FE6D6",
      "accent-foreground": "#111111",
      "destructive": "#FF6E5C",
      "border": "#303642",
      "input": "#303642",
      "ring": "#1FE6D6",
      "chart-1": "#F1FBFC",
      "chart-2": "#f4f4f5",
      "chart-3": "#1FE6D6",
      "chart-4": "#3FE0A6",
      "chart-5": "#FFC247",
      "sidebar": "#181b22",
      "sidebar-foreground": "#f8fafc",
      "sidebar-primary": "#F1FBFC",
      "sidebar-primary-foreground": "#111111",
      "sidebar-accent": "#1FE6D6",
      "sidebar-accent-foreground": "#111111",
      "sidebar-border": "#303642",
      "sidebar-ring": "#1FE6D6",
      "radius": "24px"
    }
  },
  "meta": {
    "source": "katagami",
    "languageId": "en-019efdb6-9235-7843-ac6a-e8cb1f61be56",
    "slug": "lido",
    "componentManifest": [
      "button",
      "card",
      "input",
      "textarea",
      "select",
      "dialog",
      "sheet",
      "tabs",
      "badge",
      "separator",
      "checkbox",
      "switch",
      "slider",
      "tooltip",
      "dropdown-menu",
      "table"
    ],
    "installCommand": "npx shadcn@latest add button card input textarea select dialog sheet tabs badge separator checkbox switch slider tooltip dropdown-menu table",
    "nativeTokenNames": {
      "colors": [
        "accent",
        "accent_2",
        "accent_3",
        "bg",
        "border",
        "error",
        "hairline",
        "info",
        "muted",
        "on_accent",
        "success",
        "surface",
        "surface_2",
        "text",
        "warning"
      ],
      "typography": [
        "base_size",
        "body_font",
        "google_fonts_url",
        "heading_font",
        "heading_transform",
        "heading_weight",
        "letter_spacing",
        "line_height",
        "mono_font"
      ],
      "radii": [
        "full",
        "lg",
        "md",
        "none",
        "sm"
      ],
      "shadows": [
        "glow",
        "lg",
        "md",
        "sm"
      ],
      "spacing": [
        "base",
        "scale"
      ],
      "surfaces": [
        "bg_pattern",
        "card_style",
        "treatment"
      ],
      "borders": [
        "character",
        "default_width"
      ],
      "motion": [
        "duration",
        "easing",
        "philosophy"
      ]
    }
  }
}
```