Foundations.

Identity.

Write traq in lowercase. Place the supplied artwork proportionally. Preserve its geometry and internal spacing.

Use the full logo when introducing the name. Use the small symbol where the context already identifies traq. Test small sizes in the actual placement.

Visual rules: identity

Always write traq in lowercase. Use supplied outlined artwork. Do not retype, redraw, distort, rotate, crowd or add effects.

• Light surface: Purple symbol with near-black lettering.
• Dark surface: Purple symbol with white lettering.
• One-colour use: supplied black or white artwork.
• Full lockup when the name must be visible; symbol where context already identifies traq.

Minimum digital and print sizes are not approved.

All logo files and export naming: Logo.

Colour.

Use the complete palette. One black, #0A0A0B, applies to artwork, text and backgrounds.

Purple identifies traq and ordered sequence numbers. Emerald marks available actions. Dark emerald is the readable label colour on light backgrounds. Gold marks active, live or pending states with explicit labels. Grey marks paused states. Descriptive sources and process steps do not receive arbitrary status dots. Keep gold text off light backgrounds.

Visual rules: colour roles

• Foundation: Black #0A0A0B and white.
• Identity: Purple #7C3AED.
• Action: Emerald #34D399.
• Active, live or pending status: Gold #F2C94C.
• Paused/inactive: #6F6F77 on paper; #8A8A92 on dark surfaces.
• Editorial labels on light backgrounds: Dark emerald #08664E.

The complete palette documents all supporting neutrals. CSS and JSON define colours, type, spacing, radius, grids, breakpoints and rules. Action emerald is not used for the Active state. Numbered sequences use purple; sources and process steps do not receive decorative status dots.

Do not use Emerald or Gold as logo colours. Keep labels present so meaning does not depend on colour. Check contrast, especially coloured text on white.

Accessible Colour Roles.

Small text requires at least 4.5:1 contrast. Use quiet-light/paused-light #6F6F77 on paper and quiet-dark/paused-dark #8A8A92 on dark surfaces. Use purple #7C3AED for small text on paper and purple-text-dark #9A66F1 for small text on black or surface. Preserve purple logo artwork. Emerald buttons use black #0A0A0B text. Gold is reserved for active/live/pending states; editorial labels use emerald, dark emerald or black according to the background.

Typography.

Clash Display Regular carries headlines. Clash Grotesk Regular carries body text, labels and row titles; Medium provides selective emphasis. Letter spacing is zero. Use deliberate sentence breaks and open body leading.

Fontshare embed and fallbacks provide the web setup. PDFs contain embedded fonts; raw font binaries are not included.

Visual rules: typography

Clash Display Regular for headlines and large ideas. Clash Grotesk Regular for body, labels and interface; Medium only where needed. Do not redistribute raw font files; each external user should obtain its own licensed copy directly from Fontshare.

Layout Rules.

Use CSS variables or JSON values. These provide the type scale, spacing, radius, grid, breakpoints and rule widths.

Use a 12-column grid on wide layouts and 4 columns at 760px and below. Keep the content aligned to shared margins. Default radius is zero; controls may use 4px, with an 8px upper limit. Rules are 1px.

One element leads. Keep explanatory copy quieter. Align titles to fixed rows so wrapping descriptions do not move their titles. Protect metadata and page numbers from grids and decorative numerals.

Preserve the original mark when using a faded editorial treatment. A three-module-wide symbol sits on three complete grid cells. Product imagery should show actual states, diagrams or evidence. Label illustrative examples.

Visual rules: composition

One element leads. Break headlines by meaning. Keep supporting copy quieter. Align marks, logos, dividers and content to the same grid. Prioritize real interfaces, diagrams and evidence over decorative mood imagery.

The Purple-to-Emerald gradient is exploratory editorial emphasis, not an approved background or product-state treatment.

Patterns

The base pattern is the symbol repeated as an interlocked lattice, in thin rule-colour lines that fade out towards the content. Files and rules: Pattern.