Team Matrix
Design System
How Team Matrix looks and sounds. One logo, five colours, two fonts, one gradient, and the parts to build anything from the website to the pit banner.
Logo
White lettering with circuit lines. It is always white and always on dark purple. Use the transparent version so it sits on any of our backgrounds.
On main · #0E0C14On second · #513899On gradientDo
- Use
team-matrix-logo-white-trimmed.pngby default. - Leave space around it at least the height of the word "TEAM".
- Keep it at least 120px wide on screen and 30mm in print.
- Use the original Canva or vector file for banners, jerseys and the robot. These files are 262 × 138 px.
Don't
- Recolour it, stretch it, rotate it or add shadows.
- Put it on white or light backgrounds.
- Shorten the name to "Matrix". It is always Team Matrix.
- Change official FIRST or FTC logos. Download them from firstinspires.org.
Five team colours
Very dark purple underneath, a bold violet second background, white headings, light purple text and one violet accent. No green anywhere. Tap a colour to copy its hex code.
Helpers
Worked out from the team colours to fix readability. Use them only where the note says.
Readability check
| Text | On | Sample | Contrast | Result |
|---|
WCAG 2.2: 4.5 or more for normal text, 3 or more for large text, buttons and icons.
The glow
A violet glow top left that fades into logo indigo. Put text on the darker right or bottom part. White on the bright spot is only 3.1:1.
Text goes here
On the darker side--tm-gradient-brand: radial-gradient(80% 90% at 17% 27%, #9E7CFF 0%, #3B2585 45%, #1A0A41 100%);Two fonts
Bebas Neue for every heading: tall, condensed, capitals only, one weight. Poppins for everything you read. Both are free on Google Fonts and in Canva.
Bebas Neue 400. Capitals only. Never bold.
Poppins 400, 500, 600, 700.
4px grid
Every gap and margin is a step on the 4px grid. Corners are gently rounded: 6px small parts, 12px buttons and cards, 20px big panels.
Parts
Ready-made pieces in css/team-matrix.css and components/react/TeamMatrix.jsx.
Buttons · main background
.tm-btnButtons · in a card
.tm-cardPrimary turns white here, because violet on violet is too faint.
Badges
.tm-badgeMatch score
.tm-match · sample numbersHonours list
.tm-honours- Winning alliance, first pickFIRST Championship finals
- Inspire Award, 3rd placeIndia Championship
- Sustain Award, 2nd placeIndia Championship
Form
.tm-fieldSponsor tiers
.tm-tierPlatinum
- Front of jersey
- Large logo on robot
Gold
- Jersey
- Logo on robot
Silver
- Jersey
- Pit banner
Bronze
- Pit banner
- Thank-you post
Real layouts
Full pages built only from this system. Open one to see it at full size.
How we sound
Students who build serious machines. Short sentences, real numbers, and credit given by name.
Lead with the robot
"Our turret aims without turning the drivetrain."
Numbers beat adjectives
"Ranked #1 of 46 at the India Championship." Not "one of the best teams".
Thank people by name
Sponsors, mentors and alliance partners, every time.
Plug it in
Add the repo to Claude Design, link the two stylesheets on any web page, or load the tokens into Figma.
<link rel="stylesheet" href="https://ishaanjayaswal-dotcom.github.io/team-matrix-design-system/tokens/tokens.css">
<link rel="stylesheet" href="https://ishaanjayaswal-dotcom.github.io/team-matrix-design-system/css/team-matrix.css">
<body class="tm-page">
<h1 class="tm-h1">Team Matrix</h1>
<a class="tm-btn tm-btn--primary">Become a sponsor</a>
</body>tokens/team-matrix.tokens.json is the source of truth, in the W3C Design Tokens Format 2025.10. Everything else is built from it with python3 build.py.