Product Design System and Style Guide

Design-system name: Effority Signal Fabric

1. Design Intent

Telynt looks like one original product, not a collection of generic enterprise dashboards. Its visual identity combines the Telynt product mark and wordmark, with the subordinate “by Effority” endorsement, and a distinctive interface grammar built around signals, evidence, traceability, and faceted geometry.

The implemented design is:

• precise rather than decorative;
• proactive rather than alarming;
• evidence-led rather than opaque;
• serious enough for project, commercial, and ethics decisions;
• recognizable as Telynt even when the full logo is temporarily outside the viewport.

Product Signature

The product’s recognizable signature is the combination of:

1. Effority Yellow as a controlled navigation and evidence accent;
2. Deep navy navigation and cobalt interaction color, balanced by graphite typography and the Telynt wordmark;
3. The Signal Spine, a vertical yellow line that identifies the selected destination or active finding;
4. The Effority Facet, a restrained diagonal cut inherited from the manufacturer's design language, not a substitute for the Telynt product mark;
5. The Evidence Thread, a line-and-node pattern that visually connects a finding to its sources;
6. Confidence and severity shown separately, using different visual encodings.

These elements make the product identifiable without turning every screen into a branded poster.

2. Brand Asset

The product brand is Telynt. The approved lockup combines its connected-node symbol, the Telynt wordmark and the smaller by Effority manufacturer endorsement. The Effority corporate logo does not replace the Telynt product logo.

Expand image ↗

Use the existing approved assets without redrawing or regenerating them:

2.1 Logo Colors and Variants

The approved Telynt files define the logo artwork and its colors. The application tokens in Section 4 define interface colors; they are not instructions to reconstruct or recolor the logo.

Preserve transparency and render each variant on its intended surface. The asset files remain the source of truth; changes to them follow a controlled, versioned brand update.

2.2 Required Placement

For authenticated desktop screens, the full Telynt by Effority lockup appears in the upper-left brand area of the global sidebar. The navy sidebar surface continues behind the logo without a white plate or horizontal color break.

• Expanded sidebar: full reversed Telynt by Effority lockup, with a white wordmark, light blue-gray endorsement, cyan/cobalt symbol, and yellow insight node.
• Collapsed sidebar: approved symbol-only asset.
• Mobile: approved symbol-only asset in the top-left header.
• Login, consent, portal, and public-status pages: full standard logo in the upper-left; upper-right placement is allowed only when layout constraints require it.
• Reports and exports: full standard logo in the report header; do not repeat it in every page section.

2.3 Logo Sizing

The full lockups have an aspect ratio of approximately 3.17:1. Set one dimension and preserve the intrinsic ratio; a height constraint reduces the width proportionally. Clear space around the logo must be at least the diameter of the yellow insight node. The logo must never touch a divider, menu label, or viewport edge.

2.4 Logo Restrictions

• Do not redraw or retype the wordmark.
• Do not stretch, skew, rotate, outline, shadow, or recolor the supplied asset.
• Do not place the symbol on a surface that obscures its branches or yellow insight node.
• Do not place the standard dark wordmark directly on the dark navy sidebar.
• Authenticated navigation uses the approved reversed treatment directly on navy; it must not sit inside a white rectangle, card, capsule, or badge.
• Use the approved Telynt files with correct alpha handling; do not substitute the Effority corporate artwork or add a background plate to the reversed asset.
• Use the approved symbol-only asset for compact placement; do not crop the wordmark to invent a compact mark.
• Do not add another logo to the same application frame.

3. Core Design Principles

3.1 Evidence Is a First-Class Object

Every meaningful insight, score, recommendation, or alert must expose its evidence path. “View evidence” is a consistent component, not a text link styled differently on each screen.

3.2 One System, Many Roles

Role-specific content changes the data and permitted actions, not the visual grammar. A CEO, project manager, salesperson, and ethics reviewer immediately recognize the same product.

3.3 Information Density with Clear Hierarchy

The product may display dense operational data, but it uses spacing, grouping, headings, and progressive disclosure instead of tiny text or excessive cards.

3.4 Serious Signals Without Sensationalism

Ethics, relationship, and critical-risk interfaces use restrained color, neutral wording, and clear review states. Large red backgrounds, siren imagery, and accusatory language are prohibited.

3.5 Human Authority Is Visible

The interface distinguishes AI suggestion, source fact, human review, and executed action. Controls such as Accept, Modify, Dismiss, Escalate, and Roll back show who is responsible for the next decision.

3.6 Accessibility Is Structural

Color is never the only status indicator. Keyboard navigation, focus, readable type, contrast, and screen-reader semantics are defined at component level.

4. Color System

4.1 Brand, Navigation, and Neutral Tokens

4.2 Semantic Tokens

Brand yellow is not the warning color. Warning, critical, success, and informational meaning use separate accessible hues. Cobalt blue is the principal interaction color; Effority yellow is reserved for unmistakable brand moments and evidence markers.

4.3 Usage Rules

• Use deep navy for the persistent sidebar and cobalt blue for selection, primary actions, links, and evidence interaction.
• Use yellow for the logo, the 3 px Signal Spine, numbered Evidence Thread nodes, focus accents, and rare highlighted evidence.
• Use semantic colors only when a state has that meaning.
• Never place yellow.500 text on white; use yellow.700 or graphite text.
• Never use a full-card critical background. Use a 3 px spine, icon, label, and tinted region.
• A chart must remain understandable in grayscale through labels, markers, line styles, or patterns.
• Confidence uses blue/graphite bars and percentages; severity uses semantic labels and icons.
• Every page contains substantially more blue and neutral surface than yellow; yellow does not dominate large cards or metric icons.

4.4 Chart Palette

Preferred ordered series:

1. #FFDD4F — Effority yellow
2. #285F9E — evidence blue
3. #14736F — teal
4. #66509B — violet
5. #C16C20 — orange
6. #6B7580 — graphite neutral

Red and green are reserved for explicit negative and positive status, not ordinary categorical series.

5. Typography

5.1 Font Families

Fonts must be self-hosted in private and air-gapped installations. The application must not make runtime font requests to a public CDN.

5.2 Type Scale

Minimum body size is 12 px. Dense tables may use 12 px only when row height remains at least 40 px.

5.3 Writing and Number Rules

• Use sentence case for controls, cards, and explanations.
• Use title case only for global product areas and page titles.
• Use tabular figures for KPI values, timestamps, durations, money, and confidence.
• Do not use all caps except short navigation section labels.
• Do not use color alone to emphasize a word inside a sentence.

6. Layout and Spacing

6.1 Grid

The system uses a 4 px base grid.

6.2 Application Frame

Dashboards may use the full available content width. Long narrative text and policy content must use the maximum reading width.

6.3 Responsive Breakpoints

7. Shape, Borders, and Elevation

7.1 Corner Tokens

Avoid excessive pills and highly rounded cards. Effority is geometric and precise, not soft or playful.

7.2 Effority Facet

Selected or featured components may use one clipped upper-right corner:

clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%);

Rules:

• Use the facet only on selected navigation flyouts, key finding cards, and branded empty states.
• Maximum one faceted component per visual group.
• Do not apply it to form inputs, tables, every card, or modal surfaces.
• The facet is decorative and must not reduce focus visibility or hit area.

7.3 Borders

• Default card border: 1 px neutral.200.
• Strong divider: 1 px neutral.300.
• Active input: 2 px graphite.900 plus focus ring.
• Finding spine: 3 px semantic or brand color.

7.4 Elevation

The interface uses borders before shadows. Dashboards do not look like floating stacks of unrelated cards.

8. Signature Interface Patterns

8.1 Signal Spine

A 3 px vertical line on the left edge communicates selection or finding state.

• Brand yellow: Signal Spine, Evidence Thread nodes, focus accent, or selected neutral finding marker.
• Cobalt blue: current global navigation destination, primary interaction, and evidence link.
• Semantic amber/red/green: status of an operational finding.
• Paired with icon, label, text weight, and surface tint.
• Never placed on every card simultaneously.

8.2 Evidence Thread

The Evidence Thread connects an interpretation to sources through a vertical or horizontal line with numbered nodes.

Each node contains:

• source number;
• source type icon;
• meeting or document title;
• date and timestamp/page/clause;
• speaker or author when permitted;
• confidence/source-quality indicator;
• “Open timestamp” or “Open source” action.

Packages reuse this visual pattern for findings, SOW comparison, relationship timelines, recommendations and assistant answers. Each package defines its own data and permissions; the shared design system defines only the presentation convention.

8.3 Evidence-Backed Insight Card

This shared visual pattern displays a derived statement without defining its domain schema. The Findings package specializes it for its own finding lifecycle. The pattern presents:

1. domain and finding type;
2. neutral one-sentence statement;
3. object and time context;
4. separate severity and confidence;
5. evidence count;
6. review status;
7. primary evidence action;
8. optional human-review actions.

The card may use the Effority Facet when selected. It never uses a large AI sparkle icon as its identity.

8.4 Source-Fact / AI-Inference / Human-Decision Labels

8.5 Severity and Confidence

These concepts must never share one score or badge.

• Severity: categorical label with icon and semantic color: Low, Medium, High, Critical.
• Confidence: percentage or calibrated band with a blue/graphite segmented bar: Low, Medium, High.
• Screen readers announce both values independently.

9. Navigation Components

9.1 Sidebar

• Continuous deep navy navy.950 background from the top edge through the footer, including the logo area.
• Reversed Telynt by Effority lockup at the top: white wordmark, light blue-gray endorsement, cyan/cobalt symbol, and yellow insight node.
• White default labels at readable contrast; muted labels use a cool blue-gray.
• Yellow Signal Spine and cobalt-blue selected surface.
• Selected text and icon remain white; the yellow spine is the brand cue.
• Hover uses navy.900; expanded groups use navy.800 sparingly.
• Icons use one consistent 20 px outline family.
• Section labels use 11 px uppercase with tracking.
• Destinations, group labels and ordering come from the installed InterfacePackages and the authorized solution composition. No business destination is mandatory in the platform shell.
• Footer utilities use declared shell slots; contextual Help appears when the help package is installed. User identity and profile controls are not duplicated in the sidebar.

9.2 Top Header

• White surface with bottom border.
• Breadcrumbs on the left; global utilities on the right.
• The upper-right user menu is the sole location for user identity, profile properties, account preferences, and sign-out.
• The logo is not repeated in the top header when already present in the sidebar.
• Page-level filters and actions appear in a separate toolbar.

9.3 Tabs

• Default: graphite text, transparent background.
• Hover: neutral.100.
• Selected: 2 px yellow underline, semibold graphite text.
• Tabs never use a different color by product area.
• More than seven tabs may scroll horizontally or collapse into “More.”

9.4 Breadcrumbs

• Maximum four visible levels.
• Intermediate levels use secondary text.
• Current page is not clickable.
• Truncation preserves the product area and current object.

10. Controls and Components

10.1 Buttons

All buttons support default, hover, active, focus, loading, and disabled states. Minimum hit area is 40 × 40 px; 44 × 44 px on touch devices.

10.2 Inputs and Filters

• Height: 40 px standard, 32 px compact table filter.
• Label remains visible; placeholder is never the only label.
• Focus ring: 2 px yellow.500 with 2 px offset and graphite inner border.
• Validation uses icon, message, and color.
• Applied filters appear as removable chips below the filter trigger, not as a second navigation bar.

10.3 Cards

• Use cards for a coherent object or decision, not every metric.
• KPI cards use one large number, one label, one comparison, and at most one micro-chart.
• Related KPI cards align in a shared band with equal height.
• Nested cards are prohibited; use dividers or sections instead.

10.4 Tables

• Sticky header where data scrolls.
• Row height: 44 px default, 52–64 px when a secondary line is present.
• First column identifies the object; last column contains row actions.
• Numeric columns align right and use tabular figures.
• Sort, filter, and selection are visible and keyboard operable.
• Use inline status labels, not colored full rows.

10.5 Badges and Status Labels

• Compact rectangle with 4 px radius; avoid pills except for people/speaker chips.
• Always include readable text.
• No more than three badges in one row; overflow becomes “+N.”
• “AI suggested” and “Human review required” use consistent global wording.

10.6 Drawers and Modals

• Use a right drawer for evidence details, filters, and nonblocking review.
• Use a modal for confirmation, focused editing, and high-impact decisions.
• Sensitive evidence uses a full-page or large controlled panel, not a small popover. The owning package defines its review policy.
• Modals trap focus and restore it to the invoking control.

10.7 Toasts and Inline Feedback

• Toasts confirm completed background actions and disappear.
• Errors requiring action remain inline until resolved.
• A toast never contains evidence or sensitive content.
• External-write confirmation states the destination and whether the write is a draft or executed action.

11. Package-Owned Interface Components

Audio players and transcripts belong to Meeting Intelligence, SOW comparison to Scope Alignment, private recommendations to Personal Development, and case review to Ethics & Compliance. Their screen manuals specify domain behavior. This shared design system supplies tokens, accessible controls and composition rules, not mandatory business screens.

12. Iconography and Illustration

12.1 Icons

• Use one outline icon family with a 1.75–2 px stroke.
• Standard sizes: 16, 20, and 24 px.
• Do not mix filled, outlined, hand-drawn, and 3D icon families.
• Brand, commercial, project, relationship, ethics, and AI areas each have one stable icon.
• An icon never replaces a critical label.

12.2 Illustrations

Illustration is limited to onboarding, empty states, and major setup flows. It uses the Effority Facet geometry, graphite linework, and controlled yellow fields. It must not introduce generic robot heads, brains, sparkles, or humanoid AI imagery.

12.3 Photography

Photography is not used inside operational product screens. If later used in marketing or onboarding, it must remain outside data cards and never depict monitored workers as a metaphor for analysis.

13. Motion

Default easing: cubic-bezier(.2, 0, 0, 1).

• Respect prefers-reduced-motion.
• Do not animate charts continuously.
• Do not pulse critical alerts indefinitely.
• New evidence may use one short yellow highlight fade.

14. Accessibility Standard

The product targets WCAG 2.2 AA.

• Body text contrast: at least 4.5:1.
• Large text and meaningful graphics: at least 3:1.
• Visible keyboard focus on every interactive component.
• Logical heading hierarchy and landmarks.
• Accessible names for icon-only controls.
• Table headers and relationships announced correctly.
• Chart data available through labels or a table view.
• Audio content has transcript access.
• Color-independent status and selection.
• Zoom to 200% without loss of function.
• Reflow at 320 CSS px where the product pattern permits it.
• Errors identify the field, problem, and correction.

Yellow focus rings require a graphite inner edge on white or pale surfaces so they remain visible.

15. Content Design

15.1 Voice

Effority is direct, neutral, and specific.

Use:

• “The customer requested an additional integration.”
• “Potential scope change — human review required.”
• “No evidence was found in the selected sources.”
• “Confidence: High. Severity: Medium.”

Avoid:

• “The AI knows the customer is unhappy.”
• “Employee risk score.”
• “This person committed misconduct.”
• “Nothing happened.” when the system merely found no evidence.

15.2 Interface Language

• all product screens, labels, and documentation are in English.
• Original conversation language remains available as evidence.
• Translations are labeled as translations and never replace primary evidence.

15.3 Dates, Times, and Confidence

• Show the user’s configured locale and time zone.
• Include the time zone when an event has contractual or audit relevance.
• Use absolute dates for evidence; relative dates may appear only as secondary text.
• Display confidence as a calibrated band and, when useful, a percentage.

16. CSS Design Tokens

The following starter tokens define the visual contract. Product code may map them to the implementation framework but must preserve semantic names.

:root {
  --ef-yellow-500: #ffdd4f;
  --ef-yellow-400: #ffe66d;
  --ef-yellow-200: #fff2af;
  --ef-yellow-100: #fff8d5;
  --ef-yellow-700: #8a6800;

  --ef-navy-950: #071a33;
  --ef-navy-900: #0a2342;
  --ef-navy-800: #10345f;
  --ef-blue-700: #0753b8;
  --ef-blue-600: #0b63f6;
  --ef-blue-500: #2d7ff9;
  --ef-blue-100: #e8f1ff;
  --ef-blue-050: #f4f8ff;

  --ef-graphite-950: #202226;
  --ef-graphite-900: #2b2e33;
  --ef-graphite-800: #3b3f45;
  --ef-graphite-700: #555a61;
  --ef-graphite-500: #797979;

  --ef-neutral-300: #c9cdd2;
  --ef-neutral-200: #dee1e5;
  --ef-neutral-100: #eceef0;
  --ef-neutral-050: #f4f7fb;
  --ef-white: #ffffff;

  --ef-success: #176b46;
  --ef-success-bg: #e7f4ed;
  --ef-warning: #925400;
  --ef-warning-bg: #fff0d8;
  --ef-critical: #b52f35;
  --ef-critical-bg: #fce9ea;
  --ef-info: #285f9e;
  --ef-info-bg: #e8f1fb;
  --ef-violet: #66509b;
  --ef-violet-bg: #f0ecfa;
  --ef-teal: #14736f;
  --ef-teal-bg: #e4f4f3;

  --ef-font-display: "Manrope", "Inter", "Segoe UI", sans-serif;
  --ef-font-ui: "Inter", "Segoe UI", "Roboto", sans-serif;
  --ef-font-mono: "IBM Plex Mono", "SFMono-Regular", monospace;

  --ef-space-1: 4px;
  --ef-space-2: 8px;
  --ef-space-3: 12px;
  --ef-space-4: 16px;
  --ef-space-5: 20px;
  --ef-space-6: 24px;
  --ef-space-8: 32px;
  --ef-space-10: 40px;
  --ef-space-12: 48px;

  --ef-radius-sm: 4px;
  --ef-radius-md: 8px;
  --ef-radius-lg: 12px;

  --ef-shadow-1: 0 1px 2px rgb(32 34 38 / 8%);
  --ef-shadow-2: 0 6px 18px rgb(32 34 38 / 12%);
  --ef-shadow-3: 0 16px 40px rgb(32 34 38 / 18%);

  --ef-motion-fast: 120ms;
  --ef-motion-standard: 180ms;
  --ef-motion-slow: 260ms;
  --ef-easing-standard: cubic-bezier(.2, 0, 0, 1);

  --ef-sidebar-expanded: 264px;
  --ef-sidebar-collapsed: 72px;
  --ef-header-height: 64px;
}

18. Governance and Versioning

• Design tokens, components, and patterns are versioned together.
• A new component does not exist until states, accessibility, and responsive behavior are documented.
• Breaking token changes require a migration note and screenshot review.
• Product screenshots state the design-system version used.
• The navigation architecture owns labels and routes; this design system owns their visual presentation.
• Any intentional exception must identify the screen, reason, owner, and expiry date.

19. Implemented Design Verification

The implemented product conforms to the following decisions:

• The reversed Telynt by Effority lockup appears in the upper-left of the continuous navy sidebar.
• An approved symbol-only asset supports the collapsed and mobile navigation states.
• Deep navy, cobalt, cool neutrals, graphite text, white surfaces, and restrained Effority Yellow form the core palette.
• Manrope and Inter provide the documented typographic hierarchy.
• Signal Spine, Effority Facet, and Evidence Thread operate as signature patterns.
• Semantic colors remain distinct from brand yellow.
• Cards, tables, transcripts, evidence, recommendations, and review workflows use the documented patterns.
• Components meet the documented accessibility and responsive behavior.
• The product consumes the versioned CSS token set.

20. Implemented Decision

Effority Signal Fabric is the approved and implemented design system for Telynt. It governs the production interface and the product interfaces.