--- version: 1.0 name: Indexly description: The portable design system for Indexly — warm, precise, and built for clear AI search intelligence. colors: background: "#F7F7F4" foreground: "#0F1713" card: "#FFFFFF" card-foreground: "#0F1713" primary: "#30483A" primary-foreground: "#F7F7F4" secondary: "#F2F0ED" secondary-foreground: "#23332A" muted: "#F2F0ED" muted-foreground: "#805E48" accent: "#FFEDD5" accent-foreground: "#7C2D12" destructive: "#DC2626" destructive-foreground: "#FAFAFA" border: "#E8DCC6" input: "#E8DCC6" ring: "#F97316" sidebar: "#F2F0ED" sidebar-foreground: "#1D2A23" sidebar-primary: "#30483A" sidebar-accent: "#FFEDD5" chart-1: "#F97316" chart-2: "#4D7058" chart-3: "#9A7458" chart-4: "#FDBA74" chart-5: "#9FBEA7" dark-background: "#0F1713" dark-foreground: "#F7F7F4" dark-card: "#1D2A23" dark-card-foreground: "#F7F7F4" dark-primary: "#9FBEA7" dark-primary-foreground: "#0F1713" dark-secondary: "#23332A" dark-secondary-foreground: "#F7F7F4" dark-muted: "#1D2A23" dark-muted-foreground: "#719879" dark-accent: "#7C2D12" dark-accent-foreground: "#FFF7ED" dark-border: "#293D32" dark-input: "#293D32" dark-ring: "#FB923C" dark-sidebar: "#0F1713" typography: display: fontFamily: Inter fontSize: 64px fontWeight: 700 lineHeight: 1.02 letterSpacing: -0.04em headline-lg: fontFamily: Inter fontSize: 40px fontWeight: 650 lineHeight: 1.1 letterSpacing: -0.03em headline-md: fontFamily: Inter fontSize: 28px fontWeight: 600 lineHeight: 1.2 letterSpacing: -0.02em body-lg: fontFamily: Inter fontSize: 18px fontWeight: 400 lineHeight: 1.6 body-md: fontFamily: Inter fontSize: 16px fontWeight: 400 lineHeight: 1.6 body-sm: fontFamily: Inter fontSize: 14px fontWeight: 400 lineHeight: 1.5 label: fontFamily: Inter fontSize: 12px fontWeight: 600 lineHeight: 1.3 letterSpacing: 0.08em mono: fontFamily: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace fontSize: 13px fontWeight: 400 lineHeight: 1.5 rounded: sm: 6px md: 8px lg: 12px xl: 16px "2xl": 24px full: 9999px spacing: xs: 4px sm: 8px md: 16px lg: 24px xl: 32px "2xl": 48px section: 96px gutter: 32px components: button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.primary-foreground}" rounded: "{rounded.md}" padding: 12px 20px button-secondary: backgroundColor: "{colors.secondary}" textColor: "{colors.secondary-foreground}" rounded: "{rounded.md}" padding: 12px 20px button-accent: backgroundColor: "{colors.accent}" textColor: "{colors.accent-foreground}" rounded: "{rounded.md}" padding: 12px 20px card: backgroundColor: "{colors.card}" textColor: "{colors.card-foreground}" borderColor: "{colors.border}" rounded: "{rounded.xl}" padding: 24px input: backgroundColor: "{colors.card}" textColor: "{colors.foreground}" borderColor: "{colors.input}" rounded: "{rounded.md}" padding: 12px sidebar: backgroundColor: "{colors.sidebar}" textColor: "{colors.sidebar-foreground}" --- # Indexly Indexly is the AI Search Visibility and SEO platform that turns a noisy, fast-moving data category into clear next actions. The brand should feel **grounded, intelligent, warm, and quietly confident**. This file is the source of truth for product UI, marketing pages, generated assets, and agent-authored interfaces. It is built around the shadcn/ui semantic token contract used in `styles/shadcn-theme.css`. ## Brand idea **Make visibility clear.** Indexly helps brands understand where they appear, why competitors win, and what to do next. Every interface should reduce ambiguity. Prefer a decisive hierarchy, plain language, useful evidence, and one obvious next action. Emotional targets: calm expertise, useful momentum, human intelligence, earned trust. Avoid: generic SaaS blue, neon AI gradients, sci-fi chrome, noisy dashboards, inflated claims, and decoration without information. ## Color system The palette combines three roles: - **Brand green** carries trust, primary actions, navigation, and durable brand identity. - **Pixel neutrals** create warm, tactile canvases and structure. They replace sterile gray with restrained brown undertones. - **Orange** marks focus, highlights, active data, and moments of momentum. It is an accent, not the dominant brand color. ### Core palette | Role | Token | Hex | Use | | ------------- | -------------------------- | --------- | ----------------------------------- | | Canvas | `pixel-50` / `background` | `#F7F7F4` | Page backgrounds | | Quiet surface | `pixel-100` / `secondary` | `#F2F0ED` | Secondary controls, wells | | Structure | `pixel-200` / `border` | `#E8DCC6` | Borders and separators | | Warm copy | `pixel-600` | `#805E48` | Secondary editorial details | | Ink | `brand-950` / `foreground` | `#0F1713` | Primary text | | Primary | `brand-600` / `primary` | `#30483A` | Main actions and active states | | Brand mid | `brand-500` | `#4D7058` | Charts and supporting accents | | Brand soft | `brand-100` | `#E1EBE4` | Positive or selected backgrounds | | Signal | `orange-500` / `ring` | `#F97316` | Focus, data highlights, key moments | | Signal soft | `orange-100` / `accent` | `#FFEDD5` | Accent wells, tags, hover states | ### Color rules - Use semantic tokens (`bg-primary`, `text-foreground`, `border-border`) in components. - Keep most screens 70–80% pixel neutrals and white, 15–25% brand green, and under 10% orange. - Use orange once per local composition when possible. It should direct attention, not tint the whole interface. - Do not introduce blue or purple for generic AI styling. Product/provider logos may retain their own colors. - Use red only for destructive actions and real errors, never for ordinary negative trends. - In dark mode, use green-black layers rather than neutral black. Raise surfaces through value and borders, not glow. ## Typography **Inter** is the primary Indexly typeface for display, body, labels, and interface text. The same family across the system makes dense product information feel coherent and dependable. - **Display:** Inter Bold, tight tracking (`-0.04em`), compact line height. Aim for 48–72px on desktop and 38–48px on mobile. - **Headlines:** Inter SemiBold, slightly tight tracking. Use sentence case. - **Body:** Inter Regular, 16–18px, generous 1.55–1.65 line height. - **Labels:** Inter SemiBold, 11–13px. Uppercase only for short metadata or section eyebrows. - **Mono:** System monospace for tokens, code, URLs, prompt IDs, and data values that benefit from fixed widths. Write concise headings with a concrete outcome. Avoid title case everywhere, overly clever copy, and long centered paragraphs. ## Layout Use an **editorial dashboard rhythm**: clear hierarchy, asymmetric compositions, and structured data inside quiet surfaces. - Maximum content width: 1400px. Use 24–32px desktop gutters and 16–20px mobile gutters. - Marketing heroes may use a 5/7 or 6/6 split. Product layouts should prioritize scannability over symmetry. - Use a 4px spacing base, with 8, 16, 24, 32, 48, and 96px as the preferred rhythm. - Group related information inside bordered white cards on the warm canvas. - Leave enough empty space for one element to lead. Do not fill every grid cell. - Data density may be high, but visual density should remain calm through alignment and repetition. ## Shape and depth Indexly uses **soft but disciplined geometry**. - Controls: 8px radius. - Cards: 12–16px radius. - Hero panels and large media: up to 24px radius. - Pills are for tags, filters, statuses, and compact metadata only. - Use 1px warm borders as the default separator. - Shadows should be broad, soft, and low-opacity. Pair them with a border rather than making them heavy. - A slight rotation may be used on a single editorial artifact or mockup. Never rotate functional product UI. ## Components Built for shadcn/ui. Always begin with semantic tokens and established primitives. - **Primary button:** `brand-600` with warm-white text. One leading action per view. - **Secondary button:** `pixel-100` with dark brand text and a warm border when extra definition is needed. - **Accent button/tag:** soft orange with dark burnt-orange text. Reserve for emphasis, not default actions. - **Cards:** white on `pixel-50`, warm border, 16px radius, 24px padding. - **Inputs:** white fill, warm border, orange focus ring. Labels stay visible above the field. - **Sidebar:** `pixel-100` in light mode and `brand-950` in dark mode. Active navigation uses brand green or soft orange. - **Charts:** orange → brand green → warm brown → soft orange → soft green. Grid lines use `border` at low contrast. - **Badges:** use muted or brand-soft fills for ordinary states. Status colors must retain meaning. - **Tables:** favor alignment, tabular numerals, quiet dividers, and restrained row hover states. ## Data visualization Charts are evidence, not decoration. - Lead with the metric and its plain-language meaning before showing a chart. - Orange identifies the primary series or current point. Green supports comparisons and positive context. - Avoid more than five simultaneous series. If more are required, add filtering or small multiples. - Direct-label important lines and values when space allows; do not force users to bounce between chart and legend. - Never use a chart where a single number or short table communicates the answer more clearly. ## Voice and content Indexly sounds informed, direct, and useful. - State what happened, why it matters, and what to do next. - Prefer “Your brand appeared in 38% of tracked answers” to “Visibility score optimized.” - Use “AI search” as the broad category. Name engines when the distinction matters. - Keep CTAs specific: “Track your visibility,” “Review citation gaps,” “Create content brief.” - Avoid hype words such as revolutionary, magical, effortless, or game-changing. - Do not anthropomorphize AI systems when a precise description is available. ## Accessibility - Maintain WCAG AA contrast for text and controls. - Never rely on color alone for status or chart interpretation. - Preserve visible keyboard focus using the orange ring token. - Use minimum 44px touch targets for primary mobile actions. - Respect reduced motion and keep non-essential transitions under 250ms. - Use real headings, landmarks, labels, and button elements before adding ARIA. ## Do and don’t **Do** - Use warm whitespace and strong information hierarchy. - Let forest green carry the Indexly identity. - Use orange sparingly to signal momentum and focus. - Make complex AI visibility data feel understandable. - Use real product evidence, charts, source excerpts, and useful examples. - Keep generated UI on the semantic shadcn token contract. **Don’t** - Don’t default to blue/purple AI gradients or glassmorphism. - Don’t cover whole sections in bright orange. - Don’t make every card float with a large shadow. - Don’t mix unrelated radius systems or use pills for full-size buttons by default. - Don’t add decorative metrics, fake charts, or vague dashboard filler. - Don’t invent one-off hex values when a palette or semantic token already fits. ## Implementation checklist 1. Use `styles/shadcn-theme.css` for semantic CSS variables. 2. Use `brand`, `pixel`, and Tailwind `orange` scales already defined in `tailwind.config.js`. 3. Use Inter through `font-sans`; use `font-mono` only for technical content. 4. Build from shadcn primitives and semantic tokens before custom CSS. 5. Test the final composition in light and dark mode, at mobile and desktop widths. 6. Verify keyboard focus, contrast, loading, empty, error, and long-content states. When uncertain, choose the option that makes the next action clearer and the interface calmer.