Atmospheric LiDAR
Hover the card: the border warms to champagne.
Colour
Three families, one signal
Cyan is for action. Champagne is metal: hairlines, dates and numbers. Obsidian and ivory are the two kinds of light.
Signal cyan
Fills primary buttons and focus rings. As text, it shifts lighter at night and deeper by day to stay above 4.5:1.
cyan-400
#18bcc4Link and accent text at nightcyan-500
#08a5adButton fill, focus ringcyan-700
#066f74Link and accent text by dayChampagne
Never a fill. Hairlines at 22% alpha, the rule before each label, and every date, year and figure.
champagne-300
#c9bc9eMetal text at night, hairlinesbronze-700
#6e5f3dMetal text by daychampagne-wash
#211f19Callout ground at nightObsidian and ivory
Night surfaces step up in lightness; day surfaces step up toward white. The sunk layer holds contact, footer and deep bands.
obsidian-950
#080d10Sunk, deep bandobsidian-900
#0c1216Night pageobsidian-850
#121a20Night cardmist-400
#9ca7a9Night secondary textivory-100
#f0eee8Day pageivory-50
#f8f7f3Day cardink-600
#56626aDay secondary textink-900
#182127Day text, stage inkSemantic roles
Components use these names only. Switch the theme above to watch each one remap.
| Token | Current value | Used for |
|---|---|---|
--surface | Page background | |
--surface-raised | Cards, tags, panels | |
--surface-sunk | Contact, footer | |
--ink | Headings and body | |
--ink-muted | Supporting text | |
--accent | Primary action fill, focus | |
--accent-text | Links, organisations, accent words | |
--lux-text | Dates, figures, years | |
--line-lux | Champagne hairlines | |
--border | Structural dividers |
Typography
DM Sans carries the voice
One family for everything read. Cormorant only for publication years, mono only for data.
DisplayDM Sans 600 · 42–68px · −0.04em
Patcharadanai Sombatsatien
HeadlineDM Sans 500 · 34–48px · −0.035em
Building CeroSoft
TitleDM Sans 500 · 22/30
Adaptive-optics closed loop
LedeDM Sans 400 · 19/31
I build software where models meet hardware: deep learning, telescope instruments and RF test automation.
BodyDM Sans 400 · 16/26 · Noto Sans Thai fallback
Calibration and characterisation of the adaptive-optics system, then closed-loop experiments. ระบบควบคุมเครื่องมือดาราศาสตร์
LabelDM Sans 600 · 11px caps · 0.22em
Selected work
NumeralCormorant Garamond 400 · 30px
2024 · 2025
DataIBM Plex Mono 500 · 12px
Components
Live parts, not pictures
Every element here uses the same class the portfolio ships.
Buttons
Tags and list markers
PythonComputer visionPyVISA
- Shack–Hartmann sensor calibration
- Leaky-integrator control loop
Stat
3.63GPA, M.Sc.
5Publications
Callout
Full scholarship from the Information Technology Foundation.
Product stage · fixed ivory in both themes
CeroSoft
cerosoft.netLifted from cerosoft.net's portfolio stage: an ivory plate with dark ink, deep-cyan links and bronze figures.
Deep band · fixed obsidian in both themes
Training-free domain adaptation via LoRA fusion
- 1Similarity-guided selectionPick the adapters closest to the input domain
- 2Dynamic fusionWeight and merge them at inference time
Orbit
Card
Rules
Keep it precise
Do
- Spend cyan only on what can be clicked, plus one accent word per heading
- Put dates, figures and years in champagne by night, bronze by day
- Separate with hairlines before reaching for a shadow
- Check both themes; the two stages must not change
Don't
- Bring back the old gold and indigo
- Round past 4px or use pill shapes
- Use gradient text, glass cards or hard block shadows
- Set champagne text on ivory