Back to Hub
PC Platform Core
Read the brief

Dark-light platform reference

Use Platform Core when the page should feel shipped before it feels marketed.

페이지가 마케팅보다 먼저 출시된 제품처럼 보여야 한다면 Platform Core가 맞습니다.

ページがマーケティングより先に公開済みの製品として見えるべきなら Platform Core が合います。

It works best when sign-in, docs, environments, and support details need one calm system. The goal is not spectacle. The goal is to make dark and light feel equally operational.

Work email
or
Terms of Use Privacy Policy

Entry Surface

A centered auth stack makes the page feel like a working platform before deeper copy appears.

Resource Row

Four equal cards under the hero turn the first scroll into navigation instead of decoration.

Theme Pairing

Dark and light should share one spacing model, one border language, and one component hierarchy.

Release Tone

Legal links, support paths, and end-of-page actions should stay inside the same quiet system.

Structure

One component language should cover entry, docs, proof, and support.

Platform Core gets weaker when each section invents a new visual idea. Keep the shell consistent so the page reads as one shipped system.

Dark and light should share the same skeleton.

Only the tokens change between modes. Radius, spacing, card density, and border weight stay fixed.

  • Dark mode uses near-black surfaces and bright text.
  • Light mode shifts to warm paper neutrals without becoming soft.

The hero should behave like an entry screen.

A centered sign-in stack gives the page immediate utility and keeps the headline from turning into a slogan wall.

  • Keep one clear primary action.
  • Let secondary paths stay visible but visually subordinate.

The resource row should explain the model fast.

The four cards under the hero do the work of sub-navigation. Short labels and one-line descriptions are enough.

  • Cards should stay equal in height and weight.
  • Icons can be tiny and neutral, never decorative.

Proof and support must keep the same visual temperature.

FAQ, legal links, and end-of-page actions should feel like the same system, not a softer marketing footer.

  • Keep the same line weight and corner language to the bottom of the page.
  • Reserve emphasis for one primary button and one accent value.

Why it works

The page feels credible when the first screen already looks usable.

Core ratio

2 modes / 1 system

Dark and light should change tokens, not product logic. That consistency is what makes the page feel launched instead of mocked up.

Style note

“If the entry screen already looks operational, the rest of the page can explain instead of perform.”
Platform Core guideline
01

Entry

Start with a centered auth-style stack and one dominant action.

02

Resources

Place four flat cards immediately below so docs and tools feel one click away.

03

Surface

Use a split section with cards on one side and a quiet system preview on the other.

04

Close

End with proof, FAQ, and a restrained footer without changing the component language.

FAQ

Common questions when adapting Platform Core to a style page.

Should light mode feel softer than dark mode?

No. It can be warmer, but it should keep the same spacing, border rhythm, and button behavior as dark mode.

Do I need a big hero illustration?

Not usually. The centered entry stack already gives the page a strong platform identity, so an oversized hero graphic often adds noise.

Can this style work outside developer tools?

Yes. It also fits documentation, billing, scheduling, or account-management pages when trust matters more than spectacle.

What usually makes this style look fake?

Glow, dashboard theater, oversized slogans, or a light mode that looks like a separate redesign usually break it first.

Style reference

Platform Core works when dark and light both behave like product infrastructure.

Use it when sign-in, docs, settings, and support all need to live inside one credible system. The page should feel usable before it tries to persuade.

Theme pairing

Dark and light should share one component model.

Do not treat light mode as a separate redesign. Keep the same spacing, border weight, button sizing, and card density so the product still feels operational.

  • Dark mode defaults to near-black surfaces and bright text.
  • Light mode shifts to warm paper tones without becoming airy or soft.

Page anatomy

The central sign-in stack sets the tone before anything else.

The first screen should look like a place a team could actually enter. That is why the auth stack, resource row, and support paths matter more than a giant headline alone.

  • Hero: centered auth flow with one primary action.
  • Middle: resource row, structure section, rationale, and workflow sequence.

Surface rules

Keep the system quiet: thin lines, flat fills, muted motion.

The page becomes more believable when it avoids startup theater. Thin borders and consistent radii do more than decorative gradients or glow ever will.

  • No gradients, glass, floating badges, or oversized shadows.
  • Hover states only adjust color or border tone within 160ms.

AI Request Prompt

Design a landing page in Platform Core style — a real launched developer platform with a restrained dark default theme and a matching light theme.

This is not a concept site.
It should feel like an actual product customers already use for docs, API access, environments, and launch operations.

Choose a believable product category such as developer platform, API console, documentation service, release operations, or account infrastructure.
Avoid AI, crypto, cyberpunk, luxury, futuristic visuals, startup hype language, or decorative dashboards.

STYLE DNA:
- dark mode by default, but light mode must feel equally intentional
- central auth stack or account entry surface in the hero
- thin-line cards with flat fills
- restrained sans-serif typography
- real navigation and resource hierarchy
- no spectacle

COLOR TOKENS:
Dark:
--bg: #101010
--surface: #151515
--surface-2: #1b1b1b
--surface-3: #202020
--text: #f4f4f4
--muted: #a3a3a3
--line: #2b2b2b
--line-strong: #3a3a3a
--accent: #ffffff
--accent-ink: #121212

Light:
--bg: #fafafa
--surface: #ffffff
--surface-2: #f4f4f4
--surface-3: #eeeeee
--text: #171717
--muted: #737373
--line: #e5e5e5
--line-strong: #d4d4d4
--accent: #171717
--accent-ink: #fafafa

No gradients. No extra colors beyond tiny neutral SVG icons if needed.

TYPOGRAPHY:
Heading + body: Inter or similar neutral sans-serif
H1: clamp(2.8rem, 5.2vw, 4.8rem), weight 600, line-height 1.02
H2: clamp(2rem, 4vw, 3.35rem), weight 600, line-height 1.05
Card title: 1.35rem to 1.5rem, weight 600
Body: 0.98rem to 1.05rem, line-height 1.65 to 1.75
Meta/nav: 0.82rem to 0.875rem, weight 500 to 600
No serif, no display fonts, no aggressive tracking.

LAYOUT:
- max-width around 1280px
- calm centered hero
- compact top nav with real links
- hero width around 760px
- auth stack width around 820px
- four resource cards below hero
- split product section with cards on one side and a platform preview panel on the other
- one proof section with a metric and one customer quote
- one 4-step workflow strip
- FAQ
- style prompt block near the end
- mobile breakpoint around 768px, stack cleanly to one column

COMPONENT RULES:
- borders: 1px only
- large rounded corners are allowed, but keep them consistent
- shadows: none, or extremely subtle only
- buttons: ordinary platform buttons, not glossy
- cards: flat surfaces, no hover lift
- links: color or underline shift only
- motion: hover transitions only, 160ms max

COPY TONE:
- calm
- operational
- specific
- written like a company with paying customers
- no claims like revolutionary, magical, next-generation, or transforming everything

FORBIDDEN:
- glassmorphism
- mesh gradients
- neon glow
- floating chips
- decorative analytics charts
- giant centered slogan blocks with no utility
- cinematic marketing art
- anything that feels like an AI-generated Dribbble concept

OUTPUT:
1) CSS custom properties for both dark and light themes
2) semantic HTML + CSS
3) responsive desktop/tablet/mobile layout
4) accessible contrast in both modes
5) no horizontal scroll
6) a believable real-service information hierarchy