Skip to content

feat: update styling to match 2026 Telos brand guidelines#860

Open
TheJudii wants to merge 5 commits intotelosnetwork:developfrom
TheJudii:feat/brand-update-2026
Open

feat: update styling to match 2026 Telos brand guidelines#860
TheJudii wants to merge 5 commits intotelosnetwork:developfrom
TheJudii:feat/brand-update-2026

Conversation

@TheJudii
Copy link

  • Updated primary gradient: #00F2FE → #4FACFE → #C471F5 (cyan-blue-purple)
  • Updated color palette with official brand greys
  • Updated accent colors from brand system
  • Updated dark/light mode variables
  • Added brand reference file with all color definitions
  • Kept Silka font (already in use)

Based on https://www.telos.net/branding

Fixes #issue_number

Description

Test scenarios

Checklist:

  • I have performed a self-review of my own code
  • I have commented my code, particularly in hard-to-understand areas
  • I have cleaned up the code in the areas my change touches
  • My changes generate no new warnings
  • Any dependent changes have been merged and published in downstream modules
  • I have checked my code and corrected any misspellings
  • I have removed any unnecessary console messages
  • I have included all english text to the translation file and/or created a new issue with the required translations for the currently supported languages
  • I have tested for mobile functionality and responsiveness
  • I have added appropriate test coverage
  • I have updated relevant documentation and/or opened a separate issue to cover the updates (Issue URL: )

- Updated primary gradient: #00F2FE → #4FACFE → #C471F5 (cyan-blue-purple)
- Updated color palette with official brand greys
- Updated accent colors from brand system
- Updated dark/light mode variables
- Added brand reference file with all color definitions
- Kept Silka font (already in use)

Based on https://www.telos.net/branding
@netlify
Copy link

netlify bot commented Jan 26, 2026

Deploy Preview for wallet-staging ready!

Name Link
🔨 Latest commit e6849b6
🔍 Latest deploy log https://app.netlify.com/projects/wallet-staging/deploys/6976eb241faed500088869ad
😎 Deploy Preview https://deploy-preview-860--wallet-staging.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

@netlify
Copy link

netlify bot commented Jan 26, 2026

Deploy Preview for wallet-develop-mainnet ready!

Name Link
🔨 Latest commit e6849b6
🔍 Latest deploy log https://app.netlify.com/projects/wallet-develop-mainnet/deploys/6976eb244e3ed100084e27a7
😎 Deploy Preview https://deploy-preview-860--wallet-develop-mainnet.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

Justin Giudici added 2 commits January 25, 2026 22:49
Logos:
- Updated all Telos branding assets with new 2026 brand logos
- Replaced favicons, touch icons, and app icons
- Updated TeloScan and EVM-specific logos
- Added complete logo asset library in src/assets/new-logos/

WCAG 2.1 Accessibility (Light Mode):
- Fixed 5 contrast failures for AA compliance
- Low contrast text: #939393 → #767676 (3.07 → 4.54:1)
- Primary blue: #4FACFE → #387AB4 (2.42 → 4.55:1)
- Cyan links: #00F2FE → #008389 (1.39 → 4.56:1)
- Purple accent: #C471F5 → #9B59C2 (2.99 → 4.56:1)
- Positive teal: #30CFD0 → #1E8283 (1.92 → 4.59:1)

Dark mode was already fully compliant (all colors pass).
Gradient colors preserved for decorative use.
White text on the bright brand gradient was hard on the eyes.
Created a dedicated --sidebar-gradient using deeper brand tones:
- Teal: #00F2FE → #0891A8 (3.73:1)
- Blue: #4FACFE → #2D6B9E (5.66:1)
- Purple: #C471F5 → #7B4AAD (6.13:1)

Significantly improves visual comfort while maintaining brand feel.
@TheJudii TheJudii marked this pull request as ready for review January 26, 2026 04:06
Justin Giudici added 2 commits January 25, 2026 23:17
- Updated sTLOS logo in /branding/stlos.png
- Added WTLOS logo in /branding/wtlos.png
- Changed token configs to use local logos instead of GitHub URLs
- Applied darker sidebar-gradient to home/login page for better contrast

Note: Component Demos link only shows on non-production (staging) deploys -
this is expected behavior (checks if URL includes 'telos.net')
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant