# Design Tokens — OKF Generator

## Brand Palette

```
brand-50  #f5f3ff  │ bg, badges (light)
brand-100 #ede9fe  │ badge bg
brand-200 #ddd6fe  │ borders (light)
brand-300 #c084fc  │ text on dark
brand-400 #a855f7  │ primary accent text (dark mode)
brand-500 #8b5cf6  │ primary accent / pills
brand-600 #7c3aed  │ primary brand button / CTA
brand-700 #6d28d9  │ hover / active
brand-800 #5b21b6  │ deep borders
brand-900 #4c1d95  │ deepest brand bg
brand-950 #0b041a  │ extreme dark
```

## Viz Accent (slightly blue-leaning purple)

```
--accent        #7c6cff  │ buttons, focus, active
--accent-strong #9385ff  │ hover, selected
--accent-soft   rgba(124,108,255,.14) │ bg highlight
```

## Light Accents

```
--accent-light        #6d5efc
--accent-strong-light #5847e8
--accent-soft-light   rgba(109,94,252,.10)
```

## Surfaces

```
               Dark      Light
--bg          #0a0a0f   #f7f7fb
--surface     #131319   #ffffff
--surface-2   #191922   #f4f4f9
--surface-3   #1f1f2b   #ececf4
```

## Text

```
               Dark      Light
--text        #f2f2f5   #131320
--text-2      #a3a3b5   #5c5c72
--text-3      #6f6f82   #8a8aa0
```

## Borders

```
               Dark      Light
--border      #26262f   #e3e3ec
--border-s    #34343f   #d3d3e0
```

## Concept Type Colors

```
Class       #a78bfa  │ purple
Function    #38bdf8  │ sky blue
Module      #fbbf24  │ amber
Dependency  #4ade80  │ emerald
Interface   #22d3ee  │ cyan
Method      #c084fc  │ lavender
Table       #fb7185  │ rose
Trigger     #f43f5e  │ red
Type        #818cf8  │ indigo
View        #fb923c  │ orange
```

## Semantic

```
Danger      #f87171 / #dc2626
Success     #4ade80 / #22c55e
Warning     #fbbf24 / #d97706
```

## Gradients

```
Logo icon: #5b21b6 → #7c3aed → #a78bfa
Hero text: #8b5cf6 → #d946ef → #ec4899
CTA bg:    #4c1d95 → #5b21b6 → #0b041a
Button:    #7c3aed → #4f46e5
```

## Shadows

```
Card:  0 2px 12px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.04)
Nav:   0 4px 32px rgba(0,0,0,.3), 0 1px 4px rgba(0,0,0,.15)
Code:  -4px 0 24px rgba(0,0,0,.3)
Ego:   0 8px 24px rgba(0,0,0,.35)
```

## Language Dots (for code highlighting / language badges)

```
Python      #3572A5
JavaScript  #f7df1e
TypeScript  #3178c6
Go          #00ADD8
Java        #b07219
Rust        #dea584
Swift       #F05138
Kotlin      #A97BFF
Ruby        #701516
C           #555555
C++         #f34b7d
C#          #178600
PHP         #777BB4
Dart        #00D2B8
Scala       #DC322F
Julia       #4063D8
SQL         #e38c00
```

## Radius

```
--r-sm:  6px
--r-md:  10px
--r-lg:  14px
--r-xl:  18px
--r-nav: 16px
--r-pill: 99px
```

## Spacing

```
--sp-1:  4px
--sp-2:  8px
--sp-3:  12px
--sp-4:  16px
--sp-5:  20px
--sp-6:  24px
--sp-8:  32px
--sp-10: 40px
```
