Design System
The single source of truth for Syntax2Code
Syntax2Code Design System
A premium, opinionated system inspired by Linear's precision, Stripe's clarity, Vercel's restraint, and GitHub's density. Every component, token, and surface in the platform is built from the primitives below.
8
Pages
42
Components
12
Tokens
01
Color foundations
Brand & Surface
Background
oklch 0.16 270
Card
oklch 0.20 270
Muted
oklch 0.24 270
Border
oklch 0.28 270
Foreground
oklch 0.97 270
Muted Fg
oklch 0.68 270
Semantic accents
Primary
Brand · CTAs
Accent
Highlights
Success
Positive
Warning
Caution
Info
Neutral signal
Gradients
Primary
Accent
Warm
Cool
02
Typography
Display — Space Grotesk
Display 5xl / Bold
text-5xl · font-bold · tracking-tight
Heading 3xl / Bold
text-3xl · font-bold
Heading xl / Semibold
text-xl · font-semibold
Body — Inter
Body base — Built for engineers, by engineers.
text-base · 16px · 1.5 line-height
Body small — secondary content, descriptions, metadata.
text-sm · 14px · text-muted-foreground
Eyebrow / Label
text-xs · uppercase · tracking-wider
const greeting = "Hello, syntax";
font-mono · JetBrains-style
03
Spacing, radius & elevation
8px Grid
Border radius
sm
0.5rem
md
0.625rem
lg
0.75rem
xl
1rem
2xl
1.25rem
full
9999px
Elevation & shadows
1px border
inset highlight + drop
shadow-lg
primary glow
05
Inputs & search
Text input
With label
Email address
We'll never share your email.
Search bar
Disabled
Error state
Please enter a valid email.
Success state
Looks good.
06
Badges & chips
Status badges
Filter chips
Dismissable chips
07
Cards
Stat card
Hover-lift surface with inset highlight.
12,840
Media card
Cover image · title · body · action.
Feature card
Decorative blur for marketing emphasis.
08
Tables
| Problem | Difficulty | Topic | Acceptance |
|---|---|---|---|
| Two Sum | Easy | Arrays | 54% |
| LRU Cache | Medium | Design | 41% |
| Trapping Rain Water | Hard | Arrays | 62% |
09
Tabs
Segmented (pill)
Underline tabs
10
Progress
Linear
Radial
11
Modals & dropdowns
Modal
Amazon Assessment
Choose your mode
Dropdown menu
12
Charts
Bar chart — XP this week
Sparkline — Streak trend
+18%
vs last month
Donut — Course completion
- Completed · 50%
- In progress · 25%
- Not started · 16%
- Other · 9%
13
States, skeletons & toasts
Loading skeleton
Empty state
Nothing here yet
Bookmark a course to see it appear here.
Toast notifications
Lesson complete
+150 XP added to your weekly total.
New webinar scheduled
System Design Live · Sunday 7 PM IST.
Streak at risk
Solve 1 problem today to keep your 42-day streak.
Submission failed
Time-limit exceeded. Try optimizing your loop.
14
Iconography
Lucide · 1.5px stroke · 16/20/24 sizes
Design system loaded
All tokens · components · patterns