design system

the "te" system

A precision design system built for warm, minimal, and highly legible UIs. Every token — color, spacing, radius, and typography — is encoded in the MUI theme so agents produce consistent output across thousands of files.

01
tokens & colors
Warm neutrals anchored by teOrange. No pure whites, no pure blacks. Every surface feels intentional.
dark surfaces
teBlack
#121118
primary text, contained buttons
teNearBlack
#1B1A22
tooltips, snackbar bg
teDarkGray
#32313B
secondary text, menu items
neutrals
teMidGray
#787780
disabled text, labels, captions
teLightGray
#B8B7BC
borders (unchecked), scrollbar
teOffWhite
#ECEAE6
dividers, borders, rail bg
teCream
#F6F5F1
card bg, outlined hover bg
teWhite
#FBFAF7
page background, paper
accent & signal
teOrange
#F27A1A
primary accent, CTA, indicators
teOrangeLight
#F59545
warning, lighter accent
teOrangeDim
#D16510
hover state for orange buttons
teGreen
#2ECC71
success, positive signals
teBlue
#3D85F0
info, secondary accent, links
teRed
#E8453E
error, destructive actions
02
typography
IBM Plex Sans for display and body. Space Mono for all interactive & tabular elements. Major Third scale (1.25).
h1 · ibm plex sans 200 · 4.768rem · lowercase · -0.03em
design system tokens
h2 · ibm plex sans 200 · 3.052rem · lowercase · -0.02em
section headings
h3 · ibm plex sans 200 · 1.953rem · lowercase · -0.01em
card headings
h4 · ibm plex sans 300 · 1.25rem · lowercase
subsection labels
body1 · ibm plex sans 300 · 1rem · 1.6 line height
Standard body copy. Clear, open, and legible at all viewport sizes with loose line height. Warm neutrals keep the reading experience comfortable for long assessments.
subtitle1 · space mono 400 · 0.8rem · uppercase · +0.1em
buttons · tabs · chips · badges · breadcrumbs
code / tool name · space mono 400 · 0.78rem
plan_app · scaffold_component · assess_codebase
variantfontsizeweightextra
h1Sans4.768rem200lowercase, -0.03em
h2Sans3.052rem200lowercase, -0.02em
h3Sans1.953rem300lowercase, -0.01em
h4Sans1.25rem400lowercase
body1Sans1rem3001.6 line-height
body2Sans0.8rem3001.55 line-height
subtitle1Mono0.8rem400UPPERCASE, +0.1em
captionMono0.64rem400UPPERCASE, +0.12em
buttonMono0.64rem400UPPERCASE, +0.1em
03
spacing, radii & elevation
A 4px base unit, five radius tokens, and three shadow levels. Prefer border-based depth on light surfaces.
spacing scale
4px
icon padding, micro gaps
8px
base unit — chip padding, icon margins
16px
dense list items, tag rows
24px
card padding, section gaps
32px
component internal padding
48px
section-to-section gap
64px
large section padding, hero
border radii
4px
chips, tooltips
6px
inputs & buttons
10px
cards & tables
14px
dialogs
pill
scrollbar, switch
elevation
shadow sm
0 1px 3px rgba(18,17,24,0.04)
shadow md
menus, popovers, tooltips
shadow lg
dialogs, drawers, modals
04
motion & animation
Every animation maps to a specific UI moment. Nothing animates "just because." All motion respects prefers-reduced-motion.
easing curves — hover to preview
ease-out
entrances & reveals
cubic-bezier(0.16, 1, 0.3, 1)
ease-in
exits & dismissals
cubic-bezier(0.55, 0, 1, 0.45)
ease-in-out
state changes & progress
cubic-bezier(0.45, 0, 0.55, 1)
spring
emphasis & confirmations
cubic-bezier(0.34, 1.56, 0.64, 1)
duration scale — hover to preview
instant
100ms
active states, press
fast
150ms
hover, focus, toggles
normal
250ms
fade-in, reveals
slow
400ms
expand, slide, layout
slower
600ms
page transitions
transition patterns — hover to preview
button interaction
hover lifts, press compresses. 150ms ease-out.
card hover
border shifts to orange, subtle shadow appears. 150ms.
sample card
hover to see the border + shadow transition
progress fill
fills with ease-in-out at slow (400ms) duration.
click feedback patterns
actioninstant responseif async...on complete
select answerborder highlights, check springs insave runs in backgroundsilent (optimistic). toast on failure.
click buttonbutton compresses (scale 0.98)spinner, text changes to "saving..."spinner → check, then default label.
navigatecurrent page fades outN/A — localnew page fades up.
open modalscale-in from trigger originskeleton inside if loadingskeleton → content via fade.
deleteconfirmation dialog (scale-in)item fades out optimisticallysilent. toast on failure + restore.
05
components
Building blocks. Every component shares the same DNA — warm surfaces, mono labels, orange accents, border-based depth.
buttons
primary — bg: teBlack → hover: teOrange, translateY(-1px)
secondary & variants
badges & chips
status badges
passing warning failing info unsure
chips — mono, uppercase, pill radius
react 19 primary passing failing info
form elements
input states — focus: orange border + subtle ring
placeholder text
component type
invalid value
cards — hover to see border shift
standard card
bg: teCream, border: 1px teOffWhite, radius: 12px. Hover shifts border to teOrange with subtle shadow.
accent card
Left accent border for emphasis. Used for findings, recommendations, and highlighted items.
table — hover rows for orange tint
control areacurrenttargetpriority
incident responsenon-existentembeddedcritical
data protectionprogressingembeddedhigh
vulnerability mgmtprogressingembeddedhigh
security trainingimplementedembeddedmedium
progress bars & metrics
progress bars
define82%
secure67%
validate45%
metric displays
overall score
67%
controls assessed
24
critical gaps
3
tools available
31
score circle
67
overall
82
define
38
validate
svg ring with stroke-dasharray
Score circles use SVG rings with stroke-dasharray and stroke-dashoffset. Colors match status semantics. Centered text shows value + label.
control items — left accent border
cybersecurity governance
embedded
formal governance framework with regular executive oversight.
executive risk oversight
progressing
board-level reporting on cybersecurity risk is quarterly.
incident response
non-existent
no documented incident response plan or procedures.
recommendations — numbered list
1
address critical gaps
1 critical control gap requires immediate attention and executive sponsorship.
2
develop improvement roadmap
create a 12-18 month program prioritized by risk and business impact.
3
strengthen governance
establish regular executive reviews and KPIs aligned with business objectives.
06
aesthetic rules
The constraints that keep the system cohesive. Every rule is non-negotiable.
typography rules
Case — All UI copy is lowercase. Labels, headings, nav, buttons. Exceptions: numbers, abbreviations, code identifiers.
Labels — Interactive labels always use Space Mono uppercase with +0.1em tracking.
Mono — All interactive/tabular elements: buttons, tabs, chips, table cells, menu items, breadcrumbs, tooltips, form labels.
surface & color rules
Backgrounds — Light mode: warm whites only. #FBFAF7 for page, #F6F5F1 for cards. Never pure #FFFFFF.
Borders — 1px #ECEAE6 on light-mode cards. Hover shifts border to teOrange.
Shadows — Prefer border-based depth on light surfaces. Reserve shadows for overlay layers only.
interaction rules
Icons — lucide-react only. 16px UI · 20px emphasis · 24px standalone. Stroke: 1.5.
Motion — Never animate layout properties (width, height, top, left). Use transform and opacity only.
Scrollbar — 6px track, teOffWhite. Thumb: teLightGray, pill radius. Hover: teMidGray.
component design patterns cheat sheet
componentbgborderradiusfonthover
button (primary)teBlacktransparent6pxMono, uppercasebg → teOrange, translateY(-1px)
button (outlined)transparentteOffWhite6pxMono, uppercasebg → teCream, border → teLightGray
cardteCream1px teOffWhite12pxSans, 300border → teLightGray, shadowSm
chipteOffWhitenone4pxMono, 0.6rem, uppercase—
inputteWhite1px teOffWhite6pxSans, 1rem, 300focus: orange border + ring
table headtransparent2px bottom teBlack—Mono, 0.64rem, uppercase—
dialogteWhitenone14pxSans, 1.25rem, 400scale-in entrance