Enterprise calm
Truth > vanity metrics. Institutional, board-ready — not startup pitch.
S-DNA
Sembcorp Design DNA · Second Design OS
Data-first. Decoration-last.
S-DNA là tài liệu tham khảo thiết kế lấy cảm hứng từ Annual Report và Investor Relations của Sembcorp — lựa chọn thứ hai bên cạnh Branding Guideline. Trang này demonstrates the philosophy: documentation that looks like Sembcorp.
Nguồn: Interactive AR 2025 · 1H2025 Slides
Energy capacity
8,082 MW
Urban land bank
16,223 ha
Built-up area
1.1 million sqm
Design Philosophy
Enterprise calm · data-first · minimal decoration · high information density · large whitespace · strong hierarchy. Cards first. Charts second. Animation last.
Data-first
Numbers and insights drive layout. Decoration stays quiet.
Cards first
KPI cards are the default primitive for dashboards and investor pages.
Whitespace breathes
White space > shadows. Borders > gradients. Teal > rainbow.
Color Tokens
Approximate Sembcorp palette — inspiration only. Does not replace Branding Guideline --c-* tokens.
| Token | Hex | Purpose |
|---|---|---|
| Primary teal | #00A7A0 | Hero cards, charts, progress, highlights |
| Soft teal | #DDF4F2 | Background blocks, KPI fills |
| Soft blue | #DCEAF8 | Secondary cards, segments |
| Soft purple | #ECE7FA | Alternate KPI cards |
| Text heading | #111111 | Titles, KPI values |
| Text body | #555555 | Paragraphs, insights |
| Muted | #888888 | Labels, units, captions |
| Border | #E6E6E6 | Card outlines, dividers |
Primary teal
#00A7A0Charts, accentsSoft teal
#DDF4F2KPI backgroundsSoft blue
#DCEAF8Secondary blocksSoft purple
#ECE7FAAlternate KPIAnnual Report Typography
Large numbers dominate. Labels support. Units whisper. Weight 700–800. Units never dominate.
8,082 MW
Gross profit · EBITDA margin · Segment revenue
KPI Cards
Soft pastel · colored left accent · large value · small unit · thin outline icons · wide cards.
Energy
8,082 MW
Urban Solutions
16,223 ha
Water
12.4 M m³/d
Storage
676 MWh
Renewables
3.2 GW
Icon DNA
Outline icons · thin strokes · circle containers. Lucide · Tabler · Phosphor — outline only.
- Lucide · Tabler · Phosphor
- Outline icons only
- Thin strokes · circle containers
- Emoji
- Filled icons
- Cartoon · 3D icons
Chart DNA
Waterfall preferred. Minimal legends. ECharts · Chart.js · Highcharts. No 3D · no rainbow · no decorative charts.
- Waterfall charts
- Horizontal bar
- Stacked bar
- Trend line
- Distribution chart
- Pie overload
- 3D charts
- Rainbow charts
- Decorative charts
Waterfall — EBITDA bridge
Horizontal bar — segment mix
Chart colors: Positive teal · Neutral gray · Secondary soft blue · Warning orange · Negative soft red.
Annual Report Slide DNA
Investor relations · board meeting · institutional presentation. Not startup pitch · not YouTube thumbnail · not marketing brochure.
Cover
Large title · tiny subtitle · strong whitespace · no decorations.
KPI
Large metrics · small units · thin icons · soft pastel cards.
Segment
Waterfall + horizontal bars · 3 bullets · one insight sentence.
Financial
Tables + bars · neutral colors · minimal legend.
Summary
3 takeaways · 1 outlook · 1 callout · no marketing language.
Boardroom Test
Quality gate trước khi ship dashboard, stats page, hoặc investor slide.
"Would this look natural inside a Sembcorp annual report or a board meeting deck?"
If not → simplify.
Anti-patterns
Think Sembcorp Annual Report × Bloomberg × McKinsey — not AdminLTE or Crypto Dashboard.
AdminLTE
Boxed widgets, saturated Bootstrap palette.
Crypto dashboard
Neon, pulsing numbers, dark overload.
Glassmorphism
Blur layers conflict with data clarity.
3D charts
Perspective distortion, unreadable values.
Dribbble effects
Fancy motion, decorative UI noise.
PowerPoint templates
Gradient overload, clip-art icons.
Compatibility Rule
S-DNA is optional. Never apply globally. Never redesign existing pages because Sembcorp looks beautiful.
| Priority | Source | Role |
|---|---|---|
| 1 | Branding Guideline | Default design DNA |
| 2 | Existing Design DNA | Patterns already on blog |
| 3 | Existing component library | Reuse before creating |
| 4 | S-DNA | Optional — borrow selectively |
Use S-DNA for
Stats pages · dashboards · annual reports · investor slides · KPI-heavy sections.
Never use for
Global redesign · blog articles · navbar · footer · existing page refresh.