Pistachio Keystone

About 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.

Color

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.

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.

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.

Elevation

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.

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.

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.
• 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.
• 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.
• 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.
• 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.
• 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.
• Separate surfaces with a 1px border token plus shadow.sm on cards. Use shadow.md for popovers and shadow.lg for modals only.
• 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 use olive (brand) for errors, failed transactions or destructive actions. Use the destructive token (danger.600 light, danger.400 dark).
• 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 set IBM Plex Serif below 24px, in all caps, or in buttons and form labels.
• 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 use radius.full on buttons or inputs. Keep radius.md (6px), and use pills only for badges and network chips.
• 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.