DS

Design System

David Ortiz Ecosystem

Unified Design System

One system,
four unique identities

Shared design tokens, reusable components, and site-specific animations that maintain brand consistency while preserving individual character.

Color Tokens

Shared palette across all properties

Brand Colors

Site-Specific

David Ortiz

High Encode Learning

CSBrain AI

Prompt Defenders

Typography

Font families and scale

Font Families

Sans (Primary)

Inter / SF Pro Display

Mono (Code)

JetBrains Mono

Type Scale

xsThe quick brown fox
smThe quick brown fox
baseThe quick brown fox
lgThe quick brown fox
xlThe quick brown fox
2xlThe quick brown fox
3xlThe quick brown fox
4xlThe quick brown fox

Component Library

Reusable components with site-specific themes

D

David Ortiz

Personal notes on systems, experiments, and abstraction layers

davidtiz.com

Buttons

Badges

LiveSuccessWarningErrorInfo

Cards

Glass Card

Bordered Card

Input

Icons

Unique Animations

Live automation dashboard widgetTerminal-style code blocksParticle field interactionsGlowing neon accents
H

High Encode Learning

Business-facing demos, scoped work, and implementation notes

highencodelearning.com

Buttons

Badges

LiveSuccessWarningErrorInfo

Cards

Glass Card

Bordered Card

Input

Icons

Unique Animations

Learning path progress trackerAI copilot chat widgetCertificate badge animationsCheckmark micro-interactions
C

CSBrain AI

AI-Powered CS Learning Assistant

csbrainai.com

Buttons

Badges

LiveSuccessWarningErrorInfo

Cards

Glass Card

Bordered Card

Input

Icons

Unique Animations

Neural network visualizationAI thinking indicatorCode explanation overlaysBrain pulse animations
P

Prompt Defenders

AI Security Testing Platform

promptdefenders.com

Buttons

Badges

LiveSuccessWarningErrorInfo

Cards

Glass Card

Bordered Card

Input

Icons

Unique Animations

Threat detection animationsShield/defense visualizationsAttack vector diagramsSecurity score meter

Animation Catalog

Site-specific motion and effects

D

David Ortiz

davidtiz.com

Hero:hexGrid
Hover:magneticPull
BG:scanLine
H

High Encode Learning

highencodelearning.com

Hero:floatingCards
Hover:springBounce
BG:gradientShift
C

CSBrain AI

csbrainai.com

Hero:neuralNetwork
Hover:pulseGlow
BG:synapseFire
P

Prompt Defenders

promptdefenders.com

Hero:matrixRain
Hover:shieldPulse
BG:threatScan