Shell 대시보드 스타일 — 에너지, 포코트, 당당함

흰 바탕에 노란 선과 빨간 캐노피 막대를 두르고, 주유소 가격 기둥으로 핵심 숫자를 세운 대시보드 스타일입니다. shell.com의 실제 CSS 토큰을 읽고, 주유소의 가격 기둥과 실적 발표 슬라이드(비교 상자, 빨간 차트 제목, 이익 브리지)에서 숫자를 보여 주는 방식을 하나의 카드와 차트 문법으로 옮겼습니다.

아래 샘플은 비즈니 에너지의 가상 주간 모빌리티 보고입니다. 위쪽 구간 메뉴를 바꾸면 모든 카드가 함께 바뀌고, 노선 지도에서 사이트를 고르면 반경 2마일 경쟁 주유소의 게시가와 할 일이 나옵니다.

Design

• 색: 노랑 #fbce07과 빨강 #dd1d21은 캐노피 막대·선·차트 제목 같은 틀에만 쓰고, 데이터는 제목이 말하는 것만 빨강 #e03a35, 나머지는 회색입니다.
• 한 카드: 가격 기둥, 비교 상자, 이익 브리지, 예외 목록, 노선 운영 지도, 실적 표가 모두 그림 번호 → 결과를 말하는 제목 → 노란 선 → 단위를 붙인 빨간 차트 제목 → 그림 → 회색 주석 띠 순서를 따릅니다.
• 글자와 숫자: Jost와 Pretendard를 쓰고, 게시가는 0.1센트까지 위첨자로, 음수는 괄호로, 지난주는 "(43주: x)"로 적습니다.

DASHBOARD.md

DASHBOARD.md와 에이전트 스킬, Tableau 팔레트, Power BI 테마를 프로젝트 폴더에 한 줄로 넣습니다.

npx @vizney/styles@latest add shell

DASHBOARD.md · 프롬프트 · zip 내려받기 · npm

우리 회사 웹사이트로 같은 패키지를 비공개로 만들어 드립니다. 제작 문의 · 다음에 만들 브랜드는 GitHub에서 요청하고 👍로 투표해 주세요.

Shell의 공식 디자인이 아니며 제휴·승인 관계가 없습니다. 공개된 웹사이트(shell.com, shell.us)와 주유소·실적 발표 자료 등 공개된 접점에서 보이는 디자인을 읽어 낸 참고용 스타일이며 로고·서체·사진·데이터는 포함하지 않습니다. 상표는 각 소유자의 것입니다. 샘플의 회사(비즈니 에너지)와 숫자는 모두 가상입니다.