📋 What was this drill?

Drill: Dark mode native: build a dashboard on #08090a (Linear-style). Depth via luminance stepping, not shadows. Borders at 5-8% white. Target: looks designed-for-dark, not inverted.

Interpretation: Built Beacon, a feature-flag & experimentation platform console on a 7-step luminance ladder (#08090a canvas). Fresh domain (not the 07-11 issue tracker). Single indigo accent (#6366f1) reserved for active nav rail, primary CTA, selected-row left edge, active tab underline. Desaturated semantic status colors (enabled=emerald, disabled=rose, scheduled=amber). Flat depth model — zero box-shadow anywhere. Linear/Sentry/Vercel dark-dev-tool aesthetic.

Production
Total Flags
47
▲ 3 this week
Enabled
31
▲ 2 since Friday
Scheduled
6
— unchanged
Disabled
10
▼ 1 this week
All 47 Enabled 31 Scheduled 6 Disabled 10 Archived 3
Name
Key
Status
Environments
Rollout
Modified
Checkout v2 Redesign
New 3-step checkout flow with address autocomplete
checkout_v2
Enabled
P S D
100%
2h ago
AI Product Recommendations
ML-powered "You might also like" carousel on PDP
ai_recs_pdp
Enabled
P S D
25%
5h ago
Progressive Image Loading
Blur-up placeholder with LQIP technique
img_progressive
Enabled
P S D
100%
1d ago
Guest Checkout
Allow purchase without account creation
guest_checkout
Scheduled
P S D
Aug 15
1d ago
Stripe Link Express Checkout
One-click checkout button above payment form
stripe_link
Enabled
P S D
50%
2d ago
Real-time Inventory Sync
WebSocket push for stock count updates
rt_inventory
Disabled
P S D
0%
3d ago
Dark Mode Catalog
Dark theme for browse and search pages
dark_catalog
Enabled
P S D
75%
4d ago
Apple Pay on Web
Apple Pay button in Stripe payment element
applepay_web
Scheduled
P S D
Aug 20
5d ago
Tax Exempt Flow
B2B customers upload tax exemption certificates
tax_exempt
Enabled
P S D
10%
6d ago
Wishlist Sharing
Public shareable links for customer wishlists
wishlist_share
Disabled
P S D
0%
1w ago
Live · synced 4s ago Showing 10 of 47 flags
Checkout v2 Redesign
checkout_v2 · last evaluated 12ms ago
Targeting Variations Metrics Activity
If country is one of ["US", "CA", "GB"] Variation A (new flow)
If user_tier equals "enterprise" Variation A (new flow)
If cart_total 500 Variation A (new flow)
Else default bucketing Percentage rollout
100%
Default rollout (all other users)
All traffic receives Variation A
14,209 evals today · 0.2ms avg latency
Sara Kim increased rollout from 75% to 100% in Production
2h ago · via web console
Marcus Lee enabled flag in Staging
6h ago · via API
Sara Kim added targeting rule: country is one of ["US", "CA", "GB"]
1d ago · via web console
Sara Kim created flag
12d ago · via web console
Dark Mode Native — Craft Decisions
01
7-step luminance ladder
Depth from +3% per step fills — #08090a#2a2d32. Zero box-shadow anywhere. Each tier is a distinct elevation; the eye reads the hierarchy before reading content.
02
Borders at 6% white
Three weights only: rgba(255,255,255,0.06) hairline, 0.08 divider, 0.12 emphasis. Heavier borders read as "Vercel clone"; lighter disappears. These mark where the ladder steps, not new depth.
03
One accent, four roles
#6366f1 indigo appears ONLY in: active nav rail, primary CTA, selected-row left edge + ID, active tab underline. Anywhere else would dilute the contract. Status colors are semantic data, not decoration.
04
Desaturated semantic colors
#34d399 success, #f5b14c warn, #f87171 danger — all pulled ~15% toward neutral so they read on near-black without screaming. Raw brand green on #08090a punches too hard.
05
Inter ≥450 weight on dark
Weight 400 disappears at 13px on near-black. Body uses 450, secondary uses 500. font-feature-settings: "tnum","zero","ss01","cv11" + letter-spacing: -0.003em globally.
06
Selected = tint + rail + accent ID
Three signals: rgba(99,102,241,0.06) background tint + 2px left rail + flag title in accent color. Drop any one and the row reads as just "hovered." Background alone = hover; + rail = selected.