Matthew DanielDesign system / digital standards
Sections
V0.2 / WORKING DRAFT
Brand standards / October 2026

Clarity at
every scale.

One coherent visual language for Matthew Daniel, from leadership portfolio to digital products. A repeatable system built for sharp thinking and consistent execution.

Design system v0.2Working reference. EB Garamond and Roboto are the selected brand fonts; color ramps, scales, and components remain under review.

Structured. Intentional. Human.

Design decisions become reusable standards.
01 / Foundation

Color with
purpose.

A restrained palette with clear semantic roles. The primary colors establish identity; supporting colors create hierarchy without competing for attention.

Deep Navy
#01233F
Primary ink / surfaces
Soft Cream
#FCF6E9
Primary background
Deep Red
#CD3A40
Action / emphasis
Navy Teal
#1D5272
Secondary ink
Cool Blue
#77ADBA
Supporting surface
Muted Teal
#83B69A
Supporting surface
Light Peach
#EAD7C6
Warm accent surface
Proposed palette extensions

Color ramps & contrast.

Seven families, five shades each. Every card reports contrast for navy or cream text rendered on that shade. Contrast ratios use the WCAG 2.2 formula.

AAA normal text ≥ 7:1AA normal text ≥ 4.5:1Large only AA large text ≥ 3:1Fail below 3:1

WCAG measures a foreground/background pair, not an individual color. UI boundaries and icons have their own 3:1 non-text contrast requirements where applicable. These contrast measurements are useful checks, not a blanket ADA compliance certification.

Deep Navy

100–900 · original color = 500
100 Navy ink · 10.57:1
#CCD3D9
Navy text10.57:1AAA
Cream text1.40:1Fail
300 Navy ink · 4.24:1
#738695
Navy text4.24:1Large only
Cream text3.50:1Large only
500 / core Cream ink · 14.84:1
#01233F
Navy text1.00:1Fail
Cream text14.84:1AAA
700 Cream ink · 16.07:1
#011C32
Navy text1.08:1Fail
Cream text16.07:1AAA
900 Cream ink · 17.28:1
#011425
Navy text1.16:1Fail
Cream text17.28:1AAA

Soft Cream

100–900 · original color = 500
100 Navy ink · 15.73:1
#FEFDFB
Navy text15.73:1AAA
Cream text1.06:1Fail
300 Navy ink · 15.34:1
#FDFAF3
Navy text15.34:1AAA
Cream text1.03:1Fail
500 / core Navy ink · 14.84:1
#FCF6E9
Navy text14.84:1AAA
Cream text1.00:1Fail
700 Navy ink · 9.29:1
#CAC5BA
Navy text9.29:1AAA
Cream text1.60:1Fail
900 Navy ink · 4.95:1
#928F87
Navy text4.95:1AA
Cream text3.00:1Fail

Deep Red

100–900 · original color = 500
100 Navy ink · 11.96:1
#F5D8D9
Navy text11.96:1AAA
Cream text1.24:1Fail
300 Navy ink · 6.79:1
#E49396
Navy text6.79:1AA
Cream text2.19:1Fail
500 / core Cream ink · 4.56:1
#CD3A40
Navy text3.25:1Large only
Cream text4.56:1AA
700 Cream ink · 6.46:1
#A42E33
Navy text2.30:1Fail
Cream text6.46:1AA
900 Cream ink · 9.56:1
#772225
Navy text1.55:1Fail
Cream text9.56:1AAA

Navy Teal

100–900 · original color = 500
100 Navy ink · 11.49:1
#D2DCE3
Navy text11.49:1AAA
Cream text1.29:1Fail
300 Navy ink · 5.81:1
#83A0B1
Navy text5.81:1AA
Cream text2.56:1Fail
500 / core Cream ink · 7.79:1
#1D5272
Navy text1.90:1Fail
Cream text7.79:1AAA
700 Cream ink · 9.91:1
#17425B
Navy text1.50:1Fail
Cream text9.91:1AAA
900 Cream ink · 12.78:1
#113042
Navy text1.16:1Fail
Cream text12.78:1AAA

Cool Blue

100–900 · original color = 500
100 Navy ink · 13.64:1
#E4EFF1
Navy text13.64:1AAA
Cream text1.09:1Fail
300 Navy ink · 10.02:1
#B4D2D9
Navy text10.02:1AAA
Cream text1.48:1Fail
500 / core Navy ink · 6.45:1
#77ADBA
Navy text6.45:1AA
Cream text2.30:1Fail
700 Navy ink · 4.23:1
#5F8A95
Navy text4.23:1Large only
Cream text3.51:1Large only
900 Cream ink · 5.92:1
#45646C
Navy text2.51:1Fail
Cream text5.92:1AA

Muted Teal

100–900 · original color = 500
100 Navy ink · 13.73:1
#E6F0EB
Navy text13.73:1AAA
Cream text1.08:1Fail
300 Navy ink · 10.40:1
#BBD7C7
Navy text10.40:1AAA
Cream text1.43:1Fail
500 / core Navy ink · 6.95:1
#83B69A
Navy text6.95:1AA
Cream text2.14:1Fail
700 Navy ink · 4.57:1
#69927B
Navy text4.57:1AA
Cream text3.25:1Large only
900 Cream ink · 5.55:1
#4C6A59
Navy text2.67:1Fail
Cream text5.55:1AA

Light Peach

100–900 · original color = 500
100 Navy ink · 15.01:1
#FBF7F4
Navy text15.01:1AAA
Cream text1.01:1Fail
300 Navy ink · 13.36:1
#F3E9E0
Navy text13.36:1AAA
Cream text1.11:1Fail
500 / core Navy ink · 11.45:1
#EAD7C6
Navy text11.45:1AAA
Cream text1.30:1Fail
700 Navy ink · 7.24:1
#BBAC9E
Navy text7.24:1AAA
Cream text2.05:1Fail
900 Navy ink · 3.98:1
#887D73
Navy text3.98:1Large only
Cream text3.73:1Large only
02 / Typography

Editorial confidence.
Digital precision.

An expressive but controlled serif handles major statements. A clean sans-serif organizes navigation, supporting text, data, and interfaces.

Display typeface / brand standard

Ag

EB Garamond · Headlines, statements, editorial quotations

Interface typeface / brand standard

Ag

Roboto · Body copy, labels, navigation, UI

Display / H1EB Garamond · 3.7–8rem
Line 0.99 · tracking -0.052em

Good ideas deserve a better system.

Section / H2EB Garamond · 2.4–4.5rem
Line 1.03 · tracking -0.035em

Design follows intent.

Card / H3Roboto · 1.45–2rem
Line 1.25 · weight 650

Creative leadership at operational scale

Body / paragraphRoboto · 1rem
Line 1.6 · weight 400

The strongest brand systems are both useful and distinctive. Clear rules let teams move quickly, maintain quality, and reserve their attention for the work that actually requires judgment.

Eyebrow / labelRoboto · .75rem
Letter spacing .15em

Creative systems & brand leadership

03 / Structure

Order creates
freedom.

A consistent twelve-column layout, fluid typography, and a four-point spacing rhythm create predictable responsive behavior.

12-column foundationMax width: 1280px
1
2
3
4
5
6
7
8
9
10
11
12
Desktop: 12 columnsTablet: 2–6 columns depending on componentMobile: single-column content
Spacing scale / rem
2.5
41
61.5
82
123
164
246
Corners / intentional, not excessive
6px
12px
20px
04 / Components

Small parts.
Consistent behavior.

Core controls and content structures that can be reused in WordPress or standalone HTML without visual drift.

Buttons / all states
Primary action Accent action Secondary actionText link ↗
Badges / section markers
Creative LeadershipDesign SystemsFeatured WorkAI Integration
Pillar / 0101

Brand Systems

Identity architecture and clear specifications that make consistency repeatable.

Explore pattern ↗
Pillar / 0202

Creative Operations

Structured production workflows that protect quality and reduce repetitive work.

Explore pattern ↗
Pillar / 0303

Growth Execution

Campaign systems and performance-minded creative built to improve outcomes.

Explore pattern ↗
Form controls / demonstration

Start a conversation.

Demo form. Data is not sent anywhere.

Usage note

Components earn their place by being useful.

Every pattern needs documented states, behavior, responsive rules, and accessibility requirements. If a component needs an exception, record the exception.

✓

Minimum target size of 44 × 44px for touch interactions where practical, visible keyboard focus, semantic controls, and explicit disabled states.

Component contracts / working proposal

Document each state.

Interactive controls

Default, hover, keyboard focus, disabled, loading, and error states. Use semantic buttons or anchors for their actual actions.

Forms and validation

Labels remain visible. Error text must explain what to fix, and invalid controls must expose aria-invalid and described-by text.

Responsive layout

Components must work at 360px, 390px, 768px, 1024px, and 1440px, including 200% zoom.

05 / Page patterns

From standards
to real pages.

A sample portfolio hero and proof section, aligned with the live site's focus on leadership, results, and scalable production.

Example: portfolio landing page
Creative & brand leadership

Strategy, craft, and measurable impact.

Creative leadership that connects strong ideas with the systems and teams required to execute them at scale.

Visit current site ↗View implementation
TYPE / DISPLAY + BODYLAYOUT / LEFT ALIGNEDCOLOR / CREAM + NAVY + RED
Component / Case study overviewExample pattern

Show the work. Show the outcome.

A reusable portfolio component designed for recruiters, CMOs, and prospective strategic partners.

Review implementation ↗
Role
Creative leadership and systems direction
Business challenge
State the specific constraint or opportunity.
Approach
Explain the decisions and repeatable operating system.
Outcomes
Link to verified performance data before publishing.

Illustrative structure only. Replace placeholder descriptions with sourced project details before using this component on the portfolio.

Proof / outcomes

Clarity you can measure.

Example proof module using performance statistics currently stated on matthew-daniel.com. Keep individual metrics attached to case-study evidence.

136%Increase in production capacity
56%Reduction in project timelines
$7MAttributed campaign revenue
42M+Campaign impressions
06 / Implementation

Designed once.
Used everywhere.

The system is portable: documented rules, design tokens, and class-based components remain consistent across HTML/CSS and WordPress.

Step 01

Approve foundations

Verify the actual site fonts, select type scale, and reconcile current colors and layout behavior with these proposed standards.

Step 02

Publish component source

Keep tokens and components in a versioned GitHub repository. Review all changes before they reach production.

Step 03

Map to Elementor

Use Global Styles and Variables for the basics, then test Elementor MCP on a staging site for native V4 components.

Current status: This is a visual and technical proposal, not a verified extraction of the live site's CSS. The original palette and chosen font families are established; color ramps, responsive sizing, and component specifications remain working proposals.