Core palette
Black canvas, warm white, orange spark.
Ink · #000000
Paper · #FFFFFF
Orange · rgb(244, 81, 30)
Gray 500 · #858585
Border · #292929
Success · #348365
Ink #000000 · Paper #FFFFFF · Accent #F4511E
Portfolio design language · Component library
Design System
Foundations
Inspired by Kartik Sharma’s portfolio: editorial serif headlines, confident black and white contrast, restrained orange accents, and compact labels that give every section a clear rhythm.
KAY-SAN DESIGN SYSTEM · 01.0
Foundations
Color, type, spacing, shape, and layout.
Type scale
Editorial display meets quiet utility sans.
Editorial headlineDISPLAY / SERIF
Section heading · clear and confidentHEADING / 600
Body text stays comfortable and readable.BODY / 13–16
TRACKED LABELCAPTION / 9
Display: Editorial Serif · Body: Interface Sans · Label: 9px / uppercase / tracked
Spacing & shape
A 4px rhythm and crisp corners.
4816243248 pxRadius 0 / 4 / 16
4px base · 12 column desktop grid · 24px gutter · 1200px max width
Buttons
Clear actions with a crisp visual hierarchy.
Button variants
Primary, inverse, outline, ghost, and danger.
Primary · Secondary · Outline · Ghost · Danger
Button states
Hover, focus, disabled, loading, and confirmation.
Hover brightens · Focus uses orange ring · Disabled uses reduced opacity
Form controls
High contrast controls with visible focus states.
Text field
Label, placeholder, hint, and focus treatment.
We’ll only use this to get back to you.
Text / email / search / textarea · default / focus / error / disabled
Select menu
Native dropdown with library styling.
Default / open / selected / focus / disabled / error
Checkboxes
Independent choices that can coexist.
Unchecked · checked · indeterminate · disabled
Radio group
Choose one option from a related set.
Unchecked · checked · disabled
Toggle switches
Preferences that take effect immediately.
Show availabilityNewsletter
On · off · disabled · 32 × 18px track
Feedback
Small signals that keep people in the loop.
Badges
Compact category and status markers.
FEATUREDAVAILABLEIN REVIEWERRORDESIGN
Featured · neutral · success · warning · error
Inline alert
Informative context with semantic emphasis.
ⓘ
Project brief received
Thanks — I’ll review the details and follow up soon.
Info · success · warning · error · dismissible
Toast message
Brief confirmation after an action.
Success · info · error · optional action
Surfaces
Project cards, structured data, and focused decisions.
Project card
A reusable case study teaser.
PRODUCT DESIGN
Complexity, made clear.
A confident project teaser with a clear story and outcomes.
Default / hover / focus · media-first layout
Data table
Clean rows and legible status treatment.
| PROJECT | TYPE | STATUS |
|---|---|---|
| ZOZola | Industrial SaaS | SHIPPED |
| TFTogether | Fintech | IN PROGRESS |
| FLFlaverly | AI / Consumer | CONCEPT |
Header · row · selected · empty · pagination
Confirmation dialog
A pause for decisions that deserve a moment.
Open / closed · cancel / confirm · Escape to close