diamond.graphite.dev website design: fonts, colors and UI patterns

Overview

Diamond by Graphite presents a dark-mode developer-tool aesthetic built on extreme contrast and material precision. The interface rests on a near-black canvas that lets reflective 3D crystal imagery and glowing white typography command attention. The visual system pairs editorial confidence with technical credibility: large Matter display type sets product headlines with subtle negative tracking, while Inter handles functional body copy and interface labels. DM Mono appears sparingly as a terminal-style accent, reinforcing the code-review context without overwhelming the reading experience.

The design language balances two modes of expression. Marketing surfaces use dramatic scale, luminous headlines with soft glow effects, and cinematic product renders of faceted crystal forms. Functional surfaces—contact forms, FAQ sections, footer navigation—retain the dark atmosphere while introducing tighter spacing, hairline borders, and muted secondary text to establish clear information hierarchy. Every interactive element maintains the same dark sensibility: inputs sit flush against the canvas with subtle borders, buttons invert to white-on-black or black-on-white depending on hierarchy, and status indicators punctuate the darkness with a single vibrant green.

Colors

The palette is intentionally narrow, deriving visual interest from value contrast and material photography rather than chromatic variety. The near-black canvas creates an immersive, focused environment appropriate for a developer tool. White serves as the primary action and ink color, with a single green accent for operational status and a single orange accent for terminal-style labels.

The color logic follows a strict dark-mode hierarchy. Light values advance; dark values recede. The green accent appears only in functional status contexts, never as decoration. The orange accent associates with monospace contexts and command-line aesthetics. Photographic imagery introduces chromatic variation through environmental reflections on crystal surfaces, but the interface itself remains disciplined.

Typography

Three families collaborate across distinct roles. Matter carries display and headline weight with geometric confidence. Inter provides the workhorse body and interface text with excellent legibility at small sizes. DM Mono supplies technical accents and code-adjacent labels.

Matter appears in Medium weight for headlines, leveraging its designed heft without requiring Bold. Inter uses Regular for body and navigation, Medium for labels and buttons. DM Mono remains Regular throughout. The hero display size receives a soft glow treatment in implementation, creating a luminous halo that separates it from the dark canvas without altering the type color.

Font credits: Matter designed by Martin Vácha, available from Displaay. Inter designed by Rasmus Andersson. DM Mono designed by Colophon Foundry. Verify licensing for these families before production use.

Layout

The layout system favors centered single-column compositions for marketing content and asymmetric two-column splits for functional pages. Maximum content width appears constrained to a readable measure, with generous vertical breathing room between sections.

The hero section centers its headline and action pair against the full viewport width, with the 3D crystal sculpture positioned below as a dramatic horizontal band. The sculpture breaks the frame, extending edge-to-edge with its reflective surfaces catching environmental light. This creates a theatrical focal point that separates the upper call-to-action from the footer information.

The contact page introduces a split-panel composition: a narrower left column contains contextual help, contact alternatives, and partner logos; a wider right column hosts the form. Both columns share the same surface background, unified by a subtle border that frames the entire panel against the darker canvas. The left column stacks information with clear typographic hierarchy—bold labels introduce each option, with regular body text explaining the action.

The FAQ section returns to an asymmetric split: a fixed left column carries the section title and terminal-style prefix, while the right column contains the accordion stack. This creates a magazine-style reading flow where the eye anchors on the left before scanning questions on the right.

Footer layout distributes information across the full width. Brand identity and status occupy the left; navigation columns cluster on the right with consistent internal spacing. Social icons sit below the brand mark as a compact horizontal row.

Spacing follows a 0.25rem base unit. Section vertical padding measures 6rem, creating dramatic separation between content areas. Component internal padding ranges from 1rem to 1.5rem. Content gaps between related elements measure 1rem. The system avoids tight packing; even dense functional pages maintain breathable intervals.

Visual language

The visual identity synthesizes material luxury with technical precision. The 3D crystal sculpture serves as the central metaphor: faceted, reflective, engineered, valuable. Rendered in dark glass with chromatic dispersion at the edges, it sits against the black canvas as a luminous object. The sculpture appears in horizontal bands that break the page's vertical rhythm, creating cinematic transitions between content zones.

Typography reinforces this dual character. Matter's geometric construction feels contemporary and product-forward, while its medium weight avoids the aggression of bold sans-serifs. The hero glow effect softens the digital edge, suggesting intelligence and warmth rather than cold machinery. Inter's neutrality handles the functional load without competing.

Interactive elements maintain a consistent material logic. Buttons are solid and decisive: white fill with black text for primary actions, transparent with white text and hairline borders for secondary choices. Inputs sink into the surface with dark fills and subtle borders, inviting entry without demanding attention. The submit button on the contact form spans full width, its white surface creating a clear terminal point to the form flow.

The terminal aesthetic appears in small doses: the orange >_ prefix before FAQ labels, monospace formatting for technical references, the green operational status dot. These elements signal developer fluency without pastiche. The status indicator in the footer—a green dot with adjacent text—provides living proof of system reliability.

Components

Primary button

• Anatomy: Text label with optional arrow icon, contained within a rounded rectangle
• Surface: Solid white fill (#FFFFFF)
• Typography: {typography.label}, black text (#0A0A0A)
• Shape: 0.5rem border radius
• Spacing: 0.75rem vertical padding, 1.5rem horizontal padding
• Composition: Centered text, icon follows text with small gap
• Variants: Full-width on mobile or constrained forms; inline for header actions

Secondary button

• Anatomy: Text label with optional icon, transparent background
• Surface: Transparent fill, 1px solid border (#333333)
• Typography: {typography.label}, white text (#FFFFFF)
• Shape: 0.5rem border radius
• Spacing: 0.75rem vertical padding, 1.5rem horizontal padding
• Composition: Centered text, maintains visual presence without competing with primary

Input field

• Anatomy: Label above, text input below, optional placeholder
• Surface: Dark fill (#1A1A1A), 1px border (#333333)
• Typography: Label uses {typography.label}; input text uses {typography.body-small}
• Shape: 0.375rem border radius
• Spacing: 0.75rem vertical padding, 1rem horizontal padding; label sits 0.5rem above input
• Composition: Full-width within parent container, stacked vertically with adjacent fields

Select dropdown

• Anatomy: Label above, trigger showing selected value with chevron icon
• Surface: Dark fill (#1A1A1A), 1px border (#333333)
• Typography: {typography.body-small} for trigger text
• Shape: 0.375rem border radius
• Spacing: Matches input field dimensions
• Composition: Chevron icon right-aligned within trigger

Accordion item

• Anatomy: Question text left, chevron icon right, expandable answer below
• Surface: Transparent background, 1px top border (#222222)
• Typography: Question uses {typography.body} at medium weight; answer uses {typography.body-small}
• Shape: No border radius
• Spacing: 1.5rem vertical padding per row
• Composition: Full-width rows stacked vertically, chevron rotates to indicate state
• States: Collapsed shows only question; expanded reveals answer with maintained padding

Footer

• Anatomy: Brand mark with copyright, status indicator, social icons, navigation columns
• Surface: Transparent, inherits canvas
• Typography: Brand uses {typography.body-small}; links use {typography.navigation} in muted color
• Spacing: Generous top padding (6rem), internal column gaps of 4rem
• Composition: Brand block left-aligned, navigation clusters right-aligned in equal columns
• Elements: Green status dot precedes operational text; social icons (Slack, X, GitHub) appear as simple glyphs

Responsive behavior

The design's dark canvas and centered compositions adapt naturally to narrower viewports. The hero headline should maintain large scale but reduce to 2.5rem on tablet and 2rem on mobile to preserve line breaks. The 3D crystal sculpture remains full-width, with its focal point centering automatically as the viewport narrows.

The contact page split-panel should stack vertically on tablet and below, with the left column's contextual help preceding the form. Full-width buttons become essential at narrow sizes to maintain touch targets. The FAQ split should similarly collapse to single-column, with the section title preceding the accordion stack.

Footer navigation columns should reflow from horizontal clusters to a single column or two-column grid on mobile, maintaining readable tap targets. Social icons should remain horizontally arranged but gain additional spacing for touch accessibility.

The glow effect on hero headlines should reduce in intensity on mobile to prevent rendering performance issues and visual overwhelm at close reading distances.

Practical implementation guidance

### Preserve - The near-black canvas as the dominant background; any lighter surface should feel intentionally elevated - The strict two-button hierarchy: white primary, transparent secondary with border - The 3D crystal imagery as a distinctive brand asset, rendered with reflective materials and chromatic edge dispersion - The terminal-style orange prefix for technical or FAQ contexts - The green operational status indicator as a living trust signal

### Avoid - Introducing additional accent colors beyond green and orange; the palette's restraint is central to the identity - Light mode inversion; the dark atmosphere is integral to the product positioning - Heavy shadows or elevation effects; depth should come from value contrast and imagery, not drop shadows - Rounded corners larger than 0.5rem; the aesthetic favors precision over friendliness

### Recommended build order 1. Establish the canvas and surface color tokens with proper dark-mode contrast ratios 2. Implement Matter for headlines and Inter for body text at the specified scale 3. Build the button system with primary and secondary variants 4. Create the input and select components with consistent dark fills and borders 5. Develop the accordion pattern for FAQ content 6. Integrate the 3D crystal imagery with responsive full-width behavior 7. Add the footer with status indicator and social icons 8. Apply the hero glow effect as a final polish layer

### Accessibility - Ensure white text on near-black canvas meets WCAG AAA contrast standards (it does at these values) - Provide visible focus states for all interactive elements; consider a 2px outline offset or subtle background shift - Maintain touch targets of at least 44×44dp for buttons and accordion triggers - Preserve semantic heading hierarchy: Matter headlines as h1-h2, Inter body as paragraph, labels as appropriate - The green status indicator should not be the sole means of conveying status; pair with text always - Consider reduced-motion preferences for the hero glow effect and any accordion expand/collapse animations

Scope note

This guide covers the Diamond by Graphite marketing site including the homepage hero, contact form, FAQ section, and footer. Navigation header, pricing page, and in-product interfaces are not represented in the supplied material. Measurements are practical adaptation targets. Motion, hover states, and mobile-specific layouts were not captured and should be designed to match the established dark, precise aesthetic.

More website design guides

Browse website design guides by pattern and website.