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. Control height depends on context — see section 17. 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. Control height depends on context — see section 17. 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.
Added in v1.2 as DESIGN.md §23. It sets where things go and how they respond to width. It changes no colour, type, radius, border, shadow or spacing value. It applies to the light and dark application themes, not presentation.
| Window width | Shell |
|---|---|
| below md · <768 | Sidebar is a drawer, opened from a 56px top bar |
| md–lg · 768–1023 | 64px rail |
| lg up · 1024+ | Full 224px sidebar |
Breakpoints size.breakpoint: sm 640 · md 768 · lg 1024 · xl 1280, each applying from its width up. Only the shell uses the window width. Filter bars, metadata strips and card grids respond to the width of the content column, which is a CSS container.
| Page type | Max content width |
|---|---|
| List, detail, settings | 1120px contentReadable, centred beside the sidebar |
| Dashboards, wide data | 1440px pageMax |
Side padding 24px from md, 16px below md. Top padding 32px on every page. Every page template states which width it uses.
| Context | Height |
|---|---|
| Dense app views | 32px control.sm — toolbars, filter bars, table actions, tabs, sidebar items, page-header buttons |
| Forms and dialogs | 40px control.md — form fields |
| Customer-facing | 48px control.lg |
| Below md or touch | at least 40px high with a 44px hit area |
One height per row. Radius stays 8px at every height. The 6px radius is only for controls smaller than 32px, such as 24px icon buttons in table rows and chips.
| Pattern | Rule |
|---|---|
| Page header | One row: title left, secondary buttons then the one primary action right. The primary action stays in the row at every width. Below sm, secondary actions move into a ··· menu. |
| Filter bar | Search, selects, icon buttons in one row (2fr repeat(n, 1fr) auto). Under 640px of container width, everything stacks full width. Never a partial second row. |
| Table | Scrolls sideways when narrow; columns are never hidden. Minimum widths: status 160, date 140, actions 72. Pagination below: "Page X of Y · N items". |
| Detail page | Title row (icon, name, status, actions), then a metadata strip of up to 4 columns that becomes 2 under 768px of container width, then sections. |
| Mobile inputs | Input text is 16px below sm, so iOS Safari does not zoom on focus. |
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. v1.2, 24 September 2026: added layout and page-pattern guides (section 17 here, DESIGN.md §23) — breakpoints and shell behaviour, a centred 1120px column for list and detail pages, control height by context, and the page header, filter bar, table and detail-page patterns. No colour, type, radius, border, shadow or spacing value changed. See DESIGN.md §20.2.