> ## Documentation Index > Fetch the complete documentation index at: https://docs.parable.work/llms.txt > Use this file to discover all available pages before exploring further. # Palettes > Style Panes with scoped CSS, shared design tokens, and shared chart palettes. # Palettes A Palette is the stylesheet of one Page or Pane: plain CSS that decides how it looks. It keeps appearance separate from data and logic, so styling can be changed and reviewed on its own while every Parable still looks like the rest of the product. A Palette is its own Piece, created with its Page or Pane and deleted with it. The shared design system supplies the base look: Parable's typography, colors, square corners, icons, and the Ivory and Obsidian themes. A Palette adds only what a Pane needs on top of that. A Palette opens as palette.css. The Pane's React code gives its elements class names, and the Palette writes selectors for those classes using ordinary CSS and the design system's CSS custom properties, called tokens. A new Pane's root element carries the class parable-pane and a new Page's root carries parable-page; the starting Palette styles both, so a rule for the whole Pane goes on that class. The renderer draws each Pane inside an element of its own with display: contents and a data-parable-pane attribute; it adds no box and is not for styling. A Pane is as tall as its content: height: 100% has no sized parent to resolve against, so give the root a min-height when it must fill an area. The renderer attaches the selected stylesheet; CSS is not a value passed into the Pane and not a field in its Perception. The CSS is saved with the Parable's draft and versioned with it. The preview can show unsaved CSS, but a previewed draft is not a saved change. Arbitrary Tailwind class strings are not compiled, so use the shared components' props for their variants and ordinary CSS for layout. Viewing Palette source needs view permission on the palette target of its Page's or Pane's Policies, and changing it needs edit permission on the palette; permission to change settings does not authorize CSS changes. A Pane's Palette styles the Pane, the Panes drawn inside it, and every Page and Pane that declares it, directly or through other Panes; it never reaches a Pane beside it that neither declares it nor is drawn inside it, so two such Panes can use the same class name and each keeps its own rules. Styles that several Panes share belong in the Palette of the Pane whose exports they style, and the Panes that use them declare that Pane. Menus, popovers, dialogs and tooltips are drawn outside every Pane, where every Palette on the Page reaches them, so give their classes names no other Pane uses. Rules for :root, html and body reach the whole document. A child or sibling combinator from a Pane's element to the root of a Pane drawn inside it does not match through that Pane's element; write a descendant selector. The editing preview of unsaved code still applies every Palette to the whole Page. CSS delivered to a browser cannot be kept secret by hiding the source editor. When a person needs to choose a meaningful setting, give it a value in the Pane's Perception and a control that saves it as a Preference; a hidden CSS edit is not a configuration workflow. The element the renderer draws each Pane in also decides how the Pane stacks: a z-index inside a Pane orders things within that Pane only, and the Pane the reader points at or works in lies over the other Panes, so a tooltip, menu or sheet a Pane draws itself shows on top where it spills over a neighbour. The Pane the reader points at lies over the Pane that holds the focus, so a click in one Pane never hides the tooltip of the Pane the reader points at next. A position, isolation or z-index a Pane sets on its own root still applies. Give Page chrome that must stay above the Pane the reader points at, such as a sticky bar, a z-index of 3 or more. Charts take every color from the design system's chart tokens, which the Pane document defines for both themes. Use var(--chart-categorical-1) through var(--chart-categorical-10), in order, for co-equal categories. Use one single-hue sequential ramp for ordered amounts: --chart-sequential-HUE-1 through -9, where HUE is blossom, coral, amber, leaf, teal, blue, or fuchsia, step 1 sits nearest the page, and --chart-multi-hue-warm-N or --chart-multi-hue-cool-N add hue change across the same nine steps. Use a diverging ramp for signed values: --chart-diverging-coral-blue-1 through -11, or amber-teal or blossom-leaf, with step 6 at zero. When one subject is read against its context, draw the context in --theme-chart-context-fill and the subject in one categorical color. Axes, grid lines, and labels use --theme-chart-axis, --theme-chart-grid, and --theme-chart-label. CHART\_PALETTES and getColorByIndex from parable/panes/placeholders return the same var() references. Do not invent token names: a name the Pane document does not define, such as --parable-chart-categorical-1, resolves to nothing and every series falls back to one color. Use one palette per view and never give one hue two meanings. A literal hex or named color freezes one theme and is a defect even when it looks right; tokens repaint when the theme changes. 1. Ask Ponder to style a Pane. Ponder reads the Pane's React code and class names first and starts from the shared controls and tokens, never a parallel design system. 2. Ponder writes Pane-scoped selectors in the Palette and adds class names to the React code where they are missing. 3. Preview the Pane beside the other Panes on its Page, in both themes and at narrow sizes. 4. Save. In Publishing mode the change goes into Changes for review before it is published. A good Palette makes the Pane match the product, affects only its own elements, and keeps information readable without color alone. Text wraps instead of clipping, focus is visible, contrast holds in Ivory and Obsidian, and motion respects the reader's reduced-motion setting. Check the result by rendering the Pane with its real React code next to another Pane, in both themes and from XS to XL, and confirm the draft and saved styling are clearly told apart. Related Powers: Panes, Pages, Plots, Policies. Find each by its title; do not guess stored names. This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.