Generated brand specimen
Framework Console
Quiet operational tooling for decision work.
The console favors dense, legible product surfaces over marketing composition. Serif type carries section identity; Hanken Grotesk carries repeated controls and table work.
Canon
The brand layer is generated from seed YAML: primitive color ramps, semantic references, typography tiers, spacing, radius, elevation, and motion are all emitted artifacts.
Brand chrome
Console top bars use the Framework wordmark treatment from the public site: serif name, olive dot, and compact product context.
- Shared fonts
- Fraunces for brand and headings, Hanken Grotesk for interface copy, JetBrains Mono for code and compact metadata.
- Spacing
- Console spacing utilities resolve through the generated four-pixel Framework spacing rhythm.
- Letter spacing
- Console components use default letter spacing. The public site and console share type families without ad hoc caps spacing in product UI.
Drawer
Right-side drawers use a tokenized backdrop, close on backdrop click, close with Escape, and focus the close control on open.
Provenance labels
Provenance labels sit on the message boundary. Use them for sample selections and FrameworkAI responses; ordinary operator entries stay unlabeled.
Console shell
Sample artifact · Demo
Consolidated Ink
Console pages use a persistent Framework top bar and a left navigation rail that collapses from text labels to semantic icons.
Loading state
Mapping the artifact
Node-map motion uses olive accent tones and the same spacing rhythm as the shell.
Primitive color ramps
Anchor
Lime
--color-lime-*Parchment
--color-parchment-*Ink
--color-ink-*Harmonic
Red
--color-red-*Orange
--color-orange-*Amber
--color-amber-*Yellow
--color-yellow-*Green
--color-green-*Emerald
--color-emerald-*Teal
--color-teal-*Cyan
--color-cyan-*Sky
--color-sky-*Blue
--color-blue-*Indigo
--color-indigo-*Violet
--color-violet-*Purple
--color-purple-*Fuchsia
--color-fuchsia-*Pink
--color-pink-*Rose
--color-rose-*Neutral
Stone
--color-stone-*Neutral
--color-neutral-*Gray
--color-gray-*Zinc
--color-zinc-*Slate
--color-slate-*Semantic token map
| Role | Light | Dark | Swatch |
|---|---|---|---|
| color.ground.paper | parchment.0 | ink.950 | |
| color.ground.subtle | parchment.50 | ink.900 | |
| color.surface.raised | parchment.0 | ink.900 | |
| color.surface.sunken | parchment.100 | ink.950 | |
| color.surface.overlay | parchment.50 | ink.800 | |
| color.text.primary | ink.950 | parchment.0 | |
| color.text.secondary | ink.800 | parchment.100 | |
| color.text.muted | stone.600 | stone.300 | |
| color.border.subtle | parchment.300 | ink.700 | |
| color.border.strong | parchment.500 | stone.600 | |
| color.accent.base | lime.500 | lime.300 | |
| color.accent.strong | lime.700 | lime.200 | |
| color.accent.soft | lime.200 | lime.800 | |
| color.status.success | green.600 | green.300 | |
| color.status.warning | amber.600 | amber.300 | |
| color.status.danger | red.600 | red.300 | |
| color.status.info | sky.600 | sky.300 |
Typography tiers
Spacing taxonomy
Inset
Even padding inside a component.
Inset squish
Tight vertical padding with wider horizontal padding.
Inset stretch
Taller vertical padding for multi-line entry.
Stack
Vertical gap between siblings.
Inline
Horizontal gap between siblings.
Grid
Row and column rhythm across a two-dimensional surface.
Elevation and motion
Flat inline content.
Hover lift.
Dropdowns and small popovers.
Raised application cards.
Dialogs and overlays.
Form primitive
Empty state
No workflows need review
The empty state uses the same quiet product tone as settings surfaces.
Schema-driven inputs
| Kind | Component | Value |
|---|---|---|
| Short text | Input | string |
| Long answer | Textarea | string |
| Yes / no | ChoiceGroup | boolean |
| Single select | Select | string |
| Multi select | ChoiceGroup | string_array |
| Multi-select dropdown | MultiSelectDropdown | string_array |
| Chips with custom values | ChoiceGroup | string_array |
| 1-5 scale | Scale | number |
Portal surfaces
My Workflows
/portal/workflows
Customer-facing list of approved and in-progress workflow artifacts.
Continue Workflow Intake
/portal/workflows/:workflowId/continue
Customer-facing continuation flow that captures missing source evidence.
Review Queue
/review
Framework reviewer queue for generated workflow drafts and continuation versions.
Filters and operational table
Sales, Operations
| Customer | Workflow | Status | Quality | Owner |
|---|---|---|---|---|
| Consolidated Ink | Quote to fulfillment | Ready for review | 92% | Framework |
| Kinetic PT | Referral intake | Needs evidence | 74% | Customer |
| Summit HVAC | Dispatch triage | In progress | 81% | Framework |
Component inventory
Intake and artifact components
Console intake surfaces use the same generated token contract as the primitive library: sample launch, artifact navigation, status recovery, workflow preview, and examine panels are all represented here before they ship elsewhere.
Intake launch components
Sample starters
Start from a realistic opener and continue the path.
Artifact navigation chrome
Framework Console · Specimen · Demo
Consolidated Ink
Responsive header, shared surface control, tokenized actions
Workflow preview
Actors
2Steps
2Confirm customer intent, due date, and artwork readiness.
Choose equipment, handoff timing, and exception path.
Decisions
1- Quote
- Request details
Status and recovery
Draft is updating
Synthesis disconnected
Examine surface
Interactive modes
Selection state carries across mode switches.
1 · Flow
Lead Acquisition → Quote Delivery
Cycle: 1–3 days · Actor: Sales Rep + Owner (pricing escalation) · Cost: $25–50/lead
Sales
6 steps
Billing
5 steps
Errors ordering from distributors: black heather vs black t-shirts from S&S/Sanmar, youth vs adult size hats from Richardson. Monetary and reputational cost.
No set pricelists. Every quote requires fresh margin calculation using live vendor pricing. Costs $25-50 per quote in rep time.
If the production artist left, mockup creation would shift to overseas artists, potentially delaying sales closures. Subjective sizing also creates customer mismatches.
Each PO takes 10-15 minutes. Jobs can have 1 to 7+ POs. Submitted via email PDFs to vendors. Significant time taken from selling.
Vendor pricing is fragmented: printers have static pricelists, blank distributors have live pricing that changes frequently. No unified view.
At current size each sales person runs the full lifecycle. Lead volume is constrained by rep capacity, not market demand. Scaling requires hiring.
Vendor selection primarily based on customer geographic location and due date. Closer vendors for tighter deadlines.
Target margin: 40%. Acceptable floor: 35%, possibly 30% for large orders. Below 40% requires owner approval.
Printed apparel: 7-10 business days. Patches: 15-20 business days. Overseas parts add 14-21 days.
Deep product knowledge of logo size constraints and embellishment limitations per garment style. Learned through 3-8 months of training.
Strategy briefs focus on getting customer buy-in with one simple question they can answer on the go, rather than sending emails with too many prices and options.
Overseas patch products (200-500 units): use competitor pricing. Apparel jobs (500-1000 units): use vendor pricelists directly. Printer = static pricing, distributor = live pricing.
Live workflow sketch · for reference
Actors
4Steps
11Customer finds Consolidated Ink via search, referral, or repeat visit. Submits a quote request through the WordPress website (Gravity Forms) or sends an email with project details.
Quote request arrives via WP website form (Gravity Forms) or email, received in Pipedrive CRM.
Pipedrive triggers Zapier flow to ChatGPT, which generates a sales strategy brief for the rep on how to respond to the lead.
Rep reaches out using the strategy brief guidance. Focus on one simple question to get buy-in without overwhelming the customer.
Sales rep determines if the customer is ready to proceed based on communication signals and timeline urgency.
Determine pricing method: use vendor pricelists directly for larger apparel jobs (500+ units) or competitor pricing for overseas patch products (200-500 units).
Calculate profit margin for the quote. Target margin: 40%. Below 40% triggers owner approval.
Sales Rep asks Customer if they are willing to cover expedited rush fees for production or shipping. Customer decides — if yes, price increases and may push margin below 40%, triggering Owner escalation.
Sales Rep checks if the calculated margin is below the 40% floor. If at or above 40%, the quote proceeds directly to send. If below, escalates to Owner for approval.
Owner reviews the below-40% margin and decides whether to approve the exception (down to 35% or 30% depending on order size) or reject it, sending the Sales Rep back to rework pricing.
Final quote with all pricing decisions resolved — margin, rush fees, competitive adjustments — sent to customer through Quotient.
Decisions
6- Local Vendor
- Distant Vendor (Price)
- In-House Production
- Domestic Only
- Overseas + Domestic Finish
- Margin ≥ 40%
- Margin < 40%
- No Rush Needed
- Rush Fee Applied
- Customer Declines
- Approved
- Rejected
- Sizing Approved
- Rework Needed
Generated specimen contract
Foundations
foundationsToken primitives, semantic colors, type, spacing, radius, elevation, and motion.
app/design-system/page.tsx
Form controls
form_controlsInputs, textareas, selects, multi-select dropdowns, choice groups, validation, and helper text.
components/ui
Filters
filtersSearch, multi-select filters, saved-view layout, result counts, and clear/apply actions.
components/ui/FilterBar.tsx
Operational table
power_tableSortable, filterable, review-queue-grade tables for dense console work.
components/ui/DataTable.tsx
Portal surfaces
portal_surfacesCustomer workflow list, continuation flow, and Framework review queue shell.
lib/portal/surface-registry.ts
Intake and artifact surfaces
intake_surfacesSample openers, live workflow preview, demo/examine chrome, and post-intake analysis panels.
components/intake
Console chrome
console_chromeFramework top bar, collapsible sidebar, semantic icon rail, and asynchronous loading states.
components/console
Component state coverage
| Component | Capabilities | States |
|---|---|---|
Multi-select dropdown MultiSelectDropdown | multi-value selection, chip summary, checkbox list | default, hover, focus, open, selected, disabled, error |
Filter bar FilterBar | global search, field filters, saved-view ready layout | default, loading, empty, dirty, error |
Operational data table DataTable | sortable columns, filterable rows, pagination-ready structure | default, loading, empty, error, selected, sorted, filtered |
Segmented control SegmentedControl | mode switching, route-backed links, state-backed buttons | default, hover, focus, active, disabled |
Framework wordmark FrameworkWordmark | brand mark, product context label, link wrapper | default, hover, wrapped |
Console shell ConsoleShell | global brand chrome, collapsible sidebar, icon rail | default, active route, collapsed, mobile |
Semantic icon ConsoleIcon | semantic names, outlined symbol style, sidebar-ready sizing | default, active, muted |
Framework loader FrameworkLoader | node-map motion, status role, reduced-motion support | loading, error recovery |
Drawer Drawer | right-side panel, backdrop dismissal, Escape dismissal | open, closed, focused close, backdrop |
Tooltip Tooltip | hover explanation, focus explanation, disabled action guidance | hidden, hover, focus |
Provenance label ProvenanceLabel | source attribution, message-boundary placement, selection state | default, positioned on message |
Sample opener gallery SampleOpenerGallery | sample launch, responsive scroll-snap cards, disabled streaming state | default, hover, focus, disabled |
Artifact surface header ArtifactSurfaceHeader | artifact navigation, surface toggle, metadata line | default, active surface, wrapped controls |
Workflow preview WorkflowRenderer | live draft rendering, lane grouping, actor rows | empty, loading, populated |
Examine surface ExamineSurface | interactive mode switcher, journey timeline, analysis panels | default, active tab, empty panel |
Status callout Callout | semantic status, retry action slot, alert/status roles | default, action, alert |