--- version: alpha name: Pistachio Keystone description: "Calm, clinical web3 UI: blue-grey neutrals, one muted olive-lime action color and IBM Plex type for wallets, staking and on-chain tools." colors: background: "#f5f8fa" foreground: "#131a20" card: "#ffffff" card-foreground: "#131a20" popover: "#ffffff" popover-foreground: "#131a20" primary: "#665f0a" primary-foreground: "#ffffff" secondary: "#eaeff3" secondary-foreground: "#222c35" muted: "#eaeff3" muted-foreground: "#4a5862" accent: "#f4f0c6" accent-foreground: "#383402" destructive: "#c02d56" destructive-foreground: "#ffffff" success: "#16683d" success-foreground: "#ffffff" warning: "#f8cd98" warning-foreground: "#3f2600" border: "#d9e1e7" input: "#bfcad2" ring: "#827a10" dark-background: "#131a20" dark-foreground: "#f5f8fa" dark-card: "#222c35" dark-card-foreground: "#f5f8fa" dark-popover: "#222c35" dark-popover-foreground: "#f5f8fa" dark-primary: "#d6ca5c" dark-primary-foreground: "#211f01" dark-secondary: "#35414a" dark-secondary-foreground: "#eaeff3" dark-muted: "#35414a" dark-muted-foreground: "#bfcad2" dark-accent: "#383402" dark-accent-foreground: "#f4f0c6" dark-destructive: "#f66e89" dark-destructive-foreground: "#390011" dark-success: "#5fb682" dark-success-foreground: "#012211" dark-warning: "#d18f3a" dark-warning-foreground: "#271600" dark-border: "#35414a" dark-input: "#4a5862" dark-ring: "#bfb337" typography: display-lg: fontFamily: IBM Plex Serif fontSize: 48px fontWeight: 500 lineHeight: 1.1 letterSpacing: -0.022em display-md: fontFamily: IBM Plex Serif fontSize: 36px fontWeight: 500 lineHeight: 1.15 letterSpacing: -0.018em heading-lg: fontFamily: IBM Plex Serif fontSize: 27px fontWeight: 500 lineHeight: 1.25 letterSpacing: -0.012em heading-md: fontFamily: IBM Plex Sans fontSize: 20px fontWeight: 600 lineHeight: 1.35 letterSpacing: -0.006em heading-sm: fontFamily: IBM Plex Sans fontSize: 16px fontWeight: 600 lineHeight: 1.4 body-lg: fontFamily: IBM Plex Sans fontSize: 18px fontWeight: 400 lineHeight: 1.6 body-md: fontFamily: IBM Plex Sans fontSize: 16px fontWeight: 400 lineHeight: 1.6 body-sm: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 400 lineHeight: 1.5 label: fontFamily: IBM Plex Sans fontSize: 14px fontWeight: 500 lineHeight: 1.3 letterSpacing: 0.005em caption: fontFamily: IBM Plex Sans fontSize: 12px fontWeight: 500 lineHeight: 1.4 letterSpacing: 0.01em code: fontFamily: IBM Plex Mono fontSize: 13px fontWeight: 400 lineHeight: 1.5 rounded: sm: 4px md: 6px lg: 10px xl: 14px full: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px 2xl: 48px 3xl: 64px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 16px height: 40px button-secondary: backgroundColor: "{colors.secondary}" textColor: "{colors.secondary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 16px height: 40px button-destructive: backgroundColor: "{colors.destructive}" textColor: "{colors.destructive-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 16px height: 40px input: backgroundColor: "{colors.background}" textColor: "{colors.foreground}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 0 12px height: 40px card: backgroundColor: "{colors.card}" textColor: "{colors.card-foreground}" rounded: "{rounded.lg}" padding: 24px popover: backgroundColor: "{colors.popover}" textColor: "{colors.popover-foreground}" rounded: "{rounded.lg}" padding: 12px helper-text: backgroundColor: "{colors.background}" textColor: "{colors.muted-foreground}" typography: "{typography.body-sm}" table-row-alt: backgroundColor: "{colors.muted}" textColor: "{colors.muted-foreground}" typography: "{typography.body-sm}" height: 44px badge: backgroundColor: "{colors.accent}" textColor: "{colors.accent-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 22px badge-success: backgroundColor: "{colors.success}" textColor: "{colors.success-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 22px badge-warning: backgroundColor: "{colors.warning}" textColor: "{colors.warning-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 22px badge-destructive: backgroundColor: "{colors.destructive}" textColor: "{colors.destructive-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 22px button-primary-dark: backgroundColor: "{colors.dark-primary}" textColor: "{colors.dark-primary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 16px height: 40px button-secondary-dark: backgroundColor: "{colors.dark-secondary}" textColor: "{colors.dark-secondary-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 16px height: 40px button-destructive-dark: backgroundColor: "{colors.dark-destructive}" textColor: "{colors.dark-destructive-foreground}" typography: "{typography.label}" rounded: "{rounded.md}" padding: 0 16px height: 40px input-dark: backgroundColor: "{colors.dark-background}" textColor: "{colors.dark-foreground}" typography: "{typography.body-sm}" rounded: "{rounded.md}" padding: 0 12px height: 40px card-dark: backgroundColor: "{colors.dark-card}" textColor: "{colors.dark-card-foreground}" rounded: "{rounded.lg}" padding: 24px popover-dark: backgroundColor: "{colors.dark-popover}" textColor: "{colors.dark-popover-foreground}" rounded: "{rounded.lg}" padding: 12px helper-text-dark: backgroundColor: "{colors.dark-background}" textColor: "{colors.dark-muted-foreground}" typography: "{typography.body-sm}" table-row-alt-dark: backgroundColor: "{colors.dark-muted}" textColor: "{colors.dark-muted-foreground}" typography: "{typography.body-sm}" height: 44px badge-dark: backgroundColor: "{colors.dark-accent}" textColor: "{colors.dark-accent-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 22px badge-success-dark: backgroundColor: "{colors.dark-success}" textColor: "{colors.dark-success-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 22px badge-warning-dark: backgroundColor: "{colors.dark-warning}" textColor: "{colors.dark-warning-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 22px badge-destructive-dark: backgroundColor: "{colors.dark-destructive}" textColor: "{colors.dark-destructive-foreground}" typography: "{typography.caption}" rounded: "{rounded.full}" padding: 0 8px height: 22px --- # Pistachio Keystone ## Overview Pistachio Keystone is for web3 screens where users fear irreversible actions: wallets, staking dashboards, transaction review and governance votes. It avoids neon gradients and dark drama. It uses pale cool surfaces, one olive accent (primary) and plain labels, so each confirmation step reads as checked and under control. Every text pair in both modes is at least 4.5:1, and most reach 6:1 or more. Moods: calm, clinical, reassuring, precise. Built for: web3, wallets, defi, infrastructure. Density: comfortable. Every color has a light value and a dark value. Tokens named `dark-*` are the dark-mode counterparts of the token with the same role name. ## Colors Neutrals are blue-grey at OKLCH hue ≈235 with low chroma that peaks at 500–700, so surfaces recede and numbers stay in front. Brand is olive-lime at hue ≈100, nudged slightly greener than v1.0 so it reads as pistachio rather than mustard. Its chroma peaks at 400–500 and tapers evenly toward 50 and 950. Light mode: primary = brand.700 (#665f0a) with white text, about 6.6:1. ring = brand.600, about 4:1 on background. Dark mode: primary = brand.300 (#d6ca5c) with brand.950 text, about 10:1, on neutral.950 (#131a20). Danger is a cool crimson at hue ≈5, far from olive (ΔE2000 > 40 in both modes). Success sits at hue ≈155, cooler than brand so 'confirmed' never reads as 'click me'. Warning is shifted toward orange (hue ≈65) so amber banners stay distinct from the olive primary. Success and warning use the same chroma curve as brand. - **Primary** `#665f0a` / dark `#d6ca5c`: the single action color. Primary buttons, links, focus ring. - **Background / Foreground** `#f5f8fa` / dark `#131a20` on `#131a20` / dark `#f5f8fa`: page surface and body text. - **Card** `#ffffff` / dark `#222c35`: raised surfaces. - **Secondary** `#eaeff3` / dark `#35414a`: secondary buttons and quiet controls. - **Muted** `#eaeff3` / dark `#35414a` with **muted-foreground** `#4a5862` / dark `#bfcad2`: helper text, table stripes, disabled-looking surfaces. - **Accent** `#f4f0c6` / dark `#383402`: highlights, selected rows, badges. - **Destructive** `#c02d56` / dark `#f66e89`, **Success** `#16683d` / dark `#5fb682`, **Warning** `#f8cd98` / dark `#d18f3a`: status only, always paired with an icon or label. - **Border** `#d9e1e7` / dark `#35414a`, **Input** `#bfcad2` / dark `#4a5862`, **Ring** `#827a10` / dark `#bfb337`. All text/background pairs above pass WCAG AA (4.5:1) in both modes; this is checked automatically at build time. ## Typography The size scale steps by about ×1.33 (perfect fourth) from 20px upward: heading-md 20 → heading-lg 27 → display-md 36 → display-lg 48. Below that, body sizes are 12/14/16/18. IBM Plex Serif (weight 500) is used only for heading-lg and the two display sizes, giving a statement-like voice. Letter spacing tightens with size: -0.012em at 27px, -0.018em at 36px, -0.022em at 48px. IBM Plex Sans covers all UI text, with body-md at 16px/1.6 for comfortable reading. IBM Plex Mono (400/500) sets addresses, hashes and transaction amounts at 13px. Only shipped weights are used: Serif and Sans 400/500/600, Mono 400/500. - Display: **IBM Plex Serif** (fallback Georgia, serif) - Interface: **IBM Plex Sans** (fallback system-ui, sans-serif) - Mono: **IBM Plex Mono** (fallback ui-monospace, monospace) | Token | Font | Size | Line height | Weight | |---|---|---|---|---| | display-lg | IBM Plex Serif | 48px | 1.1 | 500 | | display-md | IBM Plex Serif | 36px | 1.15 | 500 | | heading-lg | IBM Plex Serif | 27px | 1.25 | 500 | | heading-md | IBM Plex Sans | 20px | 1.35 | 600 | | heading-sm | IBM Plex Sans | 16px | 1.4 | 600 | | body-lg | IBM Plex Sans | 18px | 1.6 | 400 | | body-md | IBM Plex Sans | 16px | 1.6 | 400 | | body-sm | IBM Plex Sans | 14px | 1.5 | 400 | | label | IBM Plex Sans | 14px | 1.3 | 500 | | caption | IBM Plex Sans | 12px | 1.4 | 500 | | code | IBM Plex Mono | 13px | 1.5 | 400 | ## Layout Comfortable density on a 4px grid. Content max width is 1120px. Cards use space.6 (24px) padding. Buttons and inputs are 40px high; large confirm buttons on transaction review are 44px. Keep at least space.8 (32px) between a transaction summary card and the confirm or cancel row. Spacing uses a 4px base: xs = 4px, sm = 8px, md = 16px, lg = 24px, xl = 32px, 2xl = 48px, 3xl = 64px. ## Elevation & Depth Nearly flat. Surfaces are separated by a 1px border (neutral.200 in light, neutral.800 in dark) plus shadow.sm on cards. Use shadow.md only for dropdowns, popovers and toasts. Use shadow.lg only for modal dialogs such as transaction confirmation. In dark mode, depth comes from surface steps: background neutral.950 → card neutral.900 → secondary/muted neutral.800. - sm: `0 1px 2px rgba(19, 26, 32, 0.05)` - md: `0 4px 14px -2px rgba(19, 26, 32, 0.10)` - lg: `0 18px 44px -10px rgba(19, 26, 32, 0.20)` ## Shapes radius.md (6px) on buttons, inputs and selects. radius.lg (10px) on cards. radius.xl (14px) on modal dialogs. radius.full only for status badges and network chips. Buttons are never fully round. Radius scale: sm 4px, md 6px, lg 10px, xl 14px, full 9999px. ## Components Components ending in `-dark` are the dark-mode versions. Button: 40px tall, 16px horizontal padding, label type. Input: 40px tall with a 1px input-colored border; focus shows a 2px ring in the ring color. Card: 24px padding, 1px border, sm shadow. Badge: pill, caption type. ## Do's and Don'ts - **Do:** Use one primary button per view (brand.700 in light, brand.300 in dark) for the main step, such as 'Review transaction' or 'Confirm'. Make all other actions secondary or ghost buttons. - **Do:** Set wallet addresses, hashes and IDs in typography.code (IBM Plex Mono, 13px). Truncate them in the middle (0x12ab…89ef) and add a copy icon button with a 'Copied' tooltip state. - **Do:** Use IBM Plex Serif only for heading-lg (27px), display-md (36px) and display-lg (48px). Use IBM Plex Sans for every button, input, table and paragraph. - **Do:** Before any irreversible action, show a card with amount, recipient and network fee. Place the confirm button bottom-right, at least space.8 (32px) below the summary. - **Do:** Show focus with a 2px outline in the ring token (brand.600 light, brand.400 dark) with a 2px offset on buttons, inputs and badges. - **Do:** Pair every success, warning and destructive color with an icon and a text label, such as 'Failed' or 'Pending', so meaning never depends on color alone. - **Do:** Separate surfaces with a 1px border token plus shadow.sm on cards. Use shadow.md for popovers and shadow.lg for modals only. - **Do:** Keep content text at body-md (16px/1.6) minimum. Use muted-foreground only for secondary text such as timestamps, never for amounts or warnings. - **Don't:** Don't use neon gradients, glows or glassmorphism. Surfaces stay flat (card, muted, background) with 1px borders. - **Don't:** Don't use olive (brand) for errors, failed transactions or destructive actions. Use the destructive token (danger.600 light, danger.400 dark). - **Don't:** Don't use brand.400 or lighter as text or icon color on light backgrounds. It falls below 3:1 on neutral.50. - **Don't:** Don't set IBM Plex Serif below 24px, in all caps, or in buttons and form labels. - **Don't:** Don't use pure black or pure white page backgrounds. Use neutral.50 (light) or neutral.950 (dark). White is reserved for card and popover in light mode. - **Don't:** Don't use radius.full on buttons or inputs. Keep radius.md (6px), and use pills only for badges and network chips. - **Don't:** Don't place warning banners (warning.200 light / warning.400 dark) next to primary buttons without an icon. Show at most one warning banner per screen.