Loading
Brand Guidelines
Community of Software and Data Developers
The C# Corner logo, the palette, the type and the voice — with the rules for using them and the files to download. Everything here is read out of this codebase, so the page and the product cannot drift apart.
The palette, type and asset sections are transcribed from source and are true today. Clear space, usage and voice are marked recommended in their headings: this codebase carries no policy on them yet, so treat those three as a draft to ratify rather than settled rules.
FAST RULES
the whole kit, in one screen
Brand accent
#67F5DC
The logo mint. On light grounds use #0B8B79.
Primary action
#0086DC
--mainBlue. Buttons and links.
Heading colour
#BCDBFE
--headingColor on dark. #010101 on light.
Ground
#091227
--bodyBg. The site is dark by default.
Typeface
Plus Jakarta Sans
600 for headings, 400 for body.
Minimum mark width
22px
16px for a browser tab, and nowhere else.
Clear space
17.8% of width
One bracket arm on all four sides.
Corner radius
6px
--bdrRadius. Every card, field and button.
The name
C# Corner
Sharp sign, one space, capital C.
LOGO VARIATIONS
public/images/layout/
The mark is two ideas stacked: four bracket corners that frame the composition, and an isometric cube drawn as an outline plus a Y-spine — a package, a build artifact, a unit of shipped work. Three versions exist, and which one you use is decided by the ground it stands on, never by preference.
Dark surface
favicon.svg
The default. Mint brackets, white cube. Use it on --bodyBg, --boxbg and any ground darker than about #4A5568.
SVG
Light surface
brand-mark-light.svg
Brackets darkened to #0B8B79, cube to #17264B. The full-saturation mint measures roughly 1.4:1 on #F5F7FA, so it must not be used there.
SVG
One colour
brand-mark-mono.svg
Every path is currentColor, so it takes the colour around it. For print, embroidery, stamping and any ground the two-colour mark cannot hold.
SVGC# Corner
Horizontal lockup
components/Header.tsx
Mark then wordmark, left-aligned and vertically centred, with the mark about 1.5× the cap height. In the header the cube is a rotating CSS build inside a bracket frame, scaled to 0.7.
App icon
favicon-icon-dark.svg
The whole mark in #BCDBFE on an opaque #262D40 tile. Drawn on a 32-unit square with the artwork inset 4u, so its clear space is already baked in. This is the shipping favicon.
SVG
Wordmark
logo.png · 657 × 130
White artwork on a transparent ground, so it disappears on light surfaces. There is no SVG of the wordmark yet — tracing the raster would invent letterforms, so it needs a designer rather than a conversion.
PNGTYPOGRAPHY
app/layout.tsx · --sitefont
One family sitewide: Plus Jakarta Sans, loaded through next/font/google and exposed as --font-jakarta. The stylesheets read it through --sitefont, which falls back to the named family and then the system sans.
Aa Bb Cc & C# 0123456789
Regular 400Medium 500Semibold 600Bold 700Extrabold 800
Four sizes are declared as tokens. Anything outside this set is a one-off, and should be justified in review.
Community of Software and Data Developers
Section leads and card titles
Article body and long-form reading
Interface text — nav, meta, labels, buttons. This is the site's base size, so most of what a reader actually sees is set here.
--headingBold: 600 is the declared heading weight. The 700 and 800 cuts are loaded but reserved for the wordmark and display use.
USAGE
recommended
Do
- Scale the mark proportionally. Set width and height together, or set one and leave the other auto.
- Keep one bracket arm of clear space on all four sides — 17.8% of the mark's width.
- Pick the variation that matches the ground: dark, light, or one colour.
- Use the SVG wherever the medium allows it. The PNGs are legacy exports.
- Write the name as C# Corner, and let it wrap as a unit rather than breaking between the two words.
Do not
- Do not stretch, squash or rotate the mark. It is square and it is level.
- Do not recolour the brackets. Mint and #0B8B79 are the only two, and the status hues belong to status.
- Do not put the two-colour mark on a light ground, or on a photograph busy enough to eat the brackets.
- Do not add a shadow, a glow, a gradient or an outline to the mark.
- Do not redraw, retype or approximate the wordmark, and do not lock it to another logo without asking first.
Stretched. Width and height set independently, so the cube stops reading as isometric.
Rotated. The brackets align to the layout grid. Tilted, they read as decoration instead of a corner.
Recoloured. Mint and #0B8B79 are the only bracket colours. The status hues belong to status.
Crowded. Bleeding past the edge destroys the frame the whole mark is built on.
COLOUR
app/styles/01-stylesheet.css
Six colours carry the brand. Everything below them is interface, declared twice — once under html[data-theme="dark"], once under html[data-theme="light"] — and consumed only through the variables. Dark is the default; light is the toggle. Never hard-code a hex in a component; read the token.
Mint
#67F5DC
The logo brackets. The one colour that is the brand rather than the interface.
Sky
#BCDBFE
Headings and highlights on dark.
Blue
#0086DC
Primary action. Buttons, links, anything clickable.
Navy
#091227
The page ground the whole site sits on.
Slate
#141D36
Card and panel surfaces.
Masthead
#17264B
The header bar, in both themes.
Surfaces & text
| Token | Role | Dark | Light |
|---|---|---|---|
| --bodyBg | Page ground | #091227 | #F5F7FA |
| --boxbg | Card surface | #141D36 | #FFFFFF |
| --boxlightbg | Raised / hover | #2A3554 | #E3EDFF |
| --headerBg | Masthead | #17264B | #17264B |
| --mainLeftNavBg | Left nav | #202636E6 | #202636 |
| --headingColor | Headings | #BCDBFE | #010101 |
| --fontColor | Body text | #9AB9DC | #202636 |
| --textColor2 | Secondary text | #9DAAD2 | #4B5563 |
| --textlighter | Muted / meta | #7F8AAB | #9CA3AF |
| --bdrColor | Hairline | #555F7D75 | #555F7D30 |
| --inputBg | Form fields | #12192D | #FFFFFF |
Accent & status
| Token | Role | Dark | Light |
|---|---|---|---|
| — (logo) | Bracket mint | #67F5DC | #0B8B79 |
| --texthightlight | Highlight | #BCDBFE | #666666 |
| --mainBlue | Primary action | #0086DC | #007BFF |
| --textHover | Link hover | #30A4FF | #30A4FF |
| --mainGreen | Success | #2DE735 | #22C55E |
| --mainOrange | Warning | #FF6600 | #F97316 |
| --mainRed | Danger | #F14035 | #EF4444 |
| --errorColor | Validation error | #FF3B00 | #DC2626 |
The bracket mint has no light-theme counterpart declared anywhere in the stylesheets. #0B8B79 is this page's proposal for one, and brand-mark-light.svg is that proposal as a file: #67F5DC on #F5F7FA measures roughly 1.4:1, which is unusable for anything but a large decorative fill.
CLEAR SPACE & SIZING
recommended — derived from the artwork
Clear space
Keep one bracket arm clear on all four sides — x = 3.909u on the 22-unit square, or 17.8% of the mark's width at any size. Nothing crosses it: no type, no rule, no card edge. The drawing at the top of this page has it dashed.
This is not arbitrary. favicon-icon-dark.svg already insets 24u of artwork inside a 32u tile, which is 4u of padding — the same ratio, rounded off. Adopting x just makes the existing icon's own construction the rule everywhere else.
Minimum size
Below 22px the cube's Y-spine closes up and the brackets fuse into the frame. That is the mark's native viewBox, and the floor for on-screen use.
The browser tab is the one exception, where 16px is forced — use the app icon there, since the two-colour version loses the cube entirely at that size. For print, hold the mark at 8mm or wider; the bracket arm is a hairline below that.
16 px
Favicon only
22 px
Floor
28 px
Header lockup
40 px
Avatar slot
64 px
Empty states
96 px
Splash, OG image
VOICE & TONE
recommended
C# Corner is a community of working developers publishing for each other. The voice follows from that and from nothing else.
Plain
Say the thing. This is a site of working developers reading in a second language as often as a first, so short sentences and ordinary words beat clever ones.
Specific
Name the version, the error, the method. "Fixes the null reference in Entity Framework Core 8" is worth more than "improves reliability".
Peer to peer
Members write for members. Not a vendor talking down, not a newcomer apologising — someone who solved it explaining how.
Welcoming
Somebody's first article is somebody's first article. Correct the code, never the person.
Writing the name
The domain spells it out as c-sharpcorner.com and the code prefixes classes with csharp-, but neither is how the name is written in prose.
- C# CornerC#CornerOne space between the two words.
- C# CornerC-Sharp CornerThe sharp sign, not the word — even though the domain spells it out.
- C# Cornerc# cornerBoth words are capitalised.
- C# CornerCSharp CornerCSharp appears in code and class names, never in prose.
DOWNLOADS
public/images/layout/
Every file the site actually ships. Take the SVG wherever the medium allows it — the PNGs are legacy exports kept alive by the modules that still name them.
Mark, dark surfaceThe primary mark. Mint brackets, white cube.Mark, light surface#0B8B79 brackets, #17264B cube.Mark, one colourcurrentColor throughout. Renders black on its own.App icon#BCDBFE on an opaque #262D40 tile, padding baked in.App icon, rasterThe same tile for anything that will not take an SVG.WordmarkWhite artwork on transparent. No SVG of this exists yet.
Two things are not here yet: an SVG wordmark and a social preview card. Both need a designer rather than a conversion. If you need either of those, an EPS, or a co-branded lockup, contact us — which is where the footer's Media Kit link used to go.