Giant Pumpkin · visual source of truth
The single source of truth for ConnectIQ — the internal operational platform built for the Giant Pumpkin business. A calm, precise, data-forward light interface that inherits Giant Pumpkin's identity: the eight-point orange asterisk and pumpkin orange #FF6700.
Merged from three earlier efforts — the marketing brand, the ConnectIQ Figma, and the app style-kit. The light operational app is canonical; it borrows the brand's mark and the Figma's discipline of motion that reports state. This document is dark so specimens read clearly; every component in a light frame is the real product theme.
Operational, not marketing. ConnectIQ is a dense B2B control surface — CRM, deployment, subscriptions, inventory, support. It should feel calm, precise and trustworthy. Avoid oversized cards, giant hero areas, glassmorphism, heavy shadows and decorative gradients.
Light and warm. White working surfaces float over a warm off-white canvas (#F6F7F3). Black carries primary actions and headings. The room is quiet so data speaks.
Orange is identity, not fill. Pumpkin orange marks the logo, active navigation, tabs, links and focus — the current context. It is never the default filled button and never floods a large area.
Colour carries fixed meaning. Green = success / selected, yellow = warning / pending, red = error / destructive, blue = informational. Status is never colour alone — always text, an icon, or shape as well.
Motion reports state. Inherited from the ConnectIQ Figma: animation is information, not decoration. An equaliser bounces because audio is playing; a row flashes because its state changed; a dot pulses because a connection is live. If nothing changed, nothing moves. Durations stay short — 120/180/240ms.
Compact by default. Body text is 14px on a 4px grid. Preserve density — do not inflate to marketing-site spacing.
The mark is a thin eight-point asterisk — vertical, horizontal and two diagonals, round caps, stroke ~8% of the box. It scales to 1em and takes colour from currentColor. Use the Unicode glyph * never — it renders heavy and font-dependent; always use the SVG. In the app the mark is black or orange; on brand/dark surfaces it is orange. As a loader it rotates slowly (9s linear).
Neutrals layer by lightness, warm-tinted rather than pure grey. Orange is the single brand accent (#FF6700) with 50/100 tints for focus rings and pale fills. Each semantic family — success green, warning yellow, danger red, info blue — ships a 50 background, a 500 line/icon and a 700 text weight so foreground text always meets AA on its own pale ground. Application code references semantic variables (--background-canvas, --action-primary, --state-success-*) — never raw hex.
The dark theme reuses every hue above. All five semantic hues were measured against the dark surfaces and clear AA on all of them — orange 6.25:1 on #13151A, success 8.73, danger 5.46, info 5.72 — so nothing needed replacing. Only two colour values are dark-specific: warning becomes #E0A83A, because #F1BF00 scores 10.60 on #13151A and out-shouts the brand accent there; and #13151A keeps a slight blue cast, which is what stops a dark interface reading as flat black-and-white. Tinted state backgrounds are ~12% alpha washes of the hue and chart fills ~32% — never separate hexes, so the two themes cannot drift apart. On dark the primary action inverts to white-on-black, and elevation comes from the surface step plus a hairline rather than shadow.
Modelled (#9B8FD8) is the one sanctioned purple, and it is chart-scoped: a series, a legend entry, an area fill. It means projected, forecast, scenario — not yet real, a distinction the palette previously could not make. It is never a brand, navigation, focus or interaction colour; the prohibition on Figma selection purple is unchanged. Like every status cue it needs a second signal — a dashed or hatched fill, or a "forecast" label.
Neue Montreal — the Giant Pumpkin brand face — carries the two largest roles: Display and Page title, set at Bold (700, its heaviest roman) with tight tracking. It's a licensed Pangram Pangram font, self-hosted via @font-face from a local fonts/ folder; Inter is the automatic fallback until the woff2 files are in place, and Inter carries everything else — sections, body, labels. Weights: 400 body, 500–600 labels, 700 titles/display. Sentence case for headings and labels; uppercase only for compact 11px data labels and table headers, tracked 0.06em. The monospace family (DM Mono / data stack) is reserved for identifiers, serial numbers, codes, timestamps, KPI micro-labels and tightly aligned tabular data — never body copy.
Spacing steps: 4 · 8 · 12 · 16 · 20 · 24 · 32 · 40 · 48 · 64. No arbitrary values (13/17/22/30). Radius: 6px compact tags, 8px fields & controls, 12px cards / tables / panels, 16–20px dialogs, full pill only for status badges and switches. The design is flat: normal cards use a 1px neutral border and no shadow. Shadows appear only on floating layers — menus (sm), dropdowns & dialogs (md), major modals (lg). Focus is a 2px orange ring, never a persistent orange border.
Primary is black — the main commit action, at most one per view. Secondary is a white pill with a neutral border. Accent (orange) is rare, for brand-forward or promotional moments — not the everyday primary. Danger is a red outline that fills red on hover, reserved for destructive actions with explicit wording. Ghost is for low-stakes actions. Standard height 40px, compact 32px, radius 8px. Links are orange, weight 600.
Badges pair a fixed semantic colour with a dot and a word — so status survives greyscale, low vision and colour-blindness. The live pill is the ConnectIQ Figma's signature, brought into the light theme: the three-bar equaliser bounces only in the on state and collapses flat otherwise, so "playing" reads as live audio across a room. Not set keeps its own amber, never hiding as "silent" — the interface tells the truth about what it doesn't know.
Active tab: orange text + a thin orange underline. Active sidebar item: a quiet pale-green surface with a narrow orange edge indicator.
Active navigation uses a quiet warm-neutral or pale-green surface with a narrow orange indicator — orange marks where you are, it does not turn every item orange. Inactive items sit in muted text; hover is always subtler than active.
Cards are bounded white objects with a 1px neutral border and no shadow. A KPI leads; supporting labels drop to muted. Two motions live here and both mean something: a card flashes pale green once when its state changes (never on a poll that confirms the same state), and status reads from the card, not just the pill.
The side-label KPI: a colour-dotted uppercase mono label, a big number, and a very faint side-wash in the metric's semantic colour — a thin luminous line hugging the left edge, brightest at the top-left corner and fading in fast. It is a slim side accent, not a broad corner bloom. This is the second — and only other — sanctioned gradient in ConnectIQ, because a KPI is data. Keep it disciplined: alpha-only (one hue, fading to nothing), tint strength ≤ .28, always paired with the coloured dot + word so meaning never rests on the wash alone, and never on an ordinary content card. The number stays near-black; the tint is atmosphere, not emphasis. The recipe is a single narrow radial pinned to the top-left corner:
/* done — thin green side-wash on a white KPI card */
.kpi-done { background: radial-gradient(16% 82% at 0% 0%,
rgba(98,198,150,.26) 0%,
rgba(98,198,150,0) 60%); }
/* very narrow ellipse (16% wide, 82% tall) at 0% 0% = a thin line down the LEFT edge */
/* in-progress yellow rgba(241,191,0,.28) · scheduled blue rgba(76,143,247,.22)
incidents red rgba(242,88,75,.22) — all fade to alpha 0 by 60% */
Labels sit above fields; helper and validation text sit directly below. Controls are 40px tall (compact 32, customer-facing 48), radius 8px. Focus lights a 2px orange ring (--orange100 glow) — visible on white, pale-green and neutral grounds alike. Required fields use a marker or text, never colour alone. Disabled controls stay readable.
Toasts are white surfaces with a semantic left border and icon; inline banners use a pale semantic ground. Copy is concise and actionable — say what happened and what to do. Orange is reserved for process guidance tied to navigation, not for alerts.
Two restrained uses of a single accent stroke, inherited from the ConnectIQ Figma and recoloured to brand orange. The left-rule note is a 2px vertical bar beside muted text — for explaining a behaviour or rule inline, quieter than a banner. Its bar is orange by default (a brand emphasis); it may take a semantic colour when the message itself is semantic, but the meaning always rests in the text, never the tint. The header accent is a short 40×3px pill bar above a section title — a light way to mark a section without a heavy divider (left-aligned in dense app views, centred for customer-facing moments). Keep it to one accent — a single orange stroke, never a row of colours.
| Location | ID | Status | Uptime | Renews |
|---|---|---|---|---|
| Virgin Active — Doha | CIQ-4821 | Active | 98.2% | 2026-09-14 |
| Emirates Lounge — DXB | CIQ-4822 | Expiring | 99.1% | 2026-07-26 |
| Starbucks — Riyadh | CIQ-4823 | Incident | 91.4% | 2026-11-02 |
Tables are compact, white and bordered: 12px body, 11px uppercase headers on a very pale ground, identifiers in mono. Row hover is a quiet neutral; status is a badge (colour + word). Avoid zebra striping unless it measurably improves scanning.
Charts use the semantic palette with fixed meaning: green completed, yellow scheduled/caution, blue in-progress, orange the highlighted/brand series, red incidents/spikes, neutral baseline. No more than five categorical colours at once; labels or legends always present so colour is never the only signal. Tooltips are dark neutral with white text; grid lines subtle. Subtle alpha gradients are permitted inside charts only — nowhere else in the interface.
A single vertical alpha fade that is deepest at the base (the axis) and fades up to near-transparent at the top — it adds depth without adding a second hue, and grounds each bar on the baseline. Meaning still comes from the colour and the axis, never the gradient. The recipe is a two-to-three-stop linear-gradient(180deg, …) on alpha only, with the strong stop last (at 100% = bottom):
/* completed — green (transparent top → solid base) */
.bar-completed { background: linear-gradient(180deg,
rgba(98,198,150,.02) 0%,
rgba(98,198,150,.18) 45%,
rgba(98,198,150,.90) 100%); }
/* scheduled — yellow */ rgba(241,191,0, .02 → .16 → .85)
/* in-progress — blue */ rgba(76,143,247,.01 → .10 → .55)
/* baseline — neutral */ rgba(140,140,130,0 → .06 → .30)
Rules for the fade: keep it alpha-only (one hue per bar — never fade green into blue), anchor the full-strength stop at the base so bars sit on the axis, and fade upward toward transparency (or a very pale neutral). A selected or highlighted bar drops the gradient for a solid fill (plus a small selection ring), so the current pick reads instantly against its faded neighbours — the two solid bars above are the selected September and the highlighted October. Pair every gradient chart with the dark neutral tooltip shown here: #2b2b2e ground, white bold title, muted period label on the right, one line per breakdown. Gradients are sanctioned in exactly two places: chart data-viz (this vertical fade) and the KPI corner-wash (section 09). Nowhere else — never in chrome, buttons, nav, forms, dialogs, or ordinary content cards.
Restrained and meaningful. Durations: 120ms hover/press, 180ms standard, 240ms dialogs/drawers, on the standard easing cubic-bezier(.2,0,0,1). Looping motion is reserved for state that is genuinely live. Everything respects prefers-reduced-motion.
One house, one source of truth. From the marketing brand ConnectIQ keeps the eight-point asterisk and pumpkin orange as identity. From the ConnectIQ Figma it keeps the philosophy that motion reports state and the live status pill — but drops the legacy red as an accent (red is now strictly danger). The operational app tokens are canonical: light, warm, compact, semantic. Where any source disagreed, tokens.json won.
The standard sign-off lockup, carried over from the ConnectIQ Figma: the eight-point asterisk (the ConnectIQ logo — four strokes, not the three-stroke six-point variant), the built-with credit with a double-thump beating heart, and the copyright line. On hover the whole block lifts in tone and the mark rotates 90° on a gentle spring (.5s cubic-bezier(.3,1.2,.4,1)) — a small, calm flourish, distinct from the continuous loader spin. Sits above a hairline top border, centred, muted until hovered. Use the SVG mark, never the Unicode * glyph or a six-point version.
The compact machine-readable definition. Paste this block into a Claude Project's knowledge, a .md file, or Lovable Project Knowledge as the ConnectIQ design system rules. It is the whole system distilled to what an LLM needs to build on-brand while staying free to design.
ConnectIQ Design System v1.1 — merged 23 July 2026 from the Giant Pumpkin brand, the ConnectIQ Figma, and the app style-kit (tokens.json / DESIGN.md). v1.1, 6 August 2026: absorbed the Ember Dark study as two additive themes — dark for the application and presentation for decks and reports. No light-theme colour value changed; application body type moved 13px → 14px. Ember's hues were measured rather than assumed: all five existing semantic hues already passed AA on its surfaces, so only warning diverges on dark (#E0A83A) and only one hue was genuinely new (modelled). Ember's #636363 caption grey was rejected as an AA failure on its own surfaces and corrected to #858585. See DESIGN.md §20.1 for the change record and §21–22 for the themes.