Visual identity

Techtiks

A software studio building AI-powered products, mobile experiences, and enterprise systems — from cross-platform apps to blockchain and platform engineering.

techtiks.co

Light surfacePrimary wordmark

Dark surfaceApproved dark artwork

Compact identity

Favicon scale

logoSvg

16px

32px

48px

Dark

Semantic system

Brand colour

data-brand

PrimaryIdentitySecondarySupportAccentHighlightNeutralContent

Brand ID: techtiks
Token package: @brandos/tokens/css/techtiks
Heading: Poppins
Body: Inter

01.01 · Techtiks Blue ramp

19 shades of Techtiks Blue

Techtiks Blue identity ramp generated from canonical techtiks token data.

01.02 · Techtiks Gray ramp

19 shades of Techtiks Gray

Techtiks Gray identity ramp generated from canonical techtiks token data.

01.03 · Semantic slots

Meaning over hue

Components consume semantic slots, never raw ramps. The hue can evolve; the meaning shouldn't.

Brand PrimaryAnchor identity & CTAs

Token: --semantic-brand-primary
Class: bg-primary

Brand AccentHighlights & accents

Token: --semantic-brand-accent
Class: bg-accent

Surface 1Card surfaces & chrome

Token: --semantic-surface-1
Class: bg-base-100

ContentBody & headings text

Token: --semantic-content-primary
Class: text-base-content

InformativeInformation & neutral cues

Token: --semantic-status-informative
Class: text-info

SuccessPositive & confirm states

Token: --semantic-status-success
Class: text-success

WarningCaution & warning states

Token: --semantic-status-warning
Class: text-warning

ErrorDestructive & error states

Token: --semantic-status-error
Class: text-error

02 · Typography

Poppins on display · Inter for everything else

Heading and body families resolve from the canonical effective specification and its font registry.

Heading typefacePoppins

--brandOS-font-heading

Display specimen

Techtiks moves with purpose.

Family: Poppins
Registry ID: poppins
Primary use: Display and hierarchy

H1 · DisplayThe system in practice
H2 · Section89 brands, one system
H3 · CardProfile contract

Size: 4xl
Leading: Tight
Weight: Bold

Body typefaceInter

--brandOS-font-body

Reading specimen

Clear systems make complex decisions feel simple, consistent, and unmistakably on brand.

Family: Inter
Registry ID: inter
Primary use: Reading and interface

LedeA clear, generous opening that orients the reader fast.
BodyStandard paragraph text. The quick brown fox jumps over the lazy dog.
CaptionSmall print, footnotes, and metadata.

Size: Base
Leading: Normal
Weight: Regular

03 · Effective specification

Registry-resolved visual contract

One resolved source for every visual rule

Version 1.0.0, effective 2026-07-31. Every rule below is generated from the canonical registry projection.

Resolution fingerprintThree-source effective identity

01Defaults: 1.0.0
02Brand: 1.0.0
03Content: f5d3b83b04b2e664bb788ceee47dc94557bd3035e8ab9791566dbd76219f708c

Authored Direct: 2
Inherited Shared: 0
Defaulted System: 10

Colour and accessible pairings

defaulted

Token usage, print values, gradients, accent discipline, and derived WCAG pairings.

20 resolved values

PrimaryBrand Primary

AccentBrand Accent

SurfaceSurface 1

ContentContent Primary

Brand gradient135deg

InfoStatus Informative

SuccessStatus Success

WarningStatus Warning

ErrorStatus Error

Technical details20 canonical values and registry paths

Accent Token Refs 0: --semantic-brand-primarygroups.colors.accentTokenRefs[0]
Accent Token Refs 1: --semantic-brand-accentgroups.colors.accentTokenRefs[1]
Body Surface Token Ref: --semantic-surface-1groups.colors.bodySurfaceTokenRef
Body Text Token Ref: --semantic-content-primarygroups.colors.bodyTextTokenRef
Direction: 135deggroups.colors.gradients[0].direction
From Token Ref: --semantic-brand-primarygroups.colors.gradients[0].fromTokenRef
Id: brand-accentgroups.colors.gradients[0].id
To Token Ref: --semantic-brand-accentgroups.colors.gradients[0].toTokenRef
Enforceable: Nogroups.colors.guidance[0].enforceable
Id: accessible-color-usegroups.colors.guidance[0].id
Text: Use canonical content pairs for text on semantic surfaces and status fills.groups.colors.guidance[0].text
Groups Colors Print Values: No additional entriesgroups.colors.printValues
Content Token Ref: --semantic-status-error-contentgroups.colors.status.error.contentTokenRef
Token Ref: --semantic-status-errorgroups.colors.status.error.tokenRef
Content Token Ref: --semantic-status-informative-contentgroups.colors.status.informative.contentTokenRef
Token Ref: --semantic-status-informativegroups.colors.status.informative.tokenRef
Content Token Ref: --semantic-status-success-contentgroups.colors.status.success.contentTokenRef
Token Ref: --semantic-status-successgroups.colors.status.success.tokenRef
Content Token Ref: --semantic-status-warning-contentgroups.colors.status.warning.contentTokenRef
Token Ref: --semantic-status-warninggroups.colors.status.warning.tokenRef

Typography

authored

Font roles, the base type ladder, and sparse responsive overrides.

12 resolved values

Canonical hierarchy

A distinct voice, built to scale.

The quick brown fox jumps over the lazy dog. Clear typography gives every branded surface a recognisable rhythm.

Caption and supporting metadata remain readable at compact sizes.

HeadingPoppins

Text 4xl2.5–4rem

BodyInter

Text Base0.875–1rem

The base hierarchy scales without brand-specific overrides.

Technical details12 canonical values and registry paths

Font Id: poppinsgroups.typography.baseLadder[0].fontId
Id: headinggroups.typography.baseLadder[0].id
Line Height Token Ref: --brandOS-leading-tightgroups.typography.baseLadder[0].lineHeightTokenRef
Size Token Ref: --brandOS-text-4xlgroups.typography.baseLadder[0].sizeTokenRef
Weight Token Ref: --brandOS-font-weight-boldgroups.typography.baseLadder[0].weightTokenRef
Font Id: intergroups.typography.baseLadder[1].fontId
Id: bodygroups.typography.baseLadder[1].id
Line Height Token Ref: --brandOS-leading-normalgroups.typography.baseLadder[1].lineHeightTokenRef
Size Token Ref: --brandOS-text-basegroups.typography.baseLadder[1].sizeTokenRef
Weight Token Ref: --brandOS-font-weight-regulargroups.typography.baseLadder[1].weightTokenRef
Groups Typography Guidance: No additional entriesgroups.typography.guidance
Groups Typography Responsive Overrides: No additional entriesgroups.typography.responsiveOverrides

Logo usage

defaulted

Clear space, minimum sizes, prohibited uses, and approved lockups.

8 resolved values

Clear space: Space 4

Primary digital lockup120px minimum

Do not stretch, skew, recolour, or otherwise distort a registered mark.

Do not rotate

Do not recolour

Technical details8 canonical values and registry paths

Clear Space Token Ref: --brandOS-space-4groups.logos.clearSpaceTokenRef
Groups Logos Co Branding Rules: No additional entriesgroups.logos.coBrandingRules
Context: Primary digital lockupgroups.logos.minimumSizes[0].context
Id: digital-primarygroups.logos.minimumSizes[0].id
Width Px: 120groups.logos.minimumSizes[0].widthPx
Enforceable: Nogroups.logos.prohibitedUses[0].enforceable
Id: do-not-distortgroups.logos.prohibitedUses[0].id
Text: Do not stretch, skew, recolour, or otherwise distort a registered mark.groups.logos.prohibitedUses[0].text

Registered assets

defaulted

Canonical marks, imagery, and graphic assets referenced by stable identifiers.

2 resolved values

Primary lockupLight surface

Compact markApp scale

Dark surfaceApproved artwork

Technical details2 canonical values and registry paths

Groups Assets Approved Asset Ids: No additional entriesgroups.assets.approvedAssetIds
Groups Assets Guidance: No additional entriesgroups.assets.guidance

Responsive layout

defaulted

Breakpoint ranges, containers, grids, columns, and margins.

34 resolved values

Mobile0px+

Tablet640px+

Desktop1024px+

Margins and containers expand progressively while content order stays stable.

Technical details34 canonical values and registry paths

Columns: 4groups.responsiveLayout.breakpoints[0].columns
Grid Id: mobile-gridgroups.responsiveLayout.breakpoints[0].gridId
Id: mobilegroups.responsiveLayout.breakpoints[0].id
Margin Token Ref: --brandOS-space-4groups.responsiveLayout.breakpoints[0].marginTokenRef
Max Viewport Px: 639groups.responsiveLayout.breakpoints[0].maxViewportPx
Min Viewport Px: 0groups.responsiveLayout.breakpoints[0].minViewportPx
Columns: 8groups.responsiveLayout.breakpoints[1].columns
Container Width Px: 960groups.responsiveLayout.breakpoints[1].containerWidthPx
Grid Id: tablet-gridgroups.responsiveLayout.breakpoints[1].gridId
Id: tabletgroups.responsiveLayout.breakpoints[1].id
Margin Token Ref: --brandOS-space-6groups.responsiveLayout.breakpoints[1].marginTokenRef
Max Viewport Px: 1023groups.responsiveLayout.breakpoints[1].maxViewportPx
Min Viewport Px: 640groups.responsiveLayout.breakpoints[1].minViewportPx
Columns: 12groups.responsiveLayout.breakpoints[2].columns
Container Width Px: 1280groups.responsiveLayout.breakpoints[2].containerWidthPx
Grid Id: desktop-gridgroups.responsiveLayout.breakpoints[2].gridId
Id: desktopgroups.responsiveLayout.breakpoints[2].id
Margin Token Ref: --brandOS-space-8groups.responsiveLayout.breakpoints[2].marginTokenRef
Min Viewport Px: 1024groups.responsiveLayout.breakpoints[2].minViewportPx
Columns: 4groups.responsiveLayout.grids[0].columns
Gutter Token Ref: --brandOS-space-4groups.responsiveLayout.grids[0].gutterTokenRef
Id: mobile-gridgroups.responsiveLayout.grids[0].id
Margin Token Ref: --brandOS-space-4groups.responsiveLayout.grids[0].marginTokenRef
Columns: 8groups.responsiveLayout.grids[1].columns
Gutter Token Ref: --brandOS-space-5groups.responsiveLayout.grids[1].gutterTokenRef
Id: tablet-gridgroups.responsiveLayout.grids[1].id
Margin Token Ref: --brandOS-space-6groups.responsiveLayout.grids[1].marginTokenRef
Columns: 12groups.responsiveLayout.grids[2].columns
Gutter Token Ref: --brandOS-space-6groups.responsiveLayout.grids[2].gutterTokenRef
Id: desktop-gridgroups.responsiveLayout.grids[2].id
Margin Token Ref: --brandOS-space-8groups.responsiveLayout.grids[2].marginTokenRef
Enforceable: Nogroups.responsiveLayout.guidance[0].enforceable
Id: content-first-responsivegroups.responsiveLayout.guidance[0].id
Text: Choose responsive changes from content pressure and the declared non-overlapping ranges.groups.responsiveLayout.guidance[0].text

Iconography

defaulted

Approved library, family, style, weight, licence, and custom exceptions.

12 resolved values

Family: Material Symbols
Style: Rounded
Weight: 400
Licence: Apache License 2.0

No custom icon exceptions. One visual language stays consistent.

Technical details12 canonical values and registry paths

Groups Iconography Custom Icon Asset Ids: No additional entriesgroups.iconography.customIconAssetIds
Enforceable: Nogroups.iconography.guidance[0].enforceable
Id: icons-are-symbolsgroups.iconography.guidance[0].id
Text: Use the approved library for interface symbols; register custom brand marks as assets.groups.iconography.guidance[0].text
Family: Material Symbolsgroups.iconography.library.family
Id: material-symbols-roundedgroups.iconography.library.id
Name: Apache License 2.0groups.iconography.library.license.name
Reference: https://github.com/google/material-design-icons/blob/master/LICENSEgroups.iconography.library.license.reference
Spdx Id: Apache-2.0groups.iconography.library.license.spdxId
Source: https://fonts.google.com/iconsgroups.iconography.library.source
Style: Roundedgroups.iconography.library.style
Weight: 400groups.iconography.library.weight

Graphic systems

defaulted

Named visual systems and their registered asset and taxonomy references.

2 resolved values

Core SystemBrand

0 assets

Technical details2 canonical values and registry paths

Groups Graphics Systems: No additional entriesgroups.graphics.systems
Groups Graphics Taxonomies: No additional entriesgroups.graphics.taxonomies

Imagery direction

authored

Photography, product imagery, composition, subject, and treatment guidance.

11 resolved values

01 · Composition

Show the product itself — app screens, dashboards, and model output — rather than generic developers-at-laptops stock photography.

02 · Subject

Keep the bright blue primary for interactive and highlight elements against the deep navy and neutral greys, so a single accent carries the eye through a dense technical surface.

03 · Treatment

Apply one repeatable crop, contrast, and surface treatment.

Technical details11 canonical values and registry paths

Groups Imagery Approved Asset Ids: No additional entriesgroups.imagery.approvedAssetIds
Enforceable: Nogroups.imagery.photography[0].enforceable
Id: imagery-01groups.imagery.photography[0].id
Text: Show the product itself — app screens, dashboards, and model output — rather than generic developers-at-laptops stock photography.groups.imagery.photography[0].text
Enforceable: Nogroups.imagery.photography[1].enforceable
Id: imagery-02groups.imagery.photography[1].id
Text: Keep the bright blue primary for interactive and highlight elements against the deep navy and neutral greys, so a single accent carries the eye through a dense technical surface.groups.imagery.photography[1].text
Enforceable: Nogroups.imagery.photography[2].enforceable
Id: imagery-03groups.imagery.photography[2].id
Text: When illustrating AI or platform work, prefer diagrams that a client can read — flows, layers, and integration points — over abstract particle or neural-network decoration.groups.imagery.photography[2].text
Groups Imagery Product Imagery: No additional entriesgroups.imagery.productImagery

Shared components

defaulted

Shared component participation and bounded state-token overrides.

8 resolved values

Techtiks interfaceShared system

FoundationActions and fields

04 states

Primary actionSecondary

Email addressname@company.com

Helper text follows the field.Valid

FeedbackStatus and content

Live

ApprovedIn reviewDraft

Brand-ready componentSemantic tokens control every state.

Next reviewIdentity system check

Aug 28

Registry coverageGoverned participation1

Button2 state overrides

Technical details8 canonical values and registry paths

Component Id: buttongroups.components.participation[0].componentId
Groups Components Participation 0 Guidance: No additional entriesgroups.components.participation[0].guidance
State: defaultgroups.components.participation[0].stateOverrides[0].state
Token Ref: --semantic-brand-primarygroups.components.participation[0].stateOverrides[0].tokenRef
Token Slot: backgroundgroups.components.participation[0].stateOverrides[0].tokenSlot
State: defaultgroups.components.participation[0].stateOverrides[1].state
Token Ref: --semantic-brand-primary-contentgroups.components.participation[0].stateOverrides[1].tokenRef
Token Slot: contentgroups.components.participation[0].stateOverrides[1].tokenSlot

Data visualisation

defaulted

Categorical, sequential, and diverging palette intent derived from brand tokens.

10 resolved values

Categorical3 roles

Sequential2 steps

Diverging2 steps

Brand-derived colour intent supports comparison without changing the underlying data meaning.

Technical details10 canonical values and registry paths

Categorical Token Refs 0: --semantic-brand-primarygroups.dataVisualization.categoricalTokenRefs[0]
Categorical Token Refs 1: --semantic-brand-accentgroups.dataVisualization.categoricalTokenRefs[1]
Categorical Token Refs 2: --semantic-status-informativegroups.dataVisualization.categoricalTokenRefs[2]
Diverging Token Refs 0: --semantic-status-errorgroups.dataVisualization.divergingTokenRefs[0]
Diverging Token Refs 1: --semantic-status-successgroups.dataVisualization.divergingTokenRefs[1]
Enforceable: Nogroups.dataVisualization.guidance[0].enforceable
Id: data-viz-contrastgroups.dataVisualization.guidance[0].id
Text: Use semantic token references whose labels, strokes, and fills remain distinguishable without colour alone.groups.dataVisualization.guidance[0].text
Sequential Token Refs 0: --semantic-surface-3groups.dataVisualization.sequentialTokenRefs[0]
Sequential Token Refs 1: --semantic-brand-primarygroups.dataVisualization.sequentialTokenRefs[1]

Motion

defaulted

Governed motion variance, timing, easing, and reduced-motion expectations.

5 resolved values

EasingEase Smooth

Duration scale

Duration FastDuration Normal

Reduced-motion behavior is required.

Technical details5 canonical values and registry paths

Duration Token Refs 0: --brandOS-duration-fastgroups.motion.durationTokenRefs[0]
Duration Token Refs 1: --brandOS-duration-normalgroups.motion.durationTokenRefs[1]
Easing Token Refs 0: --brandOS-ease-smoothgroups.motion.easingTokenRefs[0]
Groups Motion Guidance: No additional entriesgroups.motion.guidance
Reduced Motion Required: Yesgroups.motion.reducedMotionRequired

Prose guidance

defaulted

Human-readable direction distributed with the effective visual specification.

3 resolved values

Working principlesClear direction for consistent decisions

Author visual guidance in the registry and regenerate every hosted and agent-readable projection.

Human-readable guidance

Technical details3 canonical values and registry paths

Enforceable: Nogroups.proseGuidance[0].enforceable
Id: registry-firstgroups.proseGuidance[0].id
Text: Author visual guidance in the registry and regenerate every hosted and agent-readable projection.groups.proseGuidance[0].text

04 · Accessibility

Verified accessible pairings

Live specimens rendered from canonical foreground and background tokens.

14 verified

Verified pairing

Readable by design.

Contrast5.88:1

AA text

Foreground--semantic-brand-accent-contentSurface--semantic-brand-accent

Standard text: AA passAAA fail
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast8.04:1

AAA text

Foreground--semantic-brand-primary-contentSurface--semantic-brand-primary

Standard text: AA passAAA pass
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast5.88:1

AA text

Foreground--semantic-brand-secondary-contentSurface--semantic-brand-secondary

Standard text: AA passAAA fail
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast17.80:1

AAA text

Foreground--semantic-neutral-contentSurface--semantic-neutral-base

Standard text: AA passAAA pass
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast7.19:1

AAA text

Foreground--semantic-status-error-contentSurface--semantic-status-error

Standard text: AA passAAA pass
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast7.34:1

AAA text

Foreground--semantic-status-informative-contentSurface--semantic-status-informative

Standard text: AA passAAA pass
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast7.60:1

AAA text

Foreground--semantic-status-success-contentSurface--semantic-status-success

Standard text: AA passAAA pass
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast7.24:1

AAA text

Foreground--semantic-status-warning-contentSurface--semantic-status-warning

Standard text: AA passAAA pass
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast9.09:1

AAA text

Foreground--semantic-content-mutedSurface--semantic-surface-1

Standard text: AA passAAA pass
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast17.80:1

AAA text

Foreground--semantic-content-primarySurface--semantic-surface-1

Standard text: AA passAAA pass
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast7.80:1

AAA text

Foreground--semantic-content-mutedSurface--semantic-surface-2

Standard text: AA passAAA pass
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast14.76:1

AAA text

Foreground--semantic-content-primarySurface--semantic-surface-2

Standard text: AA passAAA pass
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast5.74:1

AA text

Foreground--semantic-content-mutedSurface--semantic-surface-3

Standard text: AA passAAA fail
Large text: AA passAAA pass

Verified pairing

Readable by design.

Contrast10.86:1

AAA text

Foreground--semantic-content-primarySurface--semantic-surface-3

Standard text: AA passAAA pass
Large text: AA passAAA pass

05 · Example uses

Where Techtiks shows up

Real interface patterns shaped by the same identity, semantic tokens and typography defined in this profile.

03Application
surfaces

06 · Delivery

Drop in anywhere

Three lines and an attribute, the whole Techtiks brand renders from CDN.

01
LoadGlobal tokens
02
ThemeTechtiks
03
RenderEvery component

index.htmlComplete CDN setupHTMLVersion pinned

<link rel="stylesheet" href="https://brand.snyder.tech/cdn/0.43.3/themes/global-tokens.css" />
<link rel="stylesheet" href="https://brand.snyder.tech/cdn/0.43.3/themes/techtiks-brand.css" />
<script type="module" src="https://brand.snyder.tech/cdn/0.43.3/index.js"></script>
<html data-brand="techtiks" data-theme="light">

Registered assets

5 immutable assets

Pinned artwork for stable delivery. Themeable -ink follows the active theme, while -light and -dark variants preserve exported colour.

Release: v0.43.3
Integrity: 5/5
Payload: 54 KB

01 · Favicontechtiks.svgsingle artwork1.4 KBVerified
02 · Logotechtiks-logo-dark.svgdark artwork17 KBVerified
03 · Logotechtiks-logo-ink.svgink artwork17 KBVerified
04 · Logotechtiks-logo-light.svglight artwork18 KBVerified
05 · Login Bgtechtiks-login-bg.svgsingle artwork1.3 KBVerified

brand-mark.inkRecommended themeable markTypeScriptVersion pinned

// Recommended, themeable: currentColor follows the theme when inlined
import TechtiksMark from '@brandos/ui/assets/brand-logos/techtiks-logo-ink.svg?raw';
// Astro: <span set:html={Mark} />   ·   React (SVGR): import ...?react

Implementation libraryAlternative asset recipesImage, background and favicon patterns3 recipes

logo.htmlFixed artwork imageHTMLVersion pinned

<img
  src="https://brand.snyder.tech/cdn/0.43.3/assets/brand-logos/techtiks-logo-dark.svg"
  alt="Techtiks"
  loading="lazy"
  decoding="async"
/>

mark.cssCSS background recipeCSSVersion pinned

.techtiks-mark {
  background-image: url("https://brand.snyder.tech/cdn/0.43.3/assets/brand-logos/techtiks-logo-dark.svg");
  background-repeat: no-repeat;
  background-size: contain;
}

favicon.htmlBrowser favicon setupHTMLVersion pinned

<link rel="icon" type="image/svg+xml" href="https://brand.snyder.tech/cdn/0.43.3/assets/brand-favicons/techtiks.svg" />

Registry evidenceVersioned asset manifestPaths, sizes and integrity hashesSHA-256

techtiks-cdn-manifest.txtVersioned asset inventoryManifestVersion pinned

# favicon · 1.4 KB
# sha256:f2258c04bdb722c6e2602e20072c9fd0f7f97ddd2cc4b2626997d2314e6dbe9a
https://brand.snyder.tech/cdn/0.43.3/assets/brand-favicons/techtiks.svg

# logo · 17 KB
# sha256:932a5197aa1694e27e137349695f5387550388de866043afe7ff045616e3253c
https://brand.snyder.tech/cdn/0.43.3/assets/brand-logos/techtiks-logo-dark.svg

# logo · 17 KB
# sha256:3bdeedbbecd4a85f237db4828fe9dada9f3783ab5ab245d86836e16b69e737b4
https://brand.snyder.tech/cdn/0.43.3/assets/brand-logos/techtiks-logo-ink.svg

# logo · 18 KB
# sha256:05e45aab609dfa81c1e0a69f825d794faa619f5c537e4cf73021d854652497e1
https://brand.snyder.tech/cdn/0.43.3/assets/brand-logos/techtiks-logo-light.svg

# login-bg · 1.3 KB
# sha256:8910ac0ab9f6f78784e2474dc8558d524da527ec0a11be13255a1d84fff56ecd
https://brand.snyder.tech/cdn/0.43.3/assets/login-bg/techtiks-login-bg.svg

Machine-readable manifest.json, all brands in this version