Power: a DESIGN.md example
Black and white, condensed Oswald type. Below is what this DESIGN.md looks like as a style guide and a landing page, followed by the full file. From the open-source awesome-design-skills collection by Bergside, MIT licence.
As a style guide
Style guide
Power
Color
primary
#FAFAFA
20.1:1 on bg
success
#16A34A
6.37:1 on bg
warning
#D97706
6.59:1 on bg
danger
#DC2626
4.35:1 on bg
surface
#000000
1.00:1 on bg
text
#FFFFFF
21.0:1 on bg
Type
h1 · Oswald · 3rem
Sphinx of black quartz, judge my vow.
body-md · Oswald · 1rem
Sphinx of black quartz, judge my vow.
label-caps · JetBrains Mono · 0.75rem
Sphinx of black quartz, judge my vow.
Components
Card title
Cards use the surface color, border and radius from the file.
Space and shape
sm · 8px
md · 16px
sourceScale · 8pt baseline grid
sm · 4px
md · 8px
Notes from the file
Overview
High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for premium brand experiences.
Style Foundations
- Visual style: modern, bold, big headings
- Typography scale: desktop-first expressive scale
- Typography fonts: primary=Oswald, display=Oswald, mono=JetBrains Mono
- Typography weights: 100, 200, 300, 400, 500, 600, 700, 800, 900
- Color palette: primary
- Spacing scale: 8pt baseline grid
Colors
- Primary (#FAFAFA): Token from style foundations.
- Secondary (#FAFAFA): Token from style foundations.
- Success (#16A34A): Token from style foundations.
- Warning (#D97706): Token from style foundations.
- Danger (#DC2626): Token from style foundations.
- Surface (#000000): Token from style foundations.
- Text (#ffffff): Token from style foundations.
- Neutral (#000000): Derived from the surface token for official format compatibility.
As a landing page
New in 2026
Everything your team ships, in one calm place.
High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for premium brand experiences.
No card needed. Cancel any time.
Plan, review and ship without the status meeting.
Every request, file and decision lives next to the work it changed, so nobody asks where things are.
See how it works →Fast by default
Pages load before you finish clicking.
Private by design
Your data stays yours. Full stop.
“We replaced four tools and a weekly meeting. The team noticed in a day.”
Dana Ortiz, Head of Operations at Bramblewood
Starter
$0
For trying it out
Team
$24
Per seat, per month
Enterprise
Let’s talk
SSO, audit logs, SLAs
Ready when your team is.
The DESIGN.md file
---
name: Power
colors:
primary: "#FAFAFA"
secondary: "#FAFAFA"
success: "#16A34A"
warning: "#D97706"
danger: "#DC2626"
surface: "#000000"
text: "#ffffff"
neutral: "#000000"
typography:
h1:
fontFamily: "Oswald"
fontSize: 3rem
body-md:
fontFamily: "Oswald"
fontSize: 1rem
label-caps:
fontFamily: "JetBrains Mono"
fontSize: 0.75rem
sourceScale: "desktop-first expressive scale"
weights: "100, 200, 300, 400, 500, 600, 700, 800, 900"
rounded:
sm: 4px
md: 8px
spacing:
sm: 8px
md: 16px
sourceScale: "8pt baseline grid"
---
## Overview
High-end dark aesthetic with bold headings, monochromatic palette, and premium feel for premium brand experiences.
## Style Foundations
- **Visual style:** modern, bold, big headings
- **Typography scale:** desktop-first expressive scale
- **Typography fonts:** primary=Oswald, display=Oswald, mono=JetBrains Mono
- **Typography weights:** 100, 200, 300, 400, 500, 600, 700, 800, 900
- **Color palette:** primary
- **Spacing scale:** 8pt baseline grid
## Colors
- **Primary (#FAFAFA):** Token from style foundations.
- **Secondary (#FAFAFA):** Token from style foundations.
- **Success (#16A34A):** Token from style foundations.
- **Warning (#D97706):** Token from style foundations.
- **Danger (#DC2626):** Token from style foundations.
- **Surface (#000000):** Token from style foundations.
- **Text (#ffffff):** Token from style foundations.
- **Neutral (#000000):** Derived from the surface token for official format compatibility.
More DESIGN.md examples
- Cityboat Calm product UI, three bright accents
- Dramatic Dark, violet, high contrast
- Enterprise Dark mode, cobalt blue, IBM Plex Sans
- Neobrutalism Loud yellow, heavy outlines
- Editorial Serif reading type, amber accent
- Cafe Warm browns and cream
- Matrix Monospace, terminal green
- Doodle Hand-lettered and playful
- Blank DESIGN.md template Start your own file
Last updated