BITTER / SEMIBOLD 600
Aa
Iron & Oak
Architectural slab serifs. A grounded wordmark with a distinctive ampersand.
Bitter on Google Fonts ↗IRON & OAK / DESIGN REFERENCEBY IFTHIS 🜛 STUDIO
01 / Introduction
Iron & Oak.
Brand guide.
A considered identity.
A consistent impression.
The visual language, materials and practical standards behind Iron & Oak—collected in one place for every person shaping the brand.
Explore the identity ↓PREPARED FOR IRON & OAK
03 NOVEMBER 2026 · EDITION 01
03 NOVEMBER 2026 · EDITION 01
Strength in the structure.
Warmth in the details.
Iron & Oak is a builder and developer brand, with Hortter Street as its featured project. The identity brings together the solidity of iron and the natural character of oak.
The tree-and-house emblem connects architecture with its setting. Bitter gives the name a grounded, architectural presence. Manrope brings clarity to the information around it.
Established identity
Name, Bitter lettering, supplied emblem and the approved five-sign family.
Application concepts
Generated office views express the design direction; they are not completed-office photography.
Studio recommendations
Digital palette, copy guidance and practical usage standards developed for this edition.
02 / Identity system
One mark.
Room to adapt.
The original tree-and-house silhouette and Bitter wordmark form the core identity. Choose the composition that suits the space, while preserving the artwork.
PRIMARY LOCKUP
OUTLINED VECTOR ARTWORK
OUTLINED VECTOR ARTWORKRECOMMENDED CLEAR SPACE · ½ I
Leave at least half the height of the capital I around the artwork. Give it more room on busy or textured surfaces.
Protect the details.
- Write the name correctly.Iron & Oak. A space on both sides of the ampersand. No added legal suffix or tagline on the mark.
- Keep the original proportions.Scale uniformly. Do not stretch, redraw, outline or rearrange the symbol and lettering.
- Use a single artwork colour.Black on light backgrounds; white on dark. Keep the window and branch cutouts transparent.
- Use the vector master.Logo lettering is outlined. Do not rebuild the wordmark as live text for finished artwork.
| Composition | Suggested width | Use |
|---|---|---|
| Horizontal / stacked combined | 220 px | Primary brand identification |
| Wordmark | 140 px | Compact header, footer or film credit |
| Original symbol | 96 px | Avatars, watermarks and larger graphic accents |
| I&O monogram | 64 px | Supplementary small graphic |
| IO micro monogram | 16 px | Browser favicon |
Iron & Oak ×Iron & Oak · browser identity
A smaller mark for smaller spaces.
The IO micro monogram protects legibility at browser size. The full emblem remains the primary symbol; the small initials are a supporting option.
03 / Colour & materials
Warmth, without
the shine.
Digital palette · studio recommendation
Charcoal and ivory establish contrast. Oak, taupe and cognac add warmth. The physical material direction is established; these digital values translate it for consistent use.
01
Blackened iron
Matte charcoal, quiet patina and visible depth. Legibility comes from relief, wood contrast and natural shadows.
02
Weathered oak
Medium-tone wood with grain, knots and controlled natural variation. Substantial forms and honest joinery.
03
Plaster & leather
Warm ivory mineral surfaces, pale stone and restrained taupe or cognac seating. A calm background for the craft.
Keep the finish language consistent.
No gold, brass, bronze, copper, polished chrome or orange rust. Avoid glossy orange varnish, exaggerated distressing and decorative forge props. Warmth comes from wood, leather and light.
Aa
Iron on Ivory
Use this pairing for reading text and controls. Check every other text/background combination against the WCAG contrast guidance ↗: at least 4.5:1 for normal text and 3:1 for large text.
04 / Typography
Character in the name.
Clarity everywhere else.
Bitter SemiBold belongs to the logo. Manrope carries headings, body copy, navigation and interface labels. This pairing is reflected in the November 3 Framer implementation record.
MANROPE / REGULAR TO SEMIBOLD
Aa
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789 &!?—
abcdefghijklmnopqrstuvwxyz
0123456789 &!?—
Open, contemporary and readable. Weight 400 for reading; 500–600 for hierarchy.
Manrope on Google Fonts ↗| Role | Weight | Size in px | Line height | Tracking |
|---|---|---|---|---|
| H1 / primary | 500 | 80 / 68 / 48 | 1.08 | −0.03em |
| H1 / inner page | 500 | 52 / 44 / 36 | 1.20 | −0.02em |
| H2 | 500 | 48 / 38 / 28 | 1.20 | −0.02em |
| H3 | 500 / 600 | 34 / 28 / 22 | 1.20 | −0.015em |
| H4 | 500 / 600 | 28 / 24 / 22 | 1.30 | −0.01em |
| H5 | 500 / 600 | 22 / 20 / 18 | 1.30 | −0.01em |
| H6 | 500 / 600 | 18 / 16 / 16 | 1.40 | 0 |
| Body / large | 400 | 18 / 18 / 16 | 1.60 | 0 |
| Body / standard | 400 | 16 / 16 / 16 | 1.60 | 0 |
Breakpoint reference: desktop ≥1200 px; tablet ≥810 px; mobile <810 px. Font sizes describe the recorded website styles, not a requirement to fit every asset into the same scale. Original gallery page chrome uses its own utility fonts and is not the brand type system.
Full inherited type referenceView all variants +
All recorded text-style variants, including the template’s different mobile sizes for regular, medium and semibold H2 styles. Values are preserved from the November 3 implementation record.
| Style | Weight | Desktop / tablet / mobile | Line height | Tracking |
|---|
05 / Voice & copy
Specific.
Assured. Human.
Editorial direction · studio recommendation
Let the work carry the confidence. Describe decisions, materials and lived experience in clear language. Use warmth without slipping into vague luxury claims.
Speak concretely.
Name the place, the material or the design decision. Give the reader something they can picture.
Sound like a person.
Use short, natural sentences and active verbs. Explain the thinking without selling every detail.
Let evidence lead.
Keep project status, approvals and specifications precise. Separate design intent from completed work.
Copy in practice
Illustrative examples, not approved claimsAVOID
“Unrivalled luxury. The ultimate in sophisticated living.”
PREFER
“Warm oak, quiet light and carefully considered details.”
AVOID
“Your dream home is ready.”
PREFER
“Explore the design direction for Hortter Street.”
Names & roles
- Brand
- Iron & Oak
- Founders
- Dax Richardson
Gerald Hevey - Role label
- Founder
- Featured project
- Hortter Street
Writing conventions
Use “Iron & Oak” consistently in headings, captions and credits. Keep sign copy to the name alone. Do not turn draft website copy into an official tagline.
Project descriptions should match verified documents. Office concepts communicate the brand atmosphere; they do not establish finishes, availability or approvals for a residential project.
06 / Signage
A family of signs.
One material language.
Approved visual concepts
Five applications, each with a distinct role. The emblem, name and restrained finish remain consistent as the scale and mounting change.
FABRICATION NOTE
Use the supplied vector master for production, not traced generated lettering. Confirm dimensions, fixing methods and finish with the fabricator. The desk sign’s enclosed cutouts need a backing or bridges. These images communicate design intent.
07 / Office imagery
The identity,
in its environment.
Reception and consultation references establish the materials and light. The office series extends that direction into related spaces, with each sign placed where it serves a purpose.
Compose with restraint.
Use eye-level views, straight verticals and believable room proportions. Keep furniture arrangements practical and leave room for circulation. Let the architecture be the subject.
Keep the light natural.
Soft daylight and discreet concealed warmth. Preserve neutral materials and real shadows; avoid a sepia cast or a glossy showroom effect.
Keep the story accurate.
Identify generated images as concepts where the context could imply a built space. Do not use office concepts to promise Hortter Street finishes.
Reusable image directionOpen prompt builder +
Use the approved room references for the environment and the vector logo or approved sign study for identity. The image model should preserve the sign, not redesign it.
08 / Digital application
Make the identity
work on screen.
Keep the website focused on Iron & Oak as a developer, with the current project taking the lead. Reuse the existing Novalux structure and give the brand room within it.
HEADER & FOOTER IDENTITY STUDY
Projects About FoundersFEATURED PROJECT
Hortter Street
Use project-specific imagery and verified information.
Explore the project ↗
Iron & OakBuilder & developer
Layout & hierarchy
- Use the horizontal combined logo when the header has enough width. At 220 px wide it is about 52 px tall.
- For a compact slot, use the wordmark instead of squeezing the combined artwork.
- Use the horizontal white combined logo in the dark footer.
- Preserve image focal points across desktop and mobile. Avoid cropping signs or faces at the edges.
Content architecture
- Home introduces the business and the current featured project.
- About carries the mission and approach; a separate mission page is unnecessary.
- The existing Agents structure becomes Founders, with Dax Richardson and Gerald Hevey.
- Project stories, cinematic films and useful building/design content can grow within the same brand. DAX merchandise remains a later scope.
The layout above is a guide illustration, not a screenshot of a published website. The type scale comes from the November 3 implementation record; this guide does not assert a new Framer publication.
09 / Asset library
Everything you need.
Ready to use.
The three original HTML galleries are preserved here alongside their downloadable packages. Choose the correct source file for the job and keep the master artwork intact.
01 / IDENTITY
The complete logo kit
Black and white lockups, wordmarks, symbols, monograms, favicons, social assets and font source.
02 / ENVIRONMENT
The five-sign family
Approved plaque, raised wall logo, glass-door mark, projecting sign and desk sign concepts.
03 / APPLICATION
The office image series
Five corrected room concepts with the sign family integrated throughout the office.
Choose the right file.
SVG — scalable digital artwork; preferred for Framer.
PNG — transparent raster logo assets.
PDF — RGB vector artwork for layout and print handoff.
JPG — office and signage concept images.
About this edition
Compiled from the project’s approved identity assets, five-sign studies, corrected office-image series and recorded website typography. Practical usage, voice and digital colour guidance are studio recommendations. Generated images are visual concepts; final signage production should always use the vector masters.